怎样配置ESLint代码检查？-js教程-PHP中文网

配置ESLint需先生成.eslintrc文件并安装依赖，通过extends继承规则集、plugins扩展功能，结合Prettier统一代码风格，并利用缓存、lint-staged和.eslintignore优化性能，最后集成到IDE和Git Hooks中实现自动化检查与修复。

怎样配置eslint代码检查？

配置ESLint代码检查，核心在于初始化一个

.eslintrc

登录后复制

配置文件，然后根据项目需求选择或自定义规则集，并将其集成到开发工作流中。这通常包括安装ESLint及其相关插件，通过命令行工具生成基础配置，接着细化规则，并考虑与IDE或版本控制钩子（如Git Hooks）结合，确保团队代码风格和质量的一致性。

解决方案

搞定ESLint配置，其实没那么玄乎，但确实需要点耐心去理解它背后的逻辑。我个人觉得，这就像是给你的代码找了个“私人教练”，它会盯着你的代码，告诉你哪里可能写得不够好，或者不符合团队规范。

我们先从头开始。

第一步：安装ESLint

项目里得有它才能用。通常我们把它作为开发依赖安装：

npm install eslint --save-dev
# 或者
yarn add eslint --dev

登录后复制

第二步：初始化配置文件

这是关键一步，ESLint会问你几个问题，然后帮你生成一个基础的配置文件。

npx eslint --init

登录后复制

它会问你一些问题，比如：

你想用ESLint做什么？ （To check syntax, find problems, and enforce code style）
你的项目使用什么模块系统？ （比如ES Modules）
你的项目使用什么框架？ （React, Vue, None of these）
你的项目使用TypeScript吗？ （Yes/No）
你的代码在哪里运行？ （Browser, Node）
你想用什么风格指南？ （Airbnb, Standard, Google, 或者自己回答问题来构建）
你的配置文件想用什么格式？ （JavaScript, YAML, JSON）

我通常会选“To check syntax, find problems, and enforce code style”，然后根据项目实际情况选模块系统和框架。风格指南我个人偏好Airbnb，因为它规则比较全面且社区支持广。选完这些，它会自动帮你安装所需的插件和配置包。

第三步：理解

.eslintrc.js

登录后复制

文件

生成的文件大概长这样（以JavaScript格式为例）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // 如果你选了React
    'airbnb', // 如果你选了Airbnb
    // ... 其他你选的配置
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12, // 或者你选的更高版本
    sourceType: 'module',
  },
  plugins: [
    'react', // 如果你选了React
    // ... 其他你选的插件
  ],
  rules: {
    // 在这里可以自定义或覆盖规则
    'indent': ['error', 2], // 强制使用2个空格缩进
    'linebreak-style': ['error', 'unix'], // 强制使用Unix风格的换行符
    'quotes': ['error', 'single'], // 强制使用单引号
    'semi': ['error', 'always'], // 强制语句结尾使用分号
    'no-console': 'warn', // console.log 使用警告而不是错误
    // 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], // 针对React的规则
  },
  settings: {
    react: {
      version: 'detect', // 自动检测React版本
    },
  },
};

登录后复制

```
env
```
登录后复制
: 定义了代码运行的环境，比如浏览器（
```
browser
```
登录后复制
）、Node.js（
```
node
```
登录后复制
）、ES2021（
```
es2021
```
登录后复制
）等。ESLint会根据这些环境预定义全局变量。
```
extends
```
登录后复制
: 扩展了已有的配置。这是复用规则集最方便的方式。比如
```
eslint:recommended
```
登录后复制
是ESLint内置的推荐规则，
```
airbnb
```
登录后复制
是Airbnb的JavaScript风格指南。
```
parserOptions
```
登录后复制
: 解析器选项，定义了ESLint如何解析你的代码。比如
```
ecmaVersion
```
登录后复制
指定了ECMAScript版本，
```
sourceType
```
登录后复制
指定了模块类型（
```
module
```
登录后复制
或
```
script
```
登录后复制
），
```
ecmaFeatures.jsx
```
登录后复制
开启对JSX语法的支持。
```
plugins
```
登录后复制
: 插件，提供额外的规则、解析器或环境。当你使用特定框架（如React、Vue）或TypeScript时，通常需要对应的插件。
```
rules
```
登录后复制
: 这是你自定义规则的地方。你可以覆盖
```
extends
```
登录后复制
中继承的规则，或者添加自己的规则。每个规则有三个级别：
```
off
```
登录后复制
(0),
```
warn
```
登录后复制
(1),
```
error
```
登录后复制
(2)。
```
settings
```
登录后复制
: 共享设置，供所有规则或插件使用。比如React插件需要知道你项目的React版本。

第四步：运行ESLint

你可以在

package.json

登录后复制

中添加一个脚本：

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

登录后复制

```
npm run lint
```
登录后复制
: 检查当前目录下所有文件。
```
npm run lint:fix
```
登录后复制
: 检查并自动修复大部分可修复的问题。

第五步：忽略文件

有些文件或目录你不想让ESLint检查，比如

node_modules

登录后复制

、

build

登录后复制

目录或者一些第三方库文件。你可以创建一个

.eslintignore

登录后复制

文件，格式和

.gitignore

登录后复制

类似：

node_modules/
build/
dist/
*.min.js

登录后复制

第六步：集成到IDE

我强烈推荐在VS Code这类IDE中安装ESLint插件。这样，你写代码的时候，它就能实时给你反馈，错误和警告会直接显示出来，甚至能自动修复。这比每次手动运行命令要高效得多。

ESLint配置中，

extends

登录后复制

和

plugins

登录后复制

有什么区别，以及如何有效利用它们？

这个问题其实挺核心的，我刚接触ESLint的时候也纠结过。简单来说，

extends

登录后复制

是用来“继承”一整套规则配置的，而

plugins

登录后复制

则是用来“添加”新的规则、解析器或环境的。它们虽然都扩展了ESLint的能力，但侧重点完全不同。

extends

登录后复制

：规则集的继承与复用

你可以把

extends

登录后复制

理解为一份“配置清单”或者“风格指南”。它通常包含了一系列预设好的ESLint规则，比如Airbnb的JavaScript风格指南、Google的风格指南，或者是ESLint官方推荐的

eslint:recommended

登录后复制

。当你在

extends

登录后复制

中引用它们时，ESLint就会加载这些配置中定义的所有规则。

作用： 主要用于复用和共享已有的规则配置。它定义了“你的代码应该长什么样”的大部分标准。
好处： 避免了你从零开始手动配置上百条规则的痛苦，直接继承社区的最佳实践，大大提高了配置效率和团队代码风格的统一性。
使用方式：
```
extends: [
  'eslint:recommended', // ESLint内置推荐规则
  'airbnb',            // Airbnb风格指南
  'plugin:@typescript-eslint/recommended', // TypeScript插件的推荐规则
  'prettier',          // 与Prettier集成时用于关闭冲突规则
],
```
登录后复制
这里需要注意的是，
```
extends
```
登录后复制
的顺序很重要。后面的配置会覆盖前面同名的规则。所以，通常我们会把通用规则放在前面，然后是特定框架或语言的规则，最后是与格式化工具（如Prettier）相关的配置，以确保它们能正确关闭冲突规则。

plugins

登录后复制

：扩展ESLint的核心能力

plugins

登录后复制

则更像是给ESLint“安装”一些新功能模块。这些模块可以提供：

新的规则： 比如
```
eslint-plugin-react
```
登录后复制
提供了针对React JSX语法和组件生命周期的规则，
```
@typescript-eslint/eslint-plugin
```
登录后复制
提供了TypeScript特有的类型检查规则。
新的解析器： 比如
```
@typescript-eslint/parser
```
登录后复制
让ESLint能够理解TypeScript代码。
新的环境： 比如
```
eslint-plugin-jest
```
登录后复制
提供了Jest测试框架的全局变量和规则。

作用： 引入ESLint本身不具备的特定能力，通常是为了支持某种特定的语言、框架或工具。
好处： 让ESLint能够理解并检查非标准JavaScript语法（如JSX、TypeScript），或者针对特定场景（如React组件、Vue模板、测试文件）提供更细致的检查。
使用方式：
```
plugins: [
  'react', // 启用React相关的规则和环境
  '@typescript-eslint', // 启用TypeScript相关的规则和解析器
  'jest', // 启用Jest测试框架相关的规则
],
```
登录后复制
一旦你在
```
plugins
```
登录后复制
中声明了一个插件，你就可以在
```
extends
```
登录后复制
中引用该插件提供的推荐配置（如
```
plugin:react/recommended
```
登录后复制
），或者在
```
rules
```
登录后复制
中单独启用或配置该插件下的特定规则（如
```
'react/jsx-uses-vars': 'error'
```
登录后复制
）。

有效利用它们：

我的经验是，通常先通过

extends

登录后复制

引入一个主流的风格指南（比如Airbnb），这样就有了大部分基础规则。然后，根据项目使用的技术栈（比如React、TypeScript），通过

plugins

登录后复制

引入对应的插件，并在

extends

登录后复制

中加载这些插件提供的推荐配置。最后，在

rules

登录后复制

中微调或覆盖那些不符合团队实际需求的规则。

MyBatis3.2.3帮助文档中文CHM版

MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架。MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及结果集的检索。MyBatis 使用简单的 XML 或注解用于配置和原始映射,将接口和 Java 的 POJOs(Plan Old Java Objects,普通的 Java 对象)映射成数据库中的记录。有需要的朋友可以下载看看

查看详情

举个例子，如果你的项目是React + TypeScript，你的配置可能看起来像这样：

module.exports = {
  // ...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended', // TypeScript插件的推荐规则
    'airbnb', // Airbnb风格指南
    'airbnb/hooks', // Airbnb针对React Hooks的规则
    'airbnb-typescript', // Airbnb风格指南对TypeScript的补充
    'prettier', // 最后放置，确保关闭所有与Prettier冲突的规则
  ],
  plugins: [
    'react',
    '@typescript-eslint',
    // ... 其他插件
  ],
  parser: '@typescript-eslint/parser', // 使用TypeScript解析器
  parserOptions: {
    // ...
    project: './tsconfig.json', // TypeScript解析器需要知道你的tsconfig.json位置
  },
  rules: {
    // ... 你的自定义规则，可以覆盖extends中的规则
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 比如，我可能不想强制每个函数都声明返回类型
    'import/prefer-default-export': 'off', // 有时候我就是不想默认导出
  },
  // ...
};

登录后复制

注意，

airbnb-typescript

登录后复制

这个包会帮你处理Airbnb和TypeScript的集成，它本身也包含了

@typescript-eslint

登录后复制

相关的配置，所以通常你不需要手动去添加

plugin:@typescript-eslint/recommended

登录后复制

。我的点在于，理解它们各自的作用，能让你更灵活地组合出最适合自己项目的配置。

如何将ESLint与Prettier结合使用，以实现代码风格的自动化统一？

ESLint和Prettier，在我看来，是代码规范管理的“黄金搭档”。ESLint主要关注代码质量和潜在的错误（比如未使用的变量、潜在的bug），而Prettier则专注于代码格式化（比如缩进、分号、单双引号）。它们各司其职，但如果直接同时使用，很容易出现规则冲突，导致你保存文件时代码反复被格式化。所以，把它们俩完美结合起来，是提升开发体验的关键。

我的做法通常是这样的：

1. 理解各自职责：

ESLint： 关注代码的“正确性”和“最佳实践”，比如“不要使用
```
var
```
登录后复制
”、“函数参数不能超过3个”这类规则。它能发现潜在的运行时问题和代码风格上的“坏习惯”。
Prettier： 关注代码的“美观性”和“一致性”，比如“缩进是2个空格还是4个？”、“是否使用分号？”、“单引号还是双引号？”这类纯粹的格式问题。它没有“好坏”之分，只是强制统一。

2. 安装必要的包：

我们需要三个核心包来桥接它们：

```
eslint-config-prettier
```
登录后复制
：这个包的作用是关闭所有可能与Prettier冲突的ESLint规则。它不会添加任何新的规则，只是确保ESLint不会抱怨Prettier格式化后的代码。
```
eslint-plugin-prettier
```
登录后复制
：这个包的作用是将Prettier的格式化规则作为ESLint的一个规则来运行。这样，任何不符合Prettier格式的代码都会被ESLint标记为错误。
```
prettier
```
登录后复制
：Prettier本身，用于实际的代码格式化。

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
# 或者
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

登录后复制

3. 配置

.eslintrc.js

登录后复制

：

在你的

.eslintrc.js

登录后复制

文件中，需要做两件事：

在
```
extends
```
登录后复制
数组的最后添加
```
'prettier'
```
登录后复制
。这确保
```
eslint-config-prettier
```
登录后复制
能覆盖并关闭所有冲突的ESLint规则。
在
```
plugins
```
登录后复制
数组中添加
```
'prettier'
```
登录后复制
。
在
```
rules
```
登录后复制
中添加
```
'prettier/prettier': 'error'
```
登录后复制
。这将把Prettier的格式问题作为ESLint的错误来报告。

module.exports = {
  // ... 其他配置
  extends: [
    // ... 你的其他extends配置，比如 'airbnb', 'plugin:react/recommended', etc.
    'plugin:prettier/recommended', // 这一行包含了 'prettier' 和 'plugin:prettier'
                                  // 相当于同时在extends中添加 'prettier'
                                  // 并在plugins中添加 'prettier'
                                  // 并在rules中添加 'prettier/prettier': 'error'
  ],
  // 如果你不想用 'plugin:prettier/recommended' 这种简写，可以这样分开写：
  // extends: [
  //   // ... 其他extends
  //   'prettier', // 确保在所有其他配置之后，关闭冲突规则
  // ],
  // plugins: [
  //   // ... 其他plugins
  //   'prettier',
  // ],
  // rules: {
  //   // ... 你的其他rules
  //   'prettier/prettier': 'error', // 将Prettier的格式问题作为ESLint错误报告
  // },
  // ...
};

登录后复制

我个人推荐使用

'plugin:prettier/recommended'

登录后复制

，因为它是一个组合配置，省去了手动添加

prettier

登录后复制

到

extends

登录后复制

和

plugins

登录后复制

以及

prettier/prettier

登录后复制

规则的步骤，更简洁。

4. 配置Prettier（可选但推荐）：

Prettier有自己的配置文件，比如

.prettierrc.js

登录后复制

、

.prettierrc.json

登录后复制

或

.prettierrc

登录后复制

文件。你可以在这里定义你偏好的格式规则，比如单引号、分号、缩进等。

.prettierrc.js

登录后复制

示例：

module.exports = {
  semi: true, // 句尾是否加分号
  trailingComma: 'all', // 对象或数组的最后一个元素后面是否加逗号
  singleQuote: true, // 是否使用单引号
  printWidth: 100, // 每行代码的最大宽度
  tabWidth: 2, // 缩进宽度
  useTabs: false, // 是否使用tab缩进
};

登录后复制

5. 集成到开发工作流：

IDE集成： 在VS Code中安装Prettier插件，并设置“Format On Save”（保存时格式化）。这样，你每次保存文件时，Prettier就会自动格式化你的代码。由于ESLint的Prettier插件已经把Prettier的规则集成进去了，ESLint的错误提示也会相应更新。
Git Hooks (使用
lint-staged
登录后复制
和
husky
登录后复制
)：这是自动化代码风格统一的终极方案。在提交代码前，自动对暂存区的文件运行ESLint和Prettier。
1. 安装
```
husky
```
  登录后复制
  和
```
lint-staged
```
  登录后复制
  ：
```
npm install husky lint-staged --save-dev
```
  登录后复制
2. 配置
```
husky
```
  登录后复制
  （Git Hooks管理工具）：在
```
package.json
```
  登录后复制
  中添加：
```
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}
```
  登录后复制
  或者，对于新版Husky (v7+)，使用命令行：
```
npx husky install
npx husky add .husky/pre-commit "npm run pre-commit-lint"
```
  登录后复制
3. 配置
```
lint-staged
```
  登录后复制
  （对暂存区文件运行命令）：在
```
package.json
```
  登录后复制
  中添加：
```
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix", // 先让ESLint修复能自动修复的问题
      "prettier --write", // 再让Prettier格式化
      "git add" // 重新添加到暂存区
    ]
  },
  "scripts": {
    "pre-commit-lint": "lint-staged" // 如果用新版husky，这里对应你的hook命令
  }
}
```
  登录后复制
  这样，每次你
```
git commit
```
  登录后复制
  时，
```
lint-staged
```
  登录后复制
  就会对你暂存的
```
.js
```
  登录后复制
  ,
```
.jsx
```
  登录后复制
  ,
```
.ts
```
  登录后复制
  ,
```
.tsx
```
  登录后复制
  ,
```
.vue
```
  登录后复制
  文件先进行ESLint自动修复，然后用Prettier格式化，最后再把这些改动重新添加到暂存区。如果ESLint还有无法自动修复的错误，提交就会失败，强制你手动解决。

通过这种方式，ESLint和Prettier就能完美协作，一个负责代码质量，一个负责代码美观，共同确保你的项目代码始终保持高标准。

在大型项目中，ESLint的性能优化和多配置管理有哪些最佳实践？

大型项目，代码量动辄数十万上百万行，文件数量成千上万。这时候，ESLint的检查速度和配置管理就成了实实在在的痛点。我深有体会，一个全量检查要跑好几分钟，简直是折磨。所以，性能优化和多配置管理是必须考虑的。

ESLint性能优化：

利用缓存（
```
--cache
```
登录后复制
）：这是最简单也最有效的优化手段。ESLint可以缓存上次检查的结果，只检查发生变化的文件。
```
{
  "scripts": {
    "lint": "eslint . --cache"
  }
}
```
登录后复制
ESLint会在项目根目录生成一个
```
.eslintcache
```
登录后复制
文件。这个文件可以被安全地添加到
```
.gitignore
```
登录后复制
中。
精确指定检查范围，避免不必要的文件：
- .eslintignore
  登录后复制
  文件：明确告诉ESLint哪些文件或目录不需要检查。
```
node_modules
```
  登录后复制
  、
```
build
```
  登录后复制
  、
```
dist
```
  登录后复制
  等目录是必加的。此外，一些第三方库文件、生成的代码文件（如protobuf生成的代码）也应该被忽略。
- 命令行指定目录/文件： 如果你只关心某个特定目录的代码，可以直接指定：
```
eslint src/components
```
  登录后复制
  。
- 限制文件类型：
```
eslint --ext .js,.jsx,.ts,.tsx src/
```
  登录后复制
  ，只检查特定后缀的文件。
按需加载插件和规则： ESLint的插件和规则越多，检查开销越大。
- 移除不必要的插件和配置： 仔细检查
```
plugins
```
  登录后复制
  和
```
extends
```
  登录后复制
  ，确保只加载项目实际需要的。
- 禁用不常用或性能开销大的规则： 有些规则可能对性能有显著影响，如果它们的收益不大，可以考虑禁用。例如，一些复杂的类型检查规则在大型TypeScript项目中可能会比较慢，可以考虑在开发阶段禁用，只在CI/CD中启用。
增量检查（
```
lint-staged
```
登录后复制
）：结合
```
husky
```
登录后复制
和
```
lint-staged
```
登录后复制
，只对Git暂存区中的文件进行检查。这在团队协作中尤其重要，可以显著缩短CI/CD流水线的运行时间，并且只对即将提交的代码进行检查，避免检查整个项目带来的巨大开销。前面在Prettier结合中已经提到了具体配置。
硬件优化： 这听起来有点废话，但对于特别大的项目，如果CI/CD环境的CPU和内存资源不足，也会导致ESLint运行缓慢。确保你的构建服务器有足够的资源。