Eslint 是什么

由于 JavaScript 是一种动态语言，在编码阶段很难捕捉到一些潜在的错误，例如变量的隐式声明、拼写错误等，对于大型 javascript 项目，如何保证代码质量和规范变得尤为重要。

ESLint 是 JavaScript 生态中最流行的代码检查工具，它通过静态词法分析发现代码中潜在的错误，并且支持配置规则来进行定制以符合团队或个人的编码标准。

规则 (rules)

规则(rules) 是 ESLint 的核心，Eslint 内置了数百条规则，还支持自定义规则 或使用其他人通过插件创建的规则。

比如说对于constructor-super这条规则，代表派生类（子类）的构造函数是否必须调用super()方法：

插件

ESLint 插件本质上就是符合 eslint 特定接口定义的对象，可以包含一组 ESLint 规则、配置、处理器和环境。插件通常包含自定义规则，

插件的一个常见用例是执行框架的最佳实践。例如，eslint-plugin-vue包含使用 Vue 框架的最佳实践。

解析器(Parsers)

解析器 用于 将代码转换为 ESLint 可以进行检查的的抽象语法树(AST)，默认情况下，ESLint 使用内置的Espree解析器，该解析器可以解析标准 JavaScript 运行时。

对于非标准的 JavaScript 语法，需要使用自定义解析器，例如，@typescript-eslint/parser是typescript-eslint项目中包含的自定义解析器，它允许 ESLint 解析 TypeScript 代码。

注：自定义解析器通常包含在可共享配置或插件中，因此通常不需要直接的进行设置。

处理器 processor

ESLint 处理器用于从其他类型的文件中提取 JavaScript 代码，然后让 ESLint lint 对该 JavaScript 代码进行 lint 处理。

例如，eslint-plugin-markdown包含一个自定义处理器，可让您在 Markdown 代码块内检查 JavaScript 代码。

eslint 快速开始

eslint v9 之后的版本，需要Node.js (^18.18.0, ^20.9.0, or >=21.1.0) 环境要求。

可以通过以下命令快速安装并配置 Eslint：

npm init @eslint/config@latest
# or
yarn create @eslint/config@latest
# or
pnpm create @eslint/config@latest

创建命令提供了交互式的命令窗口，可根据项目需要进行快速配置，比如是否需要 typescript、浏览器运行环境等。

创建完成后，项目下会出现一个 eslint.config.js 文件，该文件就是 eslint 的配置文件，eslint 和代码编辑器 eslint 插件都会根据该文件的内容对代码进行检查。

注意，在 eslint 9.0.0 之前版本，eslint 配置文件为.eslintrc.js 或 .eslintrc.json，具体可见迁移指南

export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

eslint 配置文件

注意，本部分仅介绍 eslint 新的配置文件系统 (flat config)，

eslint 配置文件应该位于项目根目录中，文件名可以为：

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

配置文件需导出一份配置对象数组：

// eslint.config.js
export default [
  {
    rules: {
      semi: "error",
      "prefer-const": "error"
    }
  }
];

注： eslint.config.js 使用的模块语法应与项目所使用的模块规范相同，比如说对于 commonjs，应使用 module.exports={}

配置对象组成

export default [
  // 配置对象1
  {
    // name属性对象的名称。这用于错误消息和配置检查器，以帮助识别正在使用的配置对象。
    name: '',
   // files选项指示eslint对哪些文件进行检查，默认为所有的js文件，匹配语法使用glbo匹配
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    // ignores 配置eslint跳过对哪些文件进行检查，
    ignores:["**/*.config.js"],
    //languageOptions配置语言选项
    languageOptions：{
      // 
      ecmaVersion:2022,//支持的 ECMAScript 版本
      sourceType："module",// 配置js使用的模块规范
      globals： '',//指定应添加到全局范围的附加对象的对象，比如说一些全局变量
      parser: babelParser,//配置自定义解析器，将 JavaScript 代码转换为抽象语法树
    },
    //插件
    plugins:{},
    //规则
    rules:{},
    // linterOptions配置代码检查过程相关设置的对象
    linterOptions:{
      noInlineConfig： true,// 一个布尔值，指示是否允许内联配置。
    }
  },
  // 配置对象2
  {
    
  }
]

插件

在 ESLint 中，插件是一种用于扩展并添加额外规则、转换器或者定制规则的工具，插件采用一种类似mixin的机制。插件通常以 npm 包的形式发布，用户可以引入插件来扩展 eslint 的功能。

比如对于 vue 项目，eslint-plugin-vue就是 vue 生态下的用于检查.vue 文件的插件：

• 查找语法错误
• 发现 Vue.js 指令的错误使用
• 是否符合 vue.js 的最佳实践

插件本质上只是符合 eslint 接口要求的 js 对象，所以引入插件也很简单：

// eslint.config.js
import example from "eslint-plugin-example";

export default [
  {
    plugins: {
      example
    },
    rules: {
      "example/rule1": "warn"
    }
  }
];

注：插件的 npm 包的命名通常采用"eslint-plugin-xx"

---

在plugins选项中声明了插件后，可以对插件的规则进行配置，具体规则是

// eslint.config.js
import pluginVue from 'eslint-plugin-vue'

export default [
  {
    files: ["**/*.js"],
    plugins: {
      vue: pluginVue
    },
    rules: {
      // 注意，这里规则的前缀vue就是plugins中的对应插件的key值 
      'vue/no-unused-vars': 'error'
    }
  }
];

1

规则

eslint 的规则有三个等级：

• off：关闭规则
• warn： 警告
• error： 错误

在配置文件rules选项下对具体的规则进行配置：

export default [
  {
    rules: {
      eqeqeq: "off",
      "no-unused-vars": "error",
      "prefer-const": ["error", { "ignoreReadBeforeAssign": true }]
    }
  }
];

使用注解来关闭规则

关闭文件中 eslint 检查

在文件的顶部使用以下注解：

/* eslint-disable */

也可以关闭某个文件中特定的规则：

/* eslint-disable no-alert */
alert('foo');

关闭文件中某一行代码的规则检查

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

合并配置

在许多情况下，我们不会从头开始编写 ESLint 配置文件，而是基于社区写好的预定义和可共享配置，并结合自己特定的需求来创建配置，

比如说下边这条配置，我们首先使用@eslint/js的预定义配置，并在 rules 对象中对"no-unused-vars这条规则进行了覆盖。

// eslint.config.js
import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "warn"
    }
  }
];
//注：上述 js.configs.recommended 实际上就是一个 rules 对象，上边的写法相当于：
// export default [
//     {
//       rules: {
//         // js.configs.recommended相关的规则
//       }
// 		 },
//     {
//         rules: {
//             "no-unused-vars": "warn"
//         }
//     }
// ];

eslint cli

使用 npx 运行 eslint cli：

<font style="color:rgb(32, 35, 39);">ESLint CLI</font>

npx eslint [options] [file|dir|glob]*

1. • <font style="color:rgb(32, 35, 39);">npx eslint file.js</font>
   • ``
2. • <font style="color:rgb(32, 35, 39);">npx eslint .</font>
   • ``
3. • <font style="color:rgb(32, 35, 39);">npx eslint --fix file.js</font>
   • ``
4. • <font style="color:rgb(32, 35, 39);">npx eslint file.js --format stylish</font>
   • ``
5. • <font style="color:rgb(32, 35, 39);">npx eslint --rule 'rule-name:severity' file.js</font>
   • ``

vue 项目 eslint 实践

通过 eslint cli 创建项目

创建的过程如第二节所示，这里不再赘述。

最后的配置文件 eslint.config.js：

export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended, // 
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

集成prettier

项目中通常使用prettier作为代码格式化工具，但prettier格式化产物会与 eslint规则冲突，所以我们需要引入eslint-config-prettier、eslint-plugin-prettier来解决。

eslint-config-prettier其实就是一些规则集的集合，关闭了常用的 eslint 规则中不必要的或者是与prettier存在冲突的规则，所以为了避免覆盖，需要放在配置对象数组的最下边。

以下 是 eslint-config-prettier源码中的规则

如果我们单独使用 prettier 和 eslint，使用eslint-config-prettier就够了。但如果我们还想要在 eslint 自动保存修复的同时根据 prettier 设置进行代码的格式化，我们还需要使用eslint-plugin-prettier。

首先安装：

npm i  -s  eslint-plugin-prettier eslint-config-prettier

配置：

import eslintPluginPrettier from  'eslint-plugin-prettier';
export default =  [
  // 其他配置
  eslintPluginPrettier.recommended,
];

---