10. ESLint1. ESLint 作用 2. ESLint 使用 3. 关闭 eslint 检测 4. ESLin

ESLint 作用

ESLint 是一个静态代码分析工具（Static program analysis，在没有任何程序执行的情况下，对代码进行分析）项目中使用 ESLint 建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护性。

1. 配置文件

配置文件由很多种写法：

.eslintrc.*：新建文件，位于项目根目录
- .eslintrc
- .eslintrc.js
- .eslintrc.json
- 区别在于配置格式不一样
package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写 ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置

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

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  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 官方的规则open in new window：eslint:recommended
Vue Cli 官方的规则open in new window：plugin:vue/essential
React Cli 官方的规则open in new window：react-app

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

3. ESLint 在 webpack 中使用

下载包

npm i eslint-webpack-plugin eslint -D

定义 Eslint 配置文件

.eslintrc.js

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  }
};

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

VSCode的ESLint插件

VSCode 中的 ESLint 检测工具，可以在编辑器中直接看到问题。这个插件会读取目录下 ESLintrc.js 文件但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

.eslintignore

# 忽略dist目录下所有文件
dist

关闭 eslint 检测

源代码：

const a: number = 1

报错：
QQ截图20231104140426.png
如果关闭这个检测，配置如下：

    "rules": {
        '@typescript-eslint/no-unused-vars': 0
    }

Prettier 插件

ESLint 会帮助我们提示错误（或者警告），但是不会帮助我们自动修复,在开发中我们希望文件在保存时，可以自动修复这些问题,可以选择使用另外一个工具：prettier QQ截图20231104143056.png 代码格式化插件， QQ截图20231104144008.png 配置 .prettierrc 文件

{
    "printWidth": 30
}

直接右键格式化可以生效。