Webpack | webpack配置eslint

eslint 自动检验代码是否规范的一种方式，如果有一点不符合代码规范的地方，就会在打包时报错。

如果你不喜欢eslint这种粗暴的方式，可以使用prettier这个插件

perttier插件介绍

webpack使用eslint 需要安装 eslint eslint-loader

npm i eslint eslint-loader -D

airbnb(一个流行的eslint验证代码的风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import

npm i eslint-config-airbnb-base eslint-plugin-import -D

使用
在webpack.config.js中配置loader

 {


 /*
 npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

      语法检查:eslint-loader eslint
      注意：只检查自己写的源代码，第三方库不检查
      设置检查规则：
          package.json中eslintConfig中设置
              "eslintConfig": {
                  "extends": "airbnb-base"
              }

          airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import

          将这个注释// eslint-disable-next-line放在console上一行（这句话是 下一行不进行eslint检查）
  */
    test: /\.js$/,
    exclude: /node_modules/, // 忽略node_modules
    enforce: 'pre', // 优先执行
    loader: 'eslint-loader',
    options: {
      // 自动修复
      fix: true,
    },
  },

在package.json中配置
(复制代码过去的时候记得去掉注释)

"eslintConfig": {
    "extends": "airbnb-base", // 继承airbnb的风格规范
    "env": {
    "browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
            }
          }

就是这么简单,到这里为止，整个生产环境需要注意的基本配置都已经完成了

eslint常用关闭校验语句

1. 关闭段落校验

/* eslint-disable */some code
some code
/* eslint-enable */

2. 关闭当前行校验

some code // eslint-disable-line

3. 关闭下一行校验

// eslint-disable-next-line
some code