webpack 引入 eslint
1、在 webpack 中配置 eslint
安装 eslint 和 eslint-loader
npm install -D eslint eslint-loader
在 webpack.config.js 中添加如下代码：
{
test: /\.js$/,
loader: ‘eslint-loader’,
enforce: “pre”,
include: [path.resolve(__dirname, ‘src’)], // 指定检查的目录
options: {// 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require(‘eslint-friendly-formatter’) // 指定错误报告的格式规范
}
}
注：formatter 默认是 stylish，如果想用第三方的可以安装该插件，如上方的示例中的 eslint-friendly-formatter。
在根目录创建 .eslintrc.js 文件, 简版代码如下
module.exports = {
root: true,
parserOptions: {
sourceType: ‘module’
},
env: {
browser: true,
},
rules: {
“indent”: [“error”, 2],
“quotes”: [“error”, “double”],
“semi”: [“error”, “always”],
“no-console”: “error”,
“arrow-parens”: 0
}
}
这样，一个简单的 webpack 引入 eslint 已经完成了。
这里讲一下 eslintrc.js 的配置使用，详细细节请参考 http://eslint.cn/docs/user-guide
2、eslintrc.js 的配置
配置项如下：
– rules 启用额外的规则或覆盖默认的规则
– extends 指定 eslint 规范
– plugins 引用第三方的插件
– parser 指定 eslint 的解析器
– root 限定配置文件的使用范围
– env 指定代码运行的宿主环境
– globals 声明在代码中的自定义全局变量
– parserOptions 设置解析器选项
rules rules 就是我们设置代码规则的配置项，如下方代码，
{
“rules”: {
“semi”: [“error”, “always”],
“quotes”: [“error”, “double”]
}
}
“semi” 和 “quotes” 是 ESLint 中 规则 的名称。第一个值是错误级别，可以使下面的值之一：
“off” or 0 – 关闭规则
“warn” or 1 – 将规则视为一个警告（不会影响退出码）
“error” or 2 – 将规则视为一个错误 (退出码为 1)
extends 我们也可以不用自定义 reules，使用官方推荐的，这里我们就要使用 extends 配置项。也可以使用一些大公司提供的的，如：aribnb, google, standard。
{
“extends”: “standard”,
“plugins”: [
“html”
]
}
plugins 如上方引用 html 插件，其他如：import react
parser 指定解析器 babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了 es6，为了兼容性考虑基本都使用 babel 插件对代码进行编译。而用 babel 编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。
npm install -D babel-eslint
parser: ‘babel-eslint’, // .eslintrc.js
root 如果我们想要在不同的目录中使用不同的 .eslintrc, 我们就需要在该目录中添加如下的配置项
{
“root”: true
}
如果我们不设置的话，它将会继续查找，知道更目录，如果更目录有配置文件它将会使用根目录的，这样会导致当前配置目录配置无法起作用的问题。
env 指定了环境，就可以放心的使用它们的全局变量和属性。
“env”: {
“browser”: true, //
“node”: true //
}
global 指定全局变量。
“globals”: {
“var1”: true,
“var2”: false
}
3、scripts 配置
package.json 中添加：
“scripts”: {
“lint”: “eslint –ext .jsx,.js src/ –cache”
}
检查是自动修复可如下：
“scripts”: {
“lint”: “eslint –ext .jsx,.js src/ –fix ./src –cache”
}
这样，终端运行如下命令，即可
npm run lint
4、常见错误
Unexpected token
Unexpected token <; 解决：添加 parser: ‘babel-eslint’
Unexpected token import; 解决：添加 plugins: [import]
Unexpected token =; 解决：添加 plugins: [react]
其中插件名称为：babel-eslint、eslint-plugin-import、eslint-plugin-react。
附：
module.exports = {
root: true,
parserOptions: {
sourceType: ‘module’
},
env: {
browser: true,
},
“plugins”: [
“react”,
“import”
],
“parser”: “babel-eslint”,
rules: {
“no-debugger”: process.env.NODE_ENV === ‘production’ ? 2 : 1,
“indent”: [“error”, 2],
// “quotes”: [“error”, “double”],
// “semi”: [“error”, “always”],
// “no-console”: “error”,
“arrow-parens”: 0
}
}