时隔三月，这次手摸手带你学习ESLint

概念及入门

ESLint 是一个可扩展的 JavaScript 代码检查工具，旨在帮助开发者编写更规范、更符合最佳实践的代码。它最初由 Airbnb 开发，目前由社区维护。ESLint 可以检查代码中的错误、最佳实践、代码风格和逻辑错误等问题，从而提高代码质量、一致性和可读性。

ESLint 支持多种编程语言，包括 JavaScript、TypeScript、CSS 和 HTML 等。它可以通过配置文件来定制规则， 以适应不同的项目需求。

ESLint的主要目的是？

1. 强制执行最佳实践：ESLint提供了一系列规则，用于强制执行最佳实践，例如变量命名、函数命名、代码格式等。这有助于确保代码的可读性和一致性。
2. 防止潜在的错误：ESLint可以检测到代码中潜在的错误，例如未定义的变量、未使用的变量、语法错误等。这有助于在开发过程中发现和修复问题。
3. 帮助团队保持一致：ESLint可以帮助团队保持一致的代码风格和最佳实践，从而提高代码的可维护性。
4. 改善代码质量：ESLint可以帮助开发人员改善代码质量，从而提高代码的性能和可读性。

为什么要学习ESLint？

个人项目开发中，可能不会太看重ESLint，就想着自己开发随便怎么写都行，只要自己能看懂就好😀，但是对于企业来说，学习ESLint可以提高整个团队的代码质量，规范代码风格，降低手动检查的工作量，减少开发时间和错误率，进而提高开发效率，提高团队的协作效率，是一个团队执行规范的约束。此外，使用ESLint可以确保代码的一致性和质量，有助于企业打造高质量的产品； 不过对于个人来说，学习 ESLint 可以提高自己的代码质量，规范代码风格，提高开发效率，这会给自己带来潜移默化的影响，以致于在今后代码编写中得心应手；同时在面试和求职过程中，也可以展示自己对于代码质量和规范性的注重，是成为一个高手不可避免地过程🤔。

准备工作

1. 了解JavaScript基础知识：ESLint是基于JavaScript的代码检查工具，因此，如果您不熟悉JavaScript的基本语法和概念，那么学习ESLint可能需要花费更多的时间和精力。
2. 安装Node.js和npm：ESLint需要Node.js(^12.22.0、^14.17.0 或 >=16.0.0,并支持 SSL)和npm才能运行。确保您已经安装了Node.js和npm(你想使用yarn或者是pnpm等包管理工具都可以)，并且它们在系统路径中。（如果你使用的是官方 Node.js 发行版，则始终内置 SSL。）

集成和配置

安装ESLint以及创建配置文件

npm i -D eslint
npx eslint --init

这种是两件事情分开做，或者直接使用一个命令安装并创建配置

npm init @eslint/config

这里是使用npx eslint --init创建的配置文件，并且是将ESLint集成到vue+ts项目中：

Need to install the following packages:
@eslint/create-config@0.4.6
Ok to proceed? (y) y
# 你使用eslint干什么：检查语法、发现问题并强制执行代码样式
√ How would you like to use ESLint? · problems 
# 项目使用什么类型的模块
√ What type of modules does your project use? · esm
# 项目使用哪个框架，这里以vue为例
√ Which framework does your project use? · vue 
# 项目中使用ts吗
√ Does your project use TypeScript? · No / Yes 
# 跑在什么环境
√ Where does your code run? · browser 
# 你希望配置文件的格式是什么
√ What format do you want your config file to be in? · JavaScript 
# 你还需要安装下面几个包，这里因为上面选择了vue和ts，所以需要检测vue、ts语法的插件，以及ts语法解析器
The config that you've selected requires the following dependencies: 

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
# 现在安装他们吗
√ Would you like to install them now? · No / Yes 
# 使用什么包管理工具安装
√ Which package manager do you want to use? · pnpm 
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

devDependencies:
+ @typescript-eslint/eslint-plugin 6.10.0
+ @typescript-eslint/parser 6.10.0
+ eslint-plugin-vue 9.18.1

Done in 8.9s

配置文件的格式

ESLint 支持多种格式的配置文件：

• JavaScript - 使用 .eslintrc.js 并导出包含你的配置的对象。
• JavaScript (ESM) - 在 package.json 中指定 "type":"module" 的 JavaScript 包中运行 ESLint 时使用 .eslintrc.cjs。 请注意，ESLint 目前不支持 ESM 配置。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 来定义配置结构。
• JSON - 使用 .eslintrc.json 定义配置结构。 ESLint 的 JSON 文件也允许 JavaScript 样式的注释。
• package.json - 在你的 package.json 文件中创建一个 eslintConfig 属性并在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只使用一个。 优先顺序如下：

1. .eslintrc.js
2. .eslintrc.cjs
3. .eslintrc.yaml
4. .eslintrc.yml
5. .eslintrc.json
6. package.json

js格式的配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "vue"],
  rules: {},
};

配置文件解析

root

root 配置选项用于指定项目的根目录。当 ESLint 在项目中查找配置文件时，它会从根目录开始查找。

// 指定项目的根目录
root: true,

root 配置选项不会影响 ESLint 对代码的检查，它只影响 ESLint 查找配置文件的方式。因此，如果你在项目中使用了多个配置文件，即使没有设置 root 配置选项，ESLint 也会自动使用它们。

env

env 为配置语言选项，用于指定 ESLint 应该在哪个环境中运行，这些环境提供预定义的全局变量。这会影响到 ESLint 能够检查的规则和选项。以下列举一些环境选项：

• node：在 Node.js 环境中运行 ESLint。这使得 ESLint 能够检查 Node.js 特定的语法和行为，例如 module.exports 和 require。

• browser：在浏览器环境中运行 ESLint。这使得 ESLint 能够检查浏览器特定的语法和行为，例如 document 和 window。

• es2017：在 ES2017 环境中运行 ESLint。这使得 ESLint 能够检查 ES2017 语法和行为，例如 async/await 语法。

• es2020：在 ES2020 环境中运行 ESLint。这使得 ESLint 能够检查 ES2020 语法和行为，例如 globalThis。

• es2022：在 ES2022 环境中运行 ESLint。这使得 ESLint 能够检查 ES2022 语法和行为，例如 top-level-await语法。

官方文档还介绍了很多可用环境，es2015-es2024，以及amd、jquery、mongo等

extends

extends 用于指定 ESLint 应该继承哪些规则配置。这可以用于创建自定义规则集，或者扩展现有的规则集。

比如说：

• eslint:recommended：开ESLint启推荐规则，默认是关闭的，如函数不能重名、对象不能重复key

• plugin:@typescript-eslint/recommended：ts语法规则

• plugin:vue/vue3-recommended：vue语法规则

• plugin:react/recommended：react语法规则

vue语法规则还可以写plugin:vue/vue3-essential：

plugin:vue/vue3-essential和plugin:vue/vue3-recommended都是是ESLint插件，用于检查Vue 3项目中的错误和问题。这两个插件的区别在于它们包含的规则集不同。

这两个插件都包含了一组基本规则，用于检查Vue 3项目的代码质量。这些规则包括：

• 最佳实践：例如，使用<script setup>、<script>和<template>标签的顺序、使用defineExpose和ref等Vue 3 API等。
• 代码风格：例如，使用单引号还是双引号、缩进的空格数等。
• 安全性和性能：例如，防止XSS和CSRF攻击、优化性能等。

plugin:vue/vue3-recommended插件还包含了plugin:vue/vue3-essential插件中包含的所有规则。因此，plugin:vue/vue3-recommended插件包含了一组更详细的规则，用于检查Vue 3项目的代码质量。

parser和parserOptions

概念

parser和parserOptions是ESLint中的两个配置选项，它们都用于指定解析器，但它们的作用不同。

• parser选项用于指定解析器的基本名称，如babel、esprima、typescript等。它通常用于全局配置，适用于所有规则。例如，如果配置了parser选项，则所有规则都将使用指定的解析器进行解析。

• parserOptions选项则用于为特定解析器提供额外的配置选项。它主要用于针对特定解析器进行定制化配置，如注释、分隔符、关键字等。例如，如果需要为esprima解析器指定行结束符、开始标记、结束标记等选项，则需要在parserOptions中进行配置。

在配置parserOptions时，需要确保指定的解析器与parser选项中指定的解析器一致，否则ESLint将无法正确解析代码。

总的来说，parser选项主要用于全局配置，而parserOptions选项则用于为特定解析器提供定制化配置。

取值

1. parser选项：

默认情况下，ESLint 使用 Espree 作为其解析器。以下解析器与 ESLint 兼容：

• babel-eslint：使用Babel解析器进行解析，支持ES6+语法。取值可以是babel-eslint或@babel/eslint。
• esprima：使用ESprima解析器进行解析，支持ECMAScript 5.0+语法。取值可以是esprima或@typescript-eslint/esprima。
• typescript：使用TypeScript解析器进行解析，支持TypeScript语法。取值可以是typescript或@typescript-eslint/parser。

Vue3官方文档推荐Vue3项目中使用vue-eslint-parser解析器，需要用这个解析器来解析.vue文件，所以如果你覆盖了解析器选项，这个插件将无法工作。vue-eslint-parser 是 Vue.js 团队为 Vue 3 开发的一个 ESLint 解析器，它支持 Vue 3 的语法和特性。它基于 ESLint 的 vue/parser，并添加了 Vue 3 的特定规则和插件。（先安装该插件）

在配置这个选项时，你可以试试别的解析器，看看.vue文件中语法会有些什么报错🤔

2. parserOptions选项：

以esprima解析器为例，parserOptions可以包含以下选项：

• sourceType：指定源代码类型，如script（默认值）、module、commonjs、json等。
• ecmaVersion：指定ECMAScript版本，如5（默认值）、6、7、8等。
• syntax：指定语法，如ecmaScript（默认值）、ecmaScriptStrict、javascript、typescript等。
• jsx：指定JSX语法，如true（默认值）、false、xml等。
• plugins：指定解析器插件，如jsx、typescript、flow等。
• parser：指定自定义解析器，如@typescript-eslint/parser。

plugins

ESLint还可以安装一些第三方插件来使用，在paugins选项中引入，在引入之前你需要使用包管理器安装这些插件哦！插件名称可以省略 eslint-plugin- 前缀

我们在生成配置文件的时候安装了下面这两个插件，所以取值可以是：

plugins: ["@typescript-eslint", "vue"],

rules

rules选项用于配置要使用的规则集。规则集是一组规则，用于检查代码中的错误和问题。ESLint提供了丰富的规则集，可以通过配置文件来选择和启用特定的规则集。ESLint 自带大量的内置规则，你可以通过插件添加更多的规则。 你可以使用配置注释或配置文件修改你的项目使用的规则。

rules选项的格式如下：

{
 "rules": {
   "rule-name": "rule-options"
 }
}

其中，rule-name表示要使用的规则名称，rule-options表示该规则的配置选项。

要更改规则的严重性，请将规则 ID 设置为以下值之一：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 打开规则作为警告（不影响退出代码）
• "error" 或 2 - 打开规则作为错误（触发时退出代码为 1）

以下是一些内置规则：

//要求使用 `===` 和 `!==`
eqeqeq: "warn",
    
//禁用console语句限制代码中使用`console.log()`、`console.warn()`等方法
"no-console": "error",
    
//禁用debugger语句
"no-debugger": "error",
    
//检查未使用的变量和参数
"no-unused-vars": ["error", { argsIgnorePattern: "^_" }] //argsIgnorePattern：指定参数的忽略模式，例如^_表示忽略以_开头的参数。

//不允许在全局作用域内声明
"no-implicit-globals": "error",
    
//禁用`alert()`、`confirm()`和`prompt()`等弹出框。
"no-alert": "error",
    
//检查未使用的函数返回值。
"no-unused-returns": "error",
    
//检查未使用的`try`和`catch`语句。
"no-throw-catch": "error",

ESLint内置规则参考：规则参考 - ESLint 中文网 (nodejs.cn)

上面说的几个都是ESLint的内置规则，那我们将ESLint集成到Vue项目，React项目中时，还可以配置一些针对相应框架的语法的规则。

在配置之前你要先安装对应的插件哦，Vue是eslint-plugin-vue插件，用于检查Vue代码中的错误和问题；React中安装eslint-plugin-react和eslint-plugin-react-hooks，用于检查React和React-Hooks的语法，什么项目就安装什么插件，然后先配置一下extends和plugins选项。

"extends": ["plugin:react-hooks/recommended", "plugin:react/recommended", "plugin:vue/vue3-recommended"]
"plugins": ["react", "react-hooks", "vue"]

下面是针对Vue语法的一些规则：

// 要求组件名总是多字的
"vue/multi-word-component-names": "off", 

//禁止修改props
"vue/no-mutating-props": "error", 

//对模板中的自定义组件强制属性命名样式, my-prop="prop"而不是myProp="prop"
"vue/attribute-hyphenation": "warn" 

//禁止在与v-for相同的元素上使用v-if
"vue/no-use-v-if-with-v-for": "error"

更多关于vue的规则在这里查询：Available rules | eslint-plugin-vue (vuejs.org)

React规则参考：GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint

React-Hooks规则：文档打不开了😅

这里说几个Typescript的规则，不管是Vue3项目还是React项目都可能会用到Typescript

//禁止使用any
"@typescript-eslint/no-explicit-any": "off", 
    
//强制使用@ts-expect-error而不是@ts-ignore
"@typescript-eslint/prefer-ts-expect-error": "off",
    
//禁止对this进行混叠
"@typescript-eslint/no-this-alias": [
  "error",
  {
    allowedNames: ["_this"] // this可用的局部变量名称
  }
],
    
//禁止使用@ts-<directive>注释或在指令后要求描述
"@typescript-eslint/ban-ts-comment": "off", 
    
//使用!来禁止非空断言后缀运算符
"@typescript-eslint/no-non-null-assertion": "off", 
    
//禁止使用未使用的变量
"@typescript-eslint/no-unused-vars": "error", 
    
//禁止某些类型
"@typescript-eslint/ban-types": "off",

ts的规则参考：Overview | typescript-eslint

overrides

overrides 用于指定哪些规则（rules）应该在特定的文件或目录中被覆盖，可以让我们针对特定的代码类型或文件扩展名配置不同的规则。这可以用于创建自定义规则集，或者修改现有规则以适应特定项目的需求。

  overrides: {
    "**/test/**.js": {
      rules: {
        "no-console": "warn",
        "no-unused-vars": "error"
      }
    },
    "*.jsx": {
      parser: "babel-eslint",
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module"
      },
      plugins: ["react", "react-hooks"]
    },
    "*.tsx": {
      parser: "typescript-eslint",
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module",
        jsx: true
      },
      plugins: ["react", "react-hooks", "@typescript-eslint/jsx"]
    },
  },

在这个例子中，我们为test文件夹下的js文件设置了指定的一些规则；为.jsx文件和.tsx文件指定了不同的解析器、解析器选项和插件。.jsx文件使用babel-eslint解析器，tsx文件使用typescript-eslint解析器。同时，我们还为.jsx和.tsx文件指定了react和react-hooks插件（在vue中你可以设置对应的vue插件）

需要注意的是，overrides选项只适用于指定的文件扩展名或正则表达式，不适用于全局配置。此外，如果overrides选项与全局配置中的规则冲突，则将以overrides选项中的规则为准（覆盖全局）。

不能在 overrides 属性下写入 ignorePatterns 属性。

该选项可以是对象格式也可以是数组

  //数组
  overrides: [
    {
      files: ["**/*.md/*.js"],
      rules: {
        strict: "off"
      }
    }
  ],

globals

globals选项用于配置全局变量，是一个对象，其中键是全局变量的名称，值是布尔值（旧值），表示该变量是否被视为全局变量。

例如，在React组件中，可以使用React和this等全局变量，但是如果不使用globals选项，这些变量将被视为未定义的变量，使用的话会导致错误，要么在globals选项中配置全局变量，要么就在rules规则中配置no-undef这个规则。

需要注意的是，globals选项只能用于配置全局变量的类型，不能用于限制全局变量的使用。此外，globals选项不会影响no-unused-vars规则，因此如果全局变量未被使用，仍然会收到no-unused-vars规则的警告。

 globals: {
   module: readonly,
   window: readonly,
   document: readonly
 }

由于历史原因，布尔值 false 和字符串值 "readable" 等价于 "readonly"。类似地，布尔值 true 和字符串值 "writeable" 等价于 "writable"。但是，不建议使用旧值。

注意：启用no-global-assign规则来禁止对只读的全局变量进行修改。

这里相关的三个规则：

• no-undef
• no-unused-vars
• no-global-assign

settings

settings 选项主要用于配置一些共享设置。共享设置是指在不同的配置文件中都可以使用的全局选项。使得我们在不同的配置文件中使用相同的全局选项，从而保持代码风格的一致性。

settings: {
  // 指定要使用的环境配置
  env: {
    node: true
  },

  // 指定要使用的共享规则
  rules: {
    "no-console": "warn"
  }
},

这里提到的不同的配置文件指的是在同一个项目中可以具有多个 .eslintrc.js 配置文件。每个配置文件可以覆盖前一个配置文件中的设置，从而实现不同部分的代码风格设置。

在 ESLint 中，你可以为不同的目录或文件指定不同的配置文件。例如，你可以为 src 目录指定一个配置文件，为 tests 目录指定另一个配置文件。这样，src 目录的代码风格设置将与 tests 目录的代码风格设置不同。

同一个项目中拥有好几个eslintrc.js会用哪一个？

• 在同一个项目中拥有多个 .eslintrc.js 文件时，ESLint 会按照顺序使用它们中的配置。当 ESLint 找到一个配置文件时，它会使用该文件中的规则和插件配置来检查项目中的代码。

• 如果一个配置文件中没有指定解析器、插件或规则，那么 ESLint 会将它们 inherited from the parent configuration。在这种情况下，ESLint 会将父配置文件中的规则和插件配置传递给子配置文件，以便子配置文件可以继承父配置文件的设置。

下面是一个示例，说明如何在同一个项目中使用多个 .eslintrc.js 文件：

1. 在项目根目录下创建一个 .eslintrc.js 文件，用于配置全局规则和插件：

module.exports = {
 // 指定要使用的解析器
 parser: "babel-eslint",

 // 配置全局规则
 rules: {
   "react/jsx-uses-react": "error"
 }
};

1. 在 src 目录下创建一个 .eslintrc.js 文件，用于配置 src 目录的代码风格设置：

module.exports = {
 // 指定要使用的解析器
 parser: "babel-eslint",

 // 配置全局规则
 rules: {
   "react/jsx-uses-react": "warn"
 }
};

在这个例子中，我们为 src 目录指定了一个 .eslintrc.js 文件，该文件继承了项目根目录中的全局规则和插件配置，并自定义了 react/jsx-uses-react 规则的warn警告级别。

当 ESLint 检查项目中的代码时，它会按照顺序使用这些配置文件中的规则和插件配置。如果 ESLint 找不到一个配置文件，它会使用默认配置。

什么情况一个项目中会有多个配置文件？

一般而言，一个项目中可以有多个 .eslintrc.js 配置文件，具体取决于项目的复杂性和代码结构。

• 简单的项目：只有一个根目录，只有根目录下有一个 package.json 文件和一个 .eslintrc.js 配置文件，就足够了。
• 复杂项目：项目分为多个目录，每个目录都有一个 package.json 文件和一个 .eslintrc.js 配置文件，以配置不同风格的代码方式。使用多个配置文件可以提高代码风格的灵活性和可维护性。

可以根据项目的实际结构和需求来选择合适的配置文件数量。

ignorePatterns

ignorePatterns用于指定要忽略的文件路径模式。通过设置 ignorePatterns，告诉 ESLint 不要检查与指定模式匹配的文件。

// 指定要忽略的文件路径模式
ignorePatterns: ["node_modules/**"]

除了此配置还可以创建一个忽略文件来实现该功能

配置文件示例

module.exports = {
  root: true,
  //特定环境的全局变量
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    //规则默认是关闭的，这个配置是开启推荐规则（recommended）（函数不能重名、对象不能重复key）
    "eslint:recommended",
    //ts语法规则
    "plugin:@typescript-eslint/recommended",
    //vue语法规则
    //plugin:vue/vue3-recommended插件还包含了plugin:vue/vue3-essential插件中包含的所有规则。因此，plugin:vue/vue3-recommended插件包含了一组更详细的规则，用于检查Vue 3项目的代码质量。
    "plugin:vue/vue3-recommended"
  ],
  //为特定的文件或目录指定处理器,可以让我们针对特定的代码类型或文件扩展名配置不同的规则
  //   overrides: {
  //     "*.js": {
  //       rules: {
  //         "no-console": "warn",
  //         "no-unused-vars": "error"
  //       }
  //     },
  //     "*.jsx": {
  //       parser: "babel-eslint",
  //       parserOptions: {
  //         ecmaVersion: 2020,
  //         sourceType: "module"
  //       },
  //       plugins: ["react", "react-hooks"]
  //     },
  //     "*.tsx": {
  //       parser: "typescript-eslint",
  //       parserOptions: {
  //         ecmaVersion: 2020,
  //         sourceType: "module",
  //         jsx: true
  //       },
  //       plugins: ["react", "react-hooks", "@typescript-eslint/jsx"]
  //     },
  //     "**/test/**.js": {
  //       rules: {
  //         "no-unused-vars": "off"
  //       }
  //     }
  //   },
  overrides: [
    {
      files: ["**/*.md/*.js"],
      rules: {
        strict: "off"
      }
    }
  ],

  //用于指定解析器的基本名称，它通常用于全局配置，适用于所有规则。
  parser: "vue-eslint-parser",
  // 用于为特定解析器提供额外的配置选项,配置parserOptions时，需要确保指定的解析器与parser选项中指定的解析器一致，否则ESLint将无法正确解析代码
  parserOptions: {
    //指定ECMAScript版本,如5（默认值）、6、7、8等。
    ecmaVersion: "latest",
    //指定解析器：esprima默认解析器 babel-eslint babel解析器 @typescript-eslint/parser ts解析器
    parser: "@typescript-eslint/parser",
    //指定源代码类型 script 默认 ,module 代码在ECMAScript模块中 ,commonjs、json等
    sourceType: "module",
    // 指定语法，如ecmaScript（默认值）、ecmaScriptStrict、javascript、typescript等。
    syntax: "typescript"
  },

  //引入安装的ESLint的第三方插件。插件名称可以省略 eslint-plugin- 前缀(我们在生成配置文件的时候安装了这两个插件)
  plugins: ["@typescript-eslint", "vue"],
  //指定要使用的规则集
  rules: {
    // "off" 或 0 - 关闭规则
    // "warn" 或 1 - 打开规则作为警告（不影响退出代码）
    // "error" 或 2 - 打开规则作为错误（触发时退出代码为 1）

    //要求使用 `===` 和 `!==`
    eqeqeq: "warn",
    "no-unused-vars": "off",
    //禁用console语句
    "no-console": [
      "off"
      // {
      //   allow: ["warn", "error"]
      // }
    ],
    // 禁止使用未声明的变量，除非在 /*global */ 注释中提及
    "no-undef": "off",
    // 禁止使用 undefined 作为标识符
    "no-undefined": "error",
    //禁用debugger语句
    "no-debugger": "warn",
    //禁止不必要的转义字符
    "no-useless-escape": "error",
    //检查未使用的变量和参数
    // "no-unused-vars": ["error",{ argsIgnorePattern: "^_" }]//argsIgnorePattern：指定参数的忽略模式，例如^_表示忽略以_开头的参数。

    "@typescript-eslint/no-explicit-any": "off", //禁止使用any
    "@typescript-eslint/prefer-ts-expect-error": "off", //强制使用@ts-expect-error而不是@ts-ignore
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        allowedNames: ["_this"] // this可用的局部变量名称
      }
    ],
    "@typescript-eslint/ban-ts-comment": "off", //禁止使用@ts-<directive>注释或在指令后要求描述
    "@typescript-eslint/no-non-null-assertion": "off", //使用!来禁止非空断言后缀运算符
    "@typescript-eslint/no-unused-vars": "off", //禁止使用未使用的变量
    "@typescript-eslint/ban-types": "off",

    "vue/multi-word-component-names": "off", // 要求组件名总是多字的
    "vue/no-mutating-props": "error", //禁止修改props
    "vue/attribute-hyphenation": "off", //对模板中的自定义组件强制属性命名样式, my-prop="prop"而不是myProp="prop"
    "vue/no-use-v-if-with-v-for": "error", //禁止在与v-for相同的元素上使用v-if
    "vue/single-component-per-file": "off"
  },
  globals: {
    // module: "readonly"
  },
  settings: {
    // 指定要使用的环境配置
    // env: {
    //   node: true
    // },
    // 指定要使用的共享规则
    // rules: {
    //   "no-console": "warn"
    // }
  },
  ignorePatterns: []
}

忽略文件

你可以通过指定一个或多个通配符模式将 ESLint 配置为在 linting 时忽略某些文件和目录。 你可以通过以下方式忽略文件：

• 将 ignorePatterns 添加到配置文件。
• 创建一个包含忽略模式的专用文件（默认为 .eslintignore）。

.eslintignore 中定义的模式优先于配置文件的 ignorePatterns 属性。

.eslintignore 文件是一个纯文本文件，其中每一行都是一个通配符模式

忽略文件示例

/build/
/config/
/dist/
/node_modules/*
/dist*

命令行接口

ESLint 命令行接口 (CLI) 允许你从终端执行 linting，用于控制ESLint的行为、配置和输出。 CLI 有多种选项，你可以传递这些选项来配置 ESLint。

运行CLI，前提是安装了node.js。

如果你全局安装了ESLint，那么你可以直接在终端使用eslint命令

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

但是我们大部分会在项目中集成ESLint，所以我们可以使用局部安装的eslint，前面加上npx表示使用的是局部的依赖

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

你可以通过运行 npx eslint -h 查看所有 CLI 选项。

命令选项示例

以下是一些常用的ESLint命令选项：

1. -c 或 --config：指定ESLint配置文件。

例如，以下命令将使用名为.eslintrc.json的配置文件：

npx eslint -c .eslintrc.json example.js

2. -f 或 --format：指定输出报告的格式。

例如，以下命令将输出JSON格式的报告：

npx eslint --format json example.js

3. -i 或 --ignore：指定要忽略的文件和目录。

例如，以下命令将忽略名为node_modules的目录：

npx eslint --ignore node_modules example.js

4. -v 或 --version：显示ESLint版本。

例如，以下命令将显示ESLint的版本：

npx eslint --version

5. --max-warnings：限制警告数量。

例如，以下命令将限制警告数量为10：

插入复制

npx eslint --max-warnings 10 example.js

6. --ext：指定要检查的文件扩展名。

例如，以下命令将检查名为example.js的JavaScript文件：

npx eslint --ext .js example.js

7. --env：指定要使用的环境配置。

例如，以下命令将使用名为browser的环境配置：

npx eslint --env browser example.js

8. --parser：指定要使用的解析器。

例如，以下命令将使用Babel ESLint解析器：

npx eslint --parser babel-eslint example.js

9. --plugin：指定要使用的插件。

例如，以下命令将使用react插件：

npx eslint --plugin react example.js

10. --rules：指定要使用的规则集。

例如，以下命令将使用no-console规则：

npx eslint --rules no-console example.js

11. --fix：尝试修复尽可能多的问题。 对实际文件本身进行了修复，仅输出剩余的未修复问题。

该命令没有参数

npx eslint --fix file.js

这只是一些常用的ESLint命令选项。要了解更多选项，请查阅Command Line Interface Reference - ESLint - Pluggable JavaScript Linter

输出报告

ESLint可以通过命令行选项来指定输出报告的格式。

使用--format选项可以指定输出报告的格式。例如，要输出JSON格式的报告，输出到results文件，可以使用以下命令：

 --format json > results.json

输出人类可读的格式，保存到txt文件中

eslint --fix --format compact > results.txt

results.txt文件内容

D:\...\src\views\Login\index.vue: line 2, col 7, Error - 'aaa' is assigned a value but never used. (no-unused-vars)
D:\...\src\vite-env.d.ts: line 26, col 11, Error - 'ImportMeta' is defined but never used. (no-unused-vars)

2 problems

亦或是输出到一个html文件中，随便你选。

以下是所有的内置的格式化程序：

• checkstyle
• compact
• html
• jslint-xml
• json-with-metadata
• json
• junit
• stylish
• tap
• unix
• visualstudio

补充

为什么项目中使用了eslint，还需要安装编辑器插件比如vscode插件ESLint？

虽然 ESLint 可以检查代码质量，但它并不能提供 Visual Studio Code (VSCode) 插件所提供的所有功能。

• ESLint 是一个静态代码检查工具，它可以检查项目中提交的代码是否符合一定的规则，它可以帮助开发者找到代码中的问题。然而，ESLint 只是一个工具，它并不能直接在代码编辑器中提供代码补全、智能感知等功能。
• VSCode插件ESLint会自动识别项目中的.eslintrc.*文件，并使用其中的配置来检查代码。最明显的就是如果你的代码违反了规范，会直接有报错，并且鼠标移入会有详细的报错信息，告诉你违反了哪个规则；并且他还有代码补全、代码格式化等功能。如果你的项目中没有ESLint的配置文件，那么插件会使用默认的配置。你可以在插件的设置（扩展设置或者settings.json文件）中指定自定义的配置文件，并且可以设置其他的默认检测配置，例如：

"eslint.configFile": "./.eslintrc.js" //指定自定义的配置文件
"eslint.codeActionsOnSave.mode": "problems" //插件会在保存文件时优先提供自动修复建议。如果自动修复无法解决所有问题，那么插件会提供代码补全建议，让我们手动修改代码。

以上所相关依赖包

"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-vue": "^4.2.3",
"eslint": "^8.52.0",
"eslint-plugin-vue": "^9.18.1",
"typescript": "^5.0.2",
"vue-eslint-parser": "^9.3.2",

ending