"在团队项目开发中，每人都有自己代码分格，而这些不同的代码风格混合在同一个项目中会使得代码看起来十分混乱，不利于阅读和维护，而这常常令我们感到烦恼。因此在一个团队中制定一套统一的代码规范势在必行。我之前在《React 项目中引入 TSLint 做代码规范》这篇文章中简单的介绍了一下如何在项目中引入TSLint做代码规范，现在本篇文章要介绍一下如何在项目中引入ESLint做代码规范。TSLint 和 ESlint 都是用来制定代码规范的工具，因此选择其中一个集成项目即可。这里介绍的是使用著名的独角兽公司 Airbnb 的前端ESlint编码规范
步骤一、安装 Airbnb 相关插件
现在终端（或cmd）中执行命令 npm -v 查看npm 版本号，如果不是 5 以上版本请先安装 nodejs 得到最新版本的 npm 执行一下命令
npx install-peerdeps --dev eslint-config-airbnb
1-1
这是最简单的做法安装 Airbnb 相关配套插件，当然官网中还有介绍其他的安装方法，不过另一种方法不如上面这一条命令来的简单所以这里不做赘述，有兴趣的可以 点击这里查看。
注意：如果在执行安装 eslint-config-airbnb 命令时报错，错误信息为：“找不到命令：install-peerdeps”，这时需要执行命令 npm install -g install-peerdeps 来安装 install-peerdeps 之后再尝试使用命令安装 eslint-config-airbnb，
步骤二、配置 .eslintrc.js 文件
在项目根目录下检查是否有以 eslintrc 为名字的文件（可能是 .eslintrc、.eslintrc.js、.eslintrc.json 等），如果没有则手动创建一个 .eslintrc.js 文件
2-1
我的 .eslintrc.js 的初步配置文件如下图，在后期项目逐步完善可能还会再根据团队偏好再在rules中添加新的规则或覆盖airbnb中的规则（在文末有 .eslintrc.js 文件中的代码可复制）
2-2
需要注意的是在 .eslintrc.js 文件的配置中有几个字段需要注意
parser: 配置解析器，可以是 babel-eslint，也可所以是 @typescript-eslint/parser，而官网中写道默认是 esprima，根据我的测试 babel-eslint 貌似只能解析 js 文件中ESLint规则，解析不到 tsx 文件中的规则，因此我在项目中使用的 @typescript-eslint/parser
plugins：在配置文件里配置插件时, 可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
rules：这是规则配置字段，该字段中的规则的优先级高于 aribnb 的规则，可以在该字段中配置规则覆盖 aribnb 中的规则。
步骤三、配置 .eslintignore 忽略文件
在该文件中配置不需要被 ESLint 检测的文件，如图3-1是我在项目中的配置
3-1
官网中的介绍如图3-2
3-2
步骤四、安装VsCode插件
安装ESLint插件后重启编辑器，查看ESLint规则是否生效
4-1
步骤五、检查ESLint规则是否生效
5-1
注意：如果没有生效查看在 .eslintrc.js 中的 rules 字段中是否配置了如下（如图2-1）规则
'react/jsx-filename-extension': ['error',{extensions: ['.js', '.jsx', '.ts', '.tsx'],}, ],
添加该规则后重启编辑器
注意：配置ESLint生效后请前往 《React 项目中添加 ESLint + Perttier 做代码规范》查看 ESLint 如何搭配 Perttier 写出更优质的代码。
.eslintrc.js 中的编码
module.exports = {
extends: ['airbnb', 'airbnb/hooks', 'prettier'],
parser: '@typescript-eslint/parser', // ESLint 默认使用 esprima 作为其解析器，也可以在配置文件中指定一个不同的解析器（它必须是一个 Node 模块，且它必须符合 parser interface）
env: {
// 要在配置文件里指定环境，使用 env 关键字指定你想启用的环境，并设置它们为 true
browser: true,
node: true,
mocha: true,
es6: true,
commonjs: true,
},
globals: {
// 要在配置文件中配置全局变量, 对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量
// "Babel": "writable",
// "React": "writable"
},
plugins: [
// 在配置文件里配置插件时, 可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
'react',
'jsx-a11y',
'react-hooks',
'import',
'prettier',
],
rules: {
// 可以使用 rules 连同错误级别和任何你想使用的选项，在配置文件中进行对airbnb规则的修改
indent: ['error', 4],
semi: [
'error',
'always',
{
omitLastInOneLineBlock: true,
},
],
'react/jsx-indent': ['error', 4],
'linebreak-style': ['error', 'windows'],
'react/jsx-filename-extension': [
'error',
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
],
'class-methods-use-this': 'off',
'import/extensions': 'off',
'import/no-unresolved': 'off',
'prettier/prettier': 'error',
// 'sort-imports': ['error', {
// ignoreCase: false,
// ignoreDeclarationSort: false,
// ignoreMemberSort: false,
// memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
// }],
// "global-require": "off",
// "no-underscore-dangle": "off",
// "no-new-func": "off",
// "no-param-reassign": "off",
// "react/prefer-stateless-function": "off",
// "react/no-multi-comp": "off",
// "react/jsx-no-bind": "off",
// "react/jsx-indent": "off",
// "react/jsx-first-prop-new-line": "off",
// "react/jsx-filename-extension": "off",
// "no-restricted-syntax": "off"
},
};
参考网址：
ESlint中文官网：https://eslint.bootcss.com/docs/user-guide/getting-started
https://www.npmjs.com/package/eslint-config-airbnb
https://blog.csdn.net/msg1254765721/article/details/90090242
https://www.jianshu.com/p/933b6b6a84c9
https://www.cnblogs.com/samwu/p/5772778.html
https://www.cnblogs.com/kugeliu/p/9154021.html
https://blog.csdn.net/weixin_34167043/article/details/88728537
网友评论