前言
使用Typescript好幾年了，之前一直是使用TsLint做代碼檢查相速。然而TsLint已不再維護(hù)股冗，所以下定決心，把項(xiàng)目中的TsLint換成EsLint和蚪。移除TsLint相關(guān)部分就不述說(shuō)了止状，僅記錄EsLint配置過(guò)程。
資料
EsLint
EsLint Rules
Typescript-EsLint
EsLint的使用
安裝依賴
npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
這三個(gè)依賴分別是：
- eslint: EsLint的核心代碼
- @typescript-eslint/parser：ESLint的解析器攒霹，用于解析typescript怯疤，從而檢查和規(guī)范Typescript代碼
- @typescript-eslint/eslint-plugin：這是一個(gè)ESLint插件，包含了各類定義好的檢測(cè)Typescript代碼的規(guī)范
添加配置文件
npx eslint --init
根據(jù)實(shí)際項(xiàng)目選擇催束，我選擇的是js文件集峦，根目錄下增加.eslintrc.js文件。（建議選擇js文件抠刺，json不可以寫注釋）
修改配置文件
主要是修改rules中的相關(guān)配置塔淤，具體可查看官方配置
Prettier的使用
安裝依賴
npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier
這三個(gè)依賴分別是：
- prettier：prettier插件的核心代碼
- eslint-config-prettier：解決ESLint中的樣式規(guī)范和prettier中樣式規(guī)范的沖突，以prettier的樣式規(guī)范為準(zhǔn)速妖，使ESLint中的樣式規(guī)范自動(dòng)失效
- eslint-plugin-prettier：將prettier作為ESLint規(guī)范來(lái)使用
添加配置文件
在項(xiàng)目的根目錄下創(chuàng)建.prettierrc.js文件高蜂，并添加如下配置
module.exports = {
singleQuote: true,
trailingComma: 'es5',
printWidth: 120,
tabWidth: 4,
useTabs: false,
semi: true,
bracketSpacing: true
};
將Prettier添加到EsLint中
修改.eslintrc.js文件，在extends中增加
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
其中：
- prettier/@typescript-eslint：使得@typescript-eslint中的樣式規(guī)范失效罕容，遵循prettier中的樣式規(guī)范
- plugin:prettier/recommended：使用prettier中的樣式規(guī)范备恤，且如果使得ESLint會(huì)檢測(cè)prettier的格式問(wèn)題，同樣將格式問(wèn)題以error的形式拋出
使用husky和lint-staged構(gòu)建代碼
安裝依賴
npm i --save-dev husky lint-staged
修改package.json
添加以下代碼
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src*/**/*.ts": [
"prettier --config .prettierrc.js --write",
"eslint",
"git add"
],
"src*/**/*.json": [
"prettier --config .prettierrc.js --write",
"eslint",
"git add"
]
}
這樣锦秒，在執(zhí)行g(shù)it commit時(shí)露泊，EsLint會(huì)檢查提交的代碼。
