写代码的时候，尤其是项目一多、人员一杂，风格不统一的问题简直防不胜防。这时候，ESLint 就像一个自动化的代码检查员，能把那些不规范的地方全部标记出来，省心不少。
在 VSCode 里配置 ESLint，步骤其实不复杂，但插件和配置文件之间的关系容易让人一头雾水。这篇就来聊聊具体的配置步骤，从零开始走一遍。
安装 ESLint 插件
首先，在 VSCode 里安装 ESLint 插件——打开扩展商店（左边那个图标），搜索 ESLint，选 Microsoft 官方维护的那个，点击安装。
装完之后，代码编辑区旁边可能就会冒出小红点或波浪线提示错误，但这时候规则还没配，插件还不会真正工作。
初始化 ESLint 配置文件
接下来在项目根目录下创建 .eslintrc.js 或 .eslintrc.json 文件，这是整个 ESLint 的核心，告诉它用什么规则来检查代码。
你可以手动创建，也可以直接用命令自动生成：
npx eslint --init
这个命令会弹出几个选项——要不要支持 TypeScript，要不要做代码格式化等等，按需选择就行。
生成后的配置文件（Ja vaScript 格式为例）大致长这样：
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
// 这里可以自定义规则
},
};
安装依赖（特别是用了 TypeScript）
如果项目用了 TypeScript，记得额外安装几个依赖包，否则 ESLint 可能无法识别 .ts 或 .tsx 文件：
npm install eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser --sa ve-dev
VSCode 设置中开启保存自动修复
为了让 ESLint 更顺手，建议在 VSCode 设置里开启保存时自动修复。打开设置（快捷键 Ctrl + ,，Mac 是 Command + ,），搜索：
ESLint: Auto Fix On Sa ve—— 开启它，保存代码时自动修复可修复的问题。Editor: Code Actions On Sa ve—— 确保里面包含"source.fixAll.eslint": true
这样每次保存，ESLint 都会自动帮你整理代码格式，缩进、引号之类的问题再也不用手动调了。
ESLint 规则怎么配才顺手？
配置文件中最关键的部分是 rules 字段。每条规则有三个级别：
"off"或0：关闭"warn"或1：启用，显示为警告（不影响编译）"error"或2：启用，显示为错误（可能导致构建失败）
举几个常用的例子：
强制使用单引号
quotes: ['error', 'single']
不允许 console.log
'no-console': 'warn'
缩进用两个空格
indent: ['error', 2]
函数前后要有空格
'space-before-function-paren': ['error', 'always']
自动修复格式问题（配合 Prettier 使用）
如果同时用了 Prettier 来格式化代码，可以在 extends 中加上 'prettier'，然后在 .prettierrc 文件中配置格式规则：
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
]
这样 ESLint 和 Prettier 就能和平共处，一边检查规则，一边格式化代码，互不冲突。
这些规则哪里来的？官方文档在哪？
这些规则并不是凭空编出来的，它们都来自 ESLint 官方文档，经过了社区广泛验证。
ESLint 官方文档地址
? https://eslint.org/docs/latest/
这是 ESLint 的最新版本文档主页。你可以在这里搜索任意规则，比如：
no-console：https://eslint.org/docs/latest/rules/no-consolequotes：https://eslint.org/docs/latest/rules/quotesindent：https://eslint.org/docs/latest/rules/indentspace-before-function-paren：https://eslint.org/docs/latest/rules/space-before-function-paren
怎么查规则？
- 打开 ESLint 官网。
- 在左侧菜单点击 “Rules”。
- 看到长长的规则列表（按字母排序）。
- 点击任意规则名称，进入详细说明页。
每个规则页面通常包含：
- Rule Details：这条规则的作用
- Options：支持哪些配置项
- Examples：正确与错误的写法示例
- Related Rules：相关规则推荐
- Version：从哪个版本开始支持
插件规则呢？比如 @typescript-eslint
如果用了 TypeScript 或 React，还需要查看插件提供的规则：
@typescript-eslint/eslint-plugin的规则文档：? https://typescript-eslint.io/rules/eslint-plugin-react的规则文档：? https://github.com/jsx-eslint/eslint-plugin-react
这些插件扩展了 ESLint 的能力，能够针对特定语言或框架做更细粒度的检查。
常见问题处理
没有报错？
可能是 ESLint 没有正确加载配置文件。检查一下 .eslintrc 文件的位置对不对，有没有拼写错误，或者 VSCode 当前打开的是不是项目根目录。
报错太多不想管？
可以在配置文件里一条条关掉不想要的规则，比如：
rules: {
'no-console': 'off'
}
或者临时加注释忽略某一行：
console.log('test') // eslint-disable-line
总的来说，ESLint 是一个非常实用的工具，配合 VSCode 用起来相当顺手。虽然第一次配置可能有点麻烦，但一旦配好，写代码真的舒服很多，也能避免大量低级错误。
