webpack 引入 eslint
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 } }