eslint 是一个开源的工具cli,ESlint采用静态分析找到并修复JavaScript代码问题

Eslint使用espree 进行JavaScript代码解析
eslint使用ast来评估代码中的模式
eslint每一条规则都可以是一个插件

npm 复制代码

pnpm init 
pnpm i eslint -D // 安装eslint
pnpm create @eslint/config //初始化eslint配置文件

- eslint配置文件格式

JavaScript 格式（.eslintrc.js 或 .eslintrc.cjs）

js 复制代码

module.exports = { 
// 配置项 
};

YAML 格式（.eslintrc.yaml, .eslintrc.yml 或 .eslintrc）

yaml 复制代码

--- # YAML 格式的 ESLint 配置文件
rules: # 配置规则

JSON 格式（.eslintrc.json 或 .eslintrc)

json 复制代码

{ "rules": 
{ // 配置规则 }
}

配置放在 package.json 文件中的 "eslintConfig" 字段中

json 复制代码

{
"name": "my-project", 
"eslintConfig": { 
// 配置项 
    } 
}

- 如何忽略 ESLint 对特定文件的检测

在项目根目录下创建一个名为 .eslintignore 的文件（如果还不存在）。
在 .eslintignore 文件中，每行添加一个需要忽略的文件、目录或模式。例如，要忽略 dist 目录和所有以 .test.js 结尾的文件，.eslintignore 文件可以如下所示：

js 复制代码

// 告诉 ESLint 忽略 `dist` 目录和所有以 `.test.js` 结尾的文件。
dist/
*.test.js

package.json 文件中配置忽略选项.可以在 "eslintConfig" 字段下添加 "eslintIgnore" 字段，将需要忽略的文件、目录或模式作为数组值指定。

js 复制代码

{
  "eslintConfig": {
    "eslintIgnore": [
      "dist/",
      "*.test.js"
    ]
  }
}

- root

使用 root 配置项来告诉 ESLint 它应该在哪个目录下执行检查和查找配置文件
ESLint 会从当前工作目录开始向上级目录递归查找配置文件，直到找到 .eslintrc.* 或 package.json 中的 "eslintConfig" 字段。
root 设置为 true，表示当前目录是 ESLint 的根目录，不再向上级目录查找配置文件。
通过设置 root，你可以确保 ESLint 仅在指定的目录中进行检查，而不影响其他目录中的代码。这在多项目或 monorepo 结构中特别有用，可以为每个子项目或子目录分别配置独立的 ESLint 规则和配置

bash 复制代码

project/
├── package.json
├── .eslintrc.js
├── src/
│   ├── .eslintrc.js
│   └── index.js
└── test/
    ├── .eslintrc.js
    └── test.js

js 复制代码

// project/.eslintrc.js
module.exports ={ 
root: true, 
// ... 
}

这告诉了ESLint应该使用此文件作为起始位置来查找其他配置文件。这将确保ESLint始终使用project/.eslintrc.js作为项目中所有文件的配置文件，而不是使用子目录中的其他配置文件。如果在上述的例子中没有指定"root"字段，ESLint会使用最近的配置文件来检测代码，如果当前目录下没有配置文件，ESLint会继续向上查找父目录，直到找到一个配置文件为止。

- env

env 是 ESLint 配置文件中的一个配置项，用于指定代码运行的环境。
浏览器环境和 Node.js 环境具有不同的全局变量和 APIs，因此需要使用不同的规则来检查代码

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  }
  // 其他代码
}

- extends

用于扩展或继承其他已经存在的 ESLint 配置
extends 支持以下几种形式的配置值：

字符串：指定一个预定义的配置名称，例如 "eslint:recommended"、"airbnb" 等。
字符串数组：指定多个预定义的配置名称，例如 ["eslint:recommended", "plugin:react/recommended"]。
文件路径：指向一个自定义的 ESLint 配置文件（可以是 JavaScript 或 JSON 格式），例如 "./eslint-config.js"。
一个包含 name 和 config 属性的对象，其中 name 表示配置名称，config 表示该配置的具体配置项。

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  },
  // 字符串 eslint本身自带的检验规则
  // "extends": "eslint:recommended"
  // 字符串数组方式 
  /**
   * 这里是关于 vue3+ ts+ imports + prettier 需要集成的规则
   * 安装
   * pnpm i eslint eslint-plugin-vue typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import prettier eslint-plugin-prettier eslint-config-prettier
   */
  // extends: [
  //   // eslint 基本规则 eslint
  //   'eslint:recommended',
  //   // import 导入导出的规则 eslint-plugin-import
  //   'plugin:import/recommended',
  //   // Vue 3 推荐的规则 eslint-plugin-vue
  //   'plugin:vue/vue3-recommended',
  //   // TypeScript 推荐的规则 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  //   'plugin:@typescript-eslint/recommended',
  //   // vscode prettier 配置文件里面 eslint 规则 prettier eslint-plugin-prettier eslint-config-prettier
  //   'prettier',
  // ]
  // 文件路径 指定一个自己的规则
  extends: [
    './eslint/myeslint.js'
  ]
  // 其他代码
}

extends 的优先级是从低到高的，后面的规则会覆盖前面的规则，最终以最后一个规则集为准；而当一个规则在多个规则集中定义时，后边的会覆盖前面的

- parser

指定用于解析JavaScript代码的解析器。ESLint默认使用 esprima 解析器，但是可以通过"parser"配置来使用其他解析器。
常见的解析器

esprima：默认的解析器，用于解析ECMAScript 5到ECMAScript 2021之间的JavaScript代码。
@babel/eslint-parser：由Babel项目提供的解析器，用于解析ES6+代码。
@typescript-eslint/parser：由TypeScript团队提供的解析器，用于解析TypeScript代码。
eslint-plugin-html：用于解析HTML文件中的JavaScript代码。
vue-eslint-parser：用于解析Vue单文件组件中的JavaScript代码。

注意个人建议不要同意配置parser 而是针对特定文件配置特定的解析器

- overrides

为不同的文件或文件夹应用不同的规则或插件
overrides 属性，是一个数组，每个元素代表一个特定的配置覆盖
每个 overrides 元素中，你可以设置 files、excludedFiles、plugins、rules parser、parserOptions 等属性来定义特定文件或文件夹的规则

files:指定匹配的文件
excludeFiles:排除文件
plugins：指定要用的插件
rules：eslint 规则
parser: 当前指定文件要用到的解析器
parserOptions: 当前指定文件用到的解析器配置选项

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  },
  // 字符串 eslint本身自带的检验规则
  // "extends": "eslint:recommended"
  // 字符串数组方式 
  /**
   * 这里是关于 vue3+ ts+ imports + prettier 需要集成的规则
   * 安装
   * pnpm i eslint eslint-plugin-vue typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import prettier eslint-plugin-prettier eslint-config-prettier
   */
  // extends: [
  //   // eslint 基本规则 eslint
  //   'eslint:recommended',
  //   // import 导入导出的规则 eslint-plugin-import
  //   'plugin:import/recommended',
  //   // Vue 3 推荐的规则 eslint-plugin-vue
  //   'plugin:vue/vue3-recommended',
  //   // TypeScript 推荐的规则 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  //   'plugin:@typescript-eslint/recommended',
  //   // vscode prettier 配置文件里面 eslint 规则 prettier eslint-plugin-prettier eslint-config-prettier
  //   'prettier',
  // ]
  // 文件路径 指定一个自己的规则
  extends: [
    './eslint/myeslint.js'
  ],
  overrides: [
    // 解析js 文件 额外的规则
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
    // 解析 vue 文件用到的额外规则
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        ecmaFeatures: {
          jsx: true,
        },
      },
      rules: {
        'no-undef': 'off',
      },
    },
    // 解析ts 文件 和vue 文件用到的额外规则
    {
      files: ['*.ts', '*.vue'],
      rules: {
        'no-undef': 'off',
      },
    },
  ]

  // 其他代码
}

- parserOptions

用于指定解析器的选项

ecmaVersion：指定 ECMAScript 的版本。例如，ecmaVersion: 2022 表示使用 ECMAScript 2022 的语法。
sourceType：指定代码的模块类型。可以是 "script"（默认）或 "module"。
ecmaFeatures：一个对象，用于启用特定的 ECMAScript 功能。例如，{"jsx": true} 可以启用 JSX 语法支持。

js 复制代码

 // parser 配置选项
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,  //支持 jsx
    },
  },

- plugins

ESLint 插件是用来扩展 ESLint 的功能，提供额外的规则和语法支持
Eslint 常见的插件

eslint-plugin-import：用于检查模块导入的规范性，包括路径、文件类型和文件内容等方面的检查。
eslint-plugin-react：用于检查 React 代码的规范性，包括 JSX 语法、组件使用和生命周期等方面的检查。
eslint-plugin-vue：用于检查 Vue.js 代码的规范性，包括模板、组件和指令等方面的检查。
eslint-plugin-jest：用于检查 Jest 测试代码的规范性，包括测试名称、匹配器和断言等方面的检查。
eslint-plugin-node：用于检查 Node.js 代码的规范性，包括 API 使用、文件系统和子进程等方面的检查。
eslint-plugin-prettier：用于将 Prettier 代码格式化集成到 ESLint 中，可以通过配置来自动修复代码格式问题。
eslint-plugin-security：用于检查代码中的安全问题，包括跨站点脚本攻击、命令注入和 SQL 注入等方面的检查。

eslint 插件可以配合 rules 修改 extends 集成的 eslint 规则
例如

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  },
  // 字符串 eslint本身自带的检验规则
  // "extends": "eslint:recommended"
  // 字符串数组方式 
  /**
   * 这里是关于 vue3+ ts+ imports + prettier 需要集成的规则
   * 安装
   * pnpm i eslint eslint-plugin-vue typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import prettier eslint-plugin-prettier eslint-config-prettier
   */
  // extends: [
  //   // eslint 基本规则 eslint
  //   'eslint:recommended',
  //   // import 导入导出的规则 eslint-plugin-import
  //   'plugin:import/recommended',
  //   // Vue 3 推荐的规则 eslint-plugin-vue
  //   'plugin:vue/vue3-recommended',
  //   // TypeScript 推荐的规则 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  //   'plugin:@typescript-eslint/recommended',
  //   // vscode prettier 配置文件里面 eslint 规则 prettier eslint-plugin-prettier eslint-config-prettier
  //   'prettier',
  // ]
  // 文件路径 指定一个自己的规则
  extends: [
    './eslint/myeslint.js',
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
  ],
  overrides: [
    // 解析js 文件 额外的规则
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
    // 解析 vue 文件用到的额外规则
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        ecmaFeatures: {
          jsx: true,
        },
      },
      rules: {
        'no-undef': 'off',
      },
    },
    // 解析ts 文件 和vue 文件用到的额外规则
    {
      files: ['*.ts', '*.vue'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
  // parser 配置选项
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,  //支持 jsx
    },
  },
  // 
  plugins: [
    "vue"
  ],
  "rules": {
    "vue/no-unused-vars": "error",
    "vue/script-indent": ["error", 2, { "baseIndent": 1 }],
    "vue/html-indent": ["error", 2],
    "vue/max-attributes-per-line": "off"
  }
  // 其他代码
}

- globals

指定全局变量的一个配置项。在 JavaScript 中，如果一个变量没有经过声明就被使用，会导致该变量被当作全局变量处理，这可能会导致一些潜在的问题。通过配置 globals，我们可以告诉 ESLint 这些变量是全局变量，从而避免出现这种问题
globals 是一个键值对值有 readonly、writable、off,分别是只读、可写、关闭
globals可以写在eslintrc的配置文件，也可以新建一个.js 通过extends引入

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  },
  // 字符串 eslint本身自带的检验规则
  // "extends": "eslint:recommended"
  // 字符串数组方式 
  /**
   * 这里是关于 vue3+ ts+ imports + prettier 需要集成的规则
   * 安装
   * pnpm i eslint eslint-plugin-vue typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import prettier eslint-plugin-prettier eslint-config-prettier
   */
  // extends: [
  //   // eslint 基本规则 eslint
  //   'eslint:recommended',
  //   // import 导入导出的规则 eslint-plugin-import
  //   'plugin:import/recommended',
  //   // Vue 3 推荐的规则 eslint-plugin-vue
  //   'plugin:vue/vue3-recommended',
  //   // TypeScript 推荐的规则 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  //   'plugin:@typescript-eslint/recommended',
  //   // vscode prettier 配置文件里面 eslint 规则 prettier eslint-plugin-prettier eslint-config-prettier
  //   'prettier',
  // ]
  // 文件路径 指定一个自己的规则
  extends: [
    './eslint/myeslint.js',
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    "./globals.js"
  ],
  overrides: [
    // 解析js 文件 额外的规则
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
    // 解析 vue 文件用到的额外规则
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        ecmaFeatures: {
          jsx: true,
        },
      },
      rules: {
        'no-undef': 'off',
      },
    },
    // 解析ts 文件 和vue 文件用到的额外规则
    {
      files: ['*.ts', '*.vue'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
  // parser 配置选项
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,  //支持 jsx
    },
  },
  // 
  plugins: [
    "vue"
  ],
  "rules": {
    "vue/no-unused-vars": "error",
    "vue/script-indent": ["error", 2, { "baseIndent": 1 }],
    "vue/html-indent": ["error", 2],
    "vue/max-attributes-per-line": "off"
  },
  // 正常写在配置文件
  // globals: {
  //   // 微信小程序 设置值为writable让wx可被重写
  //   wx: 'writable',
  //   jQuery: false,
  //   $: 'readonly',
  // }
  // 其他代码
}

- settings

一个可选的顶层属性，它可以用来配置一些额外的、自定义的信息，供插件和规则使用。它的值是一个对象，可以包含多个属性。下面是一些常用的 settings 属性及其作用：

react：该属性用于配置 React 相关的环境和选项。具体来说，它可以包含以下属性：
- version：React 的版本号，如果不设置该属性，则插件会尝试自动检测 React 的版本。
- pragma：JSX 的注释语法，如果你使用了类似于 /** @jsx h */ 的注释来指定 JSX 的转换函数，则需要设置该属性。
- fragment：使用 Fragment 组件的名称，如果你使用了 Fragment 组件，则需要设置该属性。
- linkComponents：配置自定义组件链接的规则，用于解决组件在某些情况下无法链接的问题。
import/resolver：该属性用于配置导入模块时的解析器，通常用于解决路径问题。具体来说，它可以包含以下属性：
- node：该属性用于解析 Node.js 模块。
- webpack：该属性用于解析 Webpack 模块。
- typescript：该属性用于解析 TypeScript 模块。
- alias：配置模块路径的别名，用于解决路径问题。
- extensions：配置模块的扩展名，用于解决模块文件类型的问题。
polyfills：该属性用于配置一些需要在代码中手动引入的 Polyfill，通常用于解决兼容性问题。
react-native/style-sheet-object-names：该属性用于配置 React Native 中使用的 StyleSheet 对象名称。
jest：该属性用于配置 Jest 测试框架相关的信息。
svelte3：该属性用于配置 Svelte 3 相关的信息。

js 复制代码

module.exports = {
  root: true,
  // 其他模块代码
  env: {
    // "browser": true：表示你的代码将在浏览器环境中运行，因此 ESLint 将提供浏览器中常见的全局变量（如 window、document 和 navigator）和预定义的类型。
    // "node": true：表示你的代码将在 Node.js 环境中运行，因此 ESLint 将提供 Node.js 中常见的全局变量（如 require 和 module）和预定义的类型。
    // "es6": true：表示你的代码将使用 ES6（ES2015）的语法，并且需要支持新的 ES6 全局变量和类型（如 Promise、Set 和 Map）
    "browser": true,
    "es2021": true,
    node: true
  },
  // 字符串 eslint本身自带的检验规则
  // "extends": "eslint:recommended"
  // 字符串数组方式 
  /**
   * 这里是关于 vue3+ ts+ imports + prettier 需要集成的规则
   * 安装
   * pnpm i eslint eslint-plugin-vue typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import prettier eslint-plugin-prettier eslint-config-prettier
   */
  // extends: [
  //   // eslint 基本规则 eslint
  //   'eslint:recommended',
  //   // import 导入导出的规则 eslint-plugin-import
  //   'plugin:import/recommended',
  //   // Vue 3 推荐的规则 eslint-plugin-vue
  //   'plugin:vue/vue3-recommended',
  //   // TypeScript 推荐的规则 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  //   'plugin:@typescript-eslint/recommended',
  //   // vscode prettier 配置文件里面 eslint 规则 prettier eslint-plugin-prettier eslint-config-prettier
  //   'prettier',
  // ]
  // 文件路径 指定一个自己的规则
  extends: [
    './eslint/myeslint.js',
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    "./globals.js"  // 引入的 globals 配置文件
  ],
  overrides: [
    // 解析js 文件 额外的规则
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
    // 解析 vue 文件用到的额外规则
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        ecmaFeatures: {
          jsx: true,
        },
      },
      rules: {
        'no-undef': 'off',
      },
    },
    // 解析ts 文件 和vue 文件用到的额外规则
    {
      files: ['*.ts', '*.vue'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
  // parser 配置选项
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,  //支持 jsx
    },
  },
  // 
  plugins: [
    "vue"
  ],
  "rules": {
    "vue/no-unused-vars": "error",
    "vue/script-indent": ["error", 2, { "baseIndent": 1 }],
    "vue/html-indent": ["error", 2],
    "vue/max-attributes-per-line": "off"
  },
  settings: {
    // 指定了模块解析器的选项。在这个例子中，我们启用了一个名为 node 的解析器，并指定了支持的文件扩展名。
    'import/resolver': {
      node: { extensions: ['.js', '.mjs', '.ts', '.d.ts', '.tsx'] },
    },
  },
  // 正常写在配置文件
  // globals: {
  //   // 微信小程序 设置值为writable让wx可被重写
  //   wx: 'writable',
  //   jQuery: false,
  //   $: 'readonly',
  // }
  // 其他代码
}

参考 juejin.cn/post/722451...

Eslint 的使用

- eslint配置文件格式

- 如何忽略 ESLint 对特定文件的检测

- root

- env

- extends

- parser

- overrides

- parserOptions

- plugins

- globals

- settings

参考 juejin.cn/post/722451...