近期有做 eslint 统一代码风格的事情，结合自己的沉淀和网上的解决方案，分享一套 针对 react + typescript的 eslint 配置方案，配置完成后可以检测代码，统一代码风格，VScode 保存自动格式化代码。
1、使用 Eslint 来规范 typescript 代码
安装依赖：
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
这三个依赖分别是：
eslint: ESLint 的核心代码
@typescript-eslint/parser：ESLint 的解析器，用于解析typescript ，从而检查和规范 Typescript代码
@typescript-eslint/eslint-plugin：这是一个 ESLint 插件，包含了各类定义好的检测 Typescript 代码的规范
在项目根目录下新建 .eslintrc.js 文件,代码暂时如下
module.exports = {
env:{ //指定代码的运行环境
browser: true,
node: true,
},
parser: '@typescript-eslint/parser', //定义ESLint的解析器
extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范
plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
}
由于是 typescript 项目,所以 parser 需要配置成 @typescript-eslint/parser 才能正确检测代码。
其次 env 是配置环境，比如 console 只有在 browser 环境才存在，如果不配置的话可能会标红报错。
2、使用 Eslint 规范 React 代码
安装依赖：
npm i -D eslint-plugin-react
接着在 .eslintrc.js 中配置如下：
module.exports = {
env:{
browser: true,
node: true,
},
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended'
'plugin:@typescript-eslint/recommended'
], //使用推荐的React代码检测规范
plugins: ['@typescript-eslint'],
settings: { //自动发现React的版本，从而进行规范react代码
"react": {
"pragma": "React",
"version": "detect"
}
},
parserOptions: { //指定ESLint可以解析JSX语法
"ecmaVersion": 2019,
"sourceType": 'module',
"ecmaFeatures":{
jsx:true
}
},
rules: {
// 可以定义react 编码规则
}
}
3、结合 Prettier 规范代码
安装依赖
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
Prettier：Prettier插件的核心代码
eslint-config-prettier：解决 ESLint 中的样式规范和 Prettier 中样式规范的冲突，以 Prettier的样式规范为准
eslint-plugin-prettier：将 Prettier 作为 ESLint 规范来使用
根目录下创建 .prettierrc.js 文件，配置如下：
module.exports = {
"eslintIntegration": true,
"printWidth": 150, // 每行代码长度（默认80）
"tabWidth": 2, // 每个tab相当于多少个空格（默认2）
"useTabs": false, // 是否使用tab进行缩进（默认false）
"singleQuote": true, // 使用单引号（默认false）
"semi": true, // 声明结尾使用分号(默认true)
"trailingComma": "none", // 多行使用拖尾逗号（默认none）
"bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
"jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
"arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};
修改 .eslintrc.js 文件，引入 Prettier
module.exports = {
env: {
browser: true,
node: true
},
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
], //使用推荐的React代码检测规范
plugins: ['@typescript-eslint'],
settings: {
//自动发现React的版本，从而进行规范react代码
react: {
pragma: 'React',
version: 'detect'
}
},
parserOptions: {
//指定ESLint可以解析JSX语法
ecmaVersion: 2019,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
semi: ['error', 'always'],
eqeqeq: 'off',
'linebreak-style': ['error', 'unix'],
'no-useless-call': 'off',
'space-before-function-paren': ['error', { anonymous: 'always', named: 'never', asyncArrow: 'always' }]
}
};
4、 结合VScode
安装 VScode 插件 ESlint Prettier
然后配置 setting.json
"editor.tabSize": 2,
"editor.detectIndentation": false, // 全部统一成2空格缩进
"eslint.enable": true, //是否开启vscode的eslint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [
".js",
".jsx",
".ts",
".tsx"
]
},
"eslint.validate": [ //确定校验准则
"javascript",
"javascriptreact",
"html",
"typescript",
"typescriptreact"
],
至此，重新启动 VScode 就能看到效果，command + s 保存文件的时候回自动补全代码。
5、兼容老项目
针对老项目中有 .js 和 .jsx 混合的文件，可以在根目录下新建 .eslintignore 配置如下：
**/*.js
**/*.jsx
这样下来， eslint 就会忽略所有的 .js 和 .jsx 文件的校验。
6、使用 husky lint-staged 来控制 git 提交之前的校验
其中 husky 可以配置git 提供的钩子，比如 pre-commit pre-push 等。
lint-staged 是 git add . 之后“暂存” 状态的文件，也就是本次 git 提交的文件
安装依赖
npm i -D husky lint-staged
在 package.json 文件配置如下：
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint"
}
这样配置好之后，在提交 git 的时候，修改的文件如果没有修复 eslint 的报错，就会无法提交。
坑："*.{js,jsx,ts,tsx}": "eslint" 这里的配置{js,jsx,ts,tsx} 逗号后面不能空格，否则匹配不到文件,逗号后面不能空格，否则匹配不到文件,逗号后面不能空格，否则匹配不到文件!!!
特殊办法： 可以在后面加 --no-verify 跳过验证