配置TypeScript的ESLint設置
1: 安裝相關依賴
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
eslint：ESLint的核心代碼庫
@typescript-eslint/parser：使得ESLint可以解析TypeScript的解析器
@typescript-eslint/eslint-plugin： TypeScript特有的ESLint的rules
2: 在項目根目錄下創(chuàng)建配置文件.eslintrc.js
//.eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
},
};
ESLint + TypeScript + React
如果是React+TypeScript的項目，也可以給React添加一個代碼檢查：eslint-plugin-react
安裝eslint-plugin-react
yarn add eslint-plugin-react --dev
添加相關配置
//.eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: false, // Disallows for the parsing of JSX
},
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
semi: "error"
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
};
在上面的配置里糙臼，我們添加了一條rule, semi: "error"。如果缺少分號，會報一個error。
添加lint命令
//package.json
"scripts": {
//other scripts
"lint": "eslint --ext=ts,tsx src"
}
以上script的意思，是我們只對/src這個目錄下面的，.ts和tsx文件進行l(wèi)int檢查辨泳。
假如我們有以下代碼
//./src/App.tsx
import React from 'react'
然后我們執(zhí)行命令：
yarn lint
我們會得到一個ESLint的error：
3: 配置代碼格式自動化 - prettier
ESLint是對你的源代碼根據(jù)配置的rules進行檢查，如果有問題會拋出錯誤玖院，提醒你去修改菠红。prettier是會強制把你的代碼按照配置好的規(guī)則進行format。
使用prettier需要安裝以下依賴：
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
prettier: prettier的核心代碼庫
eslint-config-prettier: disable可能沖突的ESLint的規(guī)則
eslint-plugin-prettier: 這個插件使得代碼可以通過ESLint的--fix自動被修正
添加prettier的配置文件.prettierrc.js
//.prettierrc.js
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 4,
};
.eslintrc.js做相應的調(diào)整
//.eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
},
};
修改lint的命令难菌，添加--fix參數(shù)
//package.json
"scripts": {
//other scripts
"lint": "eslint --ext=ts,tsx src",
"lintfix": "eslint --fix, --ext=ts,tsx src"
}
我們添加了一個命令"lintfix": "eslint --fix, --ext=ts,tsx src"试溯，相比上面一個lint，我們增加了--fix郊酒。因為之前我們安裝了eslint-plugin-prettier耍共，使得--fix可以自動fix一些ESLint 的error。
比如猎塞，在prettier.config.js文件里面试读，我們配置了tabWidth: 4，如果我們代碼里面有縮進是2格的荠耽，當我們run了yarn lintfix命令钩骇，這個2格的縮進就會被自動修正為4格。
4: 在代碼提交之前強制代碼格式檢查 - husky && lint-staged
為了保證有問題的代碼不被提交铝量，我們可以在提交之前倘屹，先跑一下lint檢查，如果lint有error慢叨，這次的commit就不成功纽匙。我們可以使用husky和lint-staged來實現(xiàn)以上功能。
安裝husky和lint-staged
yarn add husky lint-staged --dev
創(chuàng)建husky的配置文件husky.config.js
module.exports = {
hooks: {
'pre-commit': 'lint-staged', //call lint-staged in git pre-commit hooks(before every commit)
'pre-push': ''
}
};
在這個文件里面我們有看到'pre-commit'和'pre-push'拍谐，他們倆都是git提供的hook烛缔，git還有一些其他的hook馏段。這里我們先只對pre-commit進行配置。
這個文件配置的意思就是践瓷，在commit之前（也就是pre-commit這個hook）院喜，先去調(diào)用lint-staged.如果lint-staged有error，這次的commit就不會成功晕翠。
那接下來我們看一下lint-staged的配置
創(chuàng)建lint-staged的配置文件lint-staged.config.js
//lint-staged.config.js
module.exports = {
"src/*.+(ts|tsx)": ["eslint --fix"],
"*.+(json|scss|md)": ["prettier --write"]
};
以上配置的意思就是我們給lint-staged安排的task包括兩個：
1 對一些.ts, .tsx文件執(zhí)行eslint --fixd的命令
2 對.json, .scss, .md文件執(zhí)行prettier --write命令
所以喷舀，以上husky和lint-staged結(jié)合起來的配置達到的效果就是：如果你執(zhí)行g(shù)it commit, 會觸發(fā)eslint的檢查，如果有錯誤淋肾，這次commit就不會成功硫麻。
以上就是采用ESLint + prettier + husky + lint-staged來做一些代碼格式統(tǒng)一的例子。
