配置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: 在项目根目录下创建配置文件.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文件进行lint检查。
假如我们有以下代码
//./src/App.tsx
import React from 'react'
然后我们执行命令：
yarn lint
我们会得到一个ESLint的error：
3: 配置代码格式自动化 - prettier
ESLint是对你的源代码根据配置的rules进行检查，如果有问题会抛出错误，提醒你去修改。prettier是会强制把你的代码按照配置好的规则进行format。
使用prettier需要安装以下依赖：
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
prettier: prettier的核心代码库
eslint-config-prettier: disable可能冲突的ESLint的规则
eslint-plugin-prettier: 这个插件使得代码可以通过ESLint的--fix自动被修正
添加prettier的配置文件.prettierrc.js
//.prettierrc.js
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 4,
};
.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
'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参数
//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来实现以上功能。
安装husky和lint-staged
yarn add husky lint-staged --dev
创建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），先去调用lint-staged.如果lint-staged有error，这次的commit就不会成功。
那接下来我们看一下lint-staged的配置
创建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文件执行eslint --fixd的命令
2 对.json, .scss, .md文件执行prettier --write命令
所以，以上husky和lint-staged结合起来的配置达到的效果就是：如果你执行git commit, 会触发eslint的检查，如果有错误，这次commit就不会成功。
以上就是采用ESLint + prettier + husky + lint-staged来做一些代码格式统一的例子。
