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,     parroptions: {        sourcetype: 'module'    },    env: {        browr: true,    },    rules: {        "indent": ["error", 2],        "quotes": ["error", "double"],        "mi": ["error", "always"],        "no-console": "error",        "arrow-parens": 0    }}

这样，一个简单的webpack引入eslint已经完成了。

这里讲一下 eslintrc.js 的配置使用，详细细节请参考https://eslint.cn/docs/ur-guide

2、eslintrc.js 的配置

配置项如下：

     - rules         启用额外的规则或覆盖默认的规则     - extends       指定eslint规范     - plugins       引用第三方的插件     - parr        指定eslint的解析器     - root          限定配置文件的使用范围     - env           指定代码运行的宿主环境     - globals       声明在代码中的自定义全局变量     - parroptions 设置解析器选项

rules
rules 就是我们设置代码规则的配置项，如下方代码，

{    "rules": {        "mi": ["error", "always"],        "quotes": ["error", "double"]    }}

“mi” 和 “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

parr
指定解析器
babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基off的短语本都使用babel插件对代码进行中传南广编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

npm install -d babel-eslint

parr: 'babel-eslint',     // .eslintrc.js

root
如果我们想要在不同的目录中使用不同的 .eslintrc, 我们就需要在该目录中添加如下的配置项

{    "root": true}

如果我们不设置的话，它将会继续查找，知道更目录，如果更目录有配置文件它将会使用根目录的，这样会导致当前配置目录配置无法起作用的问题。

env
指定了环境，就可以放心的使用它们的全局变量和属性。

"env": {    "browr": true, //    "node": true //}

global
指定全局变量。

"globa鹌鹑的营养价值ls": {    "var1": true,    "var2": fal }

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 <;        解决：添加 parr: 'babel-eslint'unexpected token import;   解决：添加 plugins: [import]unexpected token =;        解决：添加 plugins: [react]

其中插件名称为：babel-eslint、 eslint-plugin-import、 eslint-plugin-react。

附：

module.exports = {    root: true,        parroptions: {        sourcetype: 'module'    },    env: {        browr: true,    },    "plugins网络谣言": [        "react",        "import"    ],    "parr": "babel-eslint",    rules: {        "no-debugger": process.env.node_env === 'production' ? 2 : 1,        "indent": ["error", 2],        // "quotes": ["error", "double"],        // "mi": ["error", "always"],        // "no-console": "error",        "arrow-parens": 0    }}