Eslint使用（webpack中使用）
一、安装
npm i -D eslint
npm i babel-eslint \
eslint-config-airbnb \ // Airbnb的编码规范是在业界非常流行的一套规范
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react -g
二、配置文件
-
新建.eslintsrc文件，在根目录下面。
 -
对于与.eslintrc文件进行设置
1）每个环境的全局变量都不尽相同（如 nodejs 中没有 DOM 相关的全局变量）。在配置文件中可以自由的指定执行环境。
// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
};
（2）全局变量。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
（3）规则
在配置文件中可以设置一些规则。这些规则的等级有三种：
"off" 或者 0：关闭规则
"warn" 或者 1：打开规则，并且作为一个警告（不影响exit code）
"error" 或者 2：打开规则，并且作为一个错误（exit code将会是1）
也可以通过注释来取消 /* eslint-disable */
以下是简单的配置文件：
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"parser": "babel-eslint",
"extends": "airbnb",
"parserOptions": {
"ecmaFeatures": 6,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"camelcase": "off",
"arrow-parens": "off",
"no-console": "warn",
"no-unused-vars": "warn",
"no-return-assign": "off",
"no-param-reassign": ["error", { "props": false }],
"no-nested-ternary": "off",
"linebreak-style": 0,
"eslint-disable-next-line":0
}
}
3.webpack进行配置
我希望在项目开发的过程当中，每次修改代码，它都能够自动进行ESLint的检查。因为在我们改代
码的过程中去做一次检查，如果有错误，我们就能够很快地去定位到这个问题，由于是我们刚刚改
过的，因此立马把它修复掉就OK了。这就避免了我们每次改了一大堆代码之后，要去提交的时候，
再去跑一次ESLint，有可能有很多地方要去改，浪费我们的时间，因为你一下子就定位不到这个问
题在哪里了。同时我们每次改代码的时候去检测，也能改善我们写代码的规范性，让我们慢慢养成
规范写代码的习惯。在module下面的rules里面添加一个对象：需要加上 enforece: 'pre'，
这叫预处理。
{
enforce: 'pre', // 在webpack编译之前进行检测
test: /.(js|jsx)$/,
loader: 'eslint-loader',
exclude: [ // 除去node_modules
path.resolve(__dirname, '../node_modules')
]
},
三、使用
-
通过命令行来启动 ，--ext命令行选项指定一个逗号分隔的扩展名列表
eslint --ext .js --ext .jsx client/ -
webpack进行配置使用，在pagekage.json
"scripts": { "lint": "eslint --ext .js --ext .jsx client/" }, -
eslint 修复，可能在使用eslint产生很多报错，可以通过工具进行修复, npm run lint-fix，也可以使用 /* eslint-disable */注释来清除错误。
"scripts": {
"lint": "eslint --ext .js --ext .jsx client/",
"lint-fix": "eslint --fix --ext .js --ext src/"
},
四、Git提交
- 安装 husky ，
npm i husky -D - 修改package.json的scripts
"scripts": {
...
"lint": "eslint --ext .js --ext .jsx client/",
"precommit": "npm run lint"
}
五、editorconfig设置
不同编辑器对文本的格式会有一定的区别，如果不统一一些规范，可能你跟别人合作的时候，每次更新下来别人的代码就会一大堆报错。
- 新建.editconfig文件
- 文件内容
root = true // 表示当前是项目根目录
[*] // 所有文件都使用配置
charset = utf-8 // 编码格式
indent_style = space // Tab键缩进的样式，由space和table两种 一般代码中是space
indent_size = 2 // 缩进size为2
end_of_line = lf // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格
