1.初识`Eslint`

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。
使用ESLint的好处在于：多人协作时代码风格统一
EsLint其实就是一个在webpack中配置的一个插件

配置文件

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

配置文件的多种写法

.eslintrc.*：新建文件，位于项目根目录
.eslintrc
.eslintrc.js(常用)
.eslintrc.json(常用)
区别在于配置格式不一样
package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

具体配置

我们以 .eslintrc.js 配置文件为例：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则(如果是vue或者react等框架规范则需要下载)
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

rules 具体规则
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

extends 继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
现有以下较为有名的规则：
- Eslint 官方的规则：eslint:recommended
- Vue Cli 官方的规则：plugin:vue/essential
- React Cli 官方的规则：react-app

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app里面对应的规则
    // 所以想要修改规则直接在这里改就是了
    eqeqeq: ["warn", "smart"],
  },
};

`Eslint`在 `Webpack` 中的使用

首先下载包

npm i eslint-webpack-plugin eslint -D

定义 Eslint 配置文件(在根目录下新建一个.eslintrc.js文件)

module.exports = {
    // 继承 Eslint的默认规则
    extends: ["eslint:recommended"],
    env: {
      node: true, // 启用node中全局变量
      browser: true, // 启用浏览器中全局变量(这样就可以使用console.log等输出)
    },
    parserOptions: {
      ecmaVersion: 6, //es6语法
      sourceType: "module", //es模块化
    },
    rules: {
      "no-var": 2, // 不能使用 var 定义变量(0:关闭规则,1:开启规则(警告),2:开启(错误))
    },
  };

配置webpack.config.js

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

// 引入eslint*****************************************************
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
//***************************************************************

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
		//输出设置省略
    },
    // 加载器
    module:{
        rules:[
            // loder的配置省略
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置*********************************************
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "src"),
          }),
       //******************************************************** 
    ],
    // 模式
    mode:"development"//开发模式
};

随后我们在main.js中做一些修改

// 引入js文件
import count from './js/count'
import sum from './js/sum'
// 引入css资源
import './css/index.css'
// 引入less资源
import './less/index.less'
// 引入字体样式(切记是字体样式并非字体)
import './css/iconfont.css'

var a = 1;//故意设置一个var变量

console.log(count(3 , 1));
console.log(sum(1,2,3,4,5,6));

结果展示:

`VScode`中`ESLint`插件以及`.eslintignore`的配置

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决
但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。
这时我们就可以使用 Eslint 忽略文件(.eslintignore)解决。在项目根目录新建下面文件:
- .eslintignore