VSCode ESLint 配置：让你的代码更规范也更省心

写代码有时候写着写着就容易“放飞自我”，尤其是项目一多、人一杂，风格不统一的问题就暴露出来了。这个时候，ESLint 就是个好帮手，它就像一个自动化的代码检查员，帮你把那些不规范的地方统统标出来。

在 VSCode 里配置 ESLint，其实挺简单的，但一开始可能有点懵，特别是各种插件和配置文件的关系。今天我就来聊聊我是怎么一步步搞定它的。

安装 ESLint

插件首先，在 VSCode 里得先装个 ESLint 插件。打开扩展商店（就是左边那个图标），搜 ESLint，找到由 Microsoft 官方维护的那个，点击安装。

装完之后，你会发现代码编辑区域旁边可能会有小红点或者波浪线提示错误了，但这时候可能还没生效，因为还没有配置规则。

初始化 ESLint 配置文件

接下来就是在你的项目根目录下创建 .eslintrc.js 或者 .eslintrc.json 文件。这个文件就是 ESLint 的核心配置，告诉它你要用什么规则来检查代码。

你可以手动创建，也可以运行命令自动生成：

npx eslint --init

这个命令会引导你选择一些选项，是否需要支持 TypeScript，要不要做代码格式化等等。

生成后你会看到类似这样的内容（以 JavaScript 格式为例）：

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，记得还要安装一些额外的依赖包：

npm install eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

否则 ESLint 可能识别不了你的 .ts 或 .tsx 文件。

VSCode 设置中开启保存自动修复

为了让 ESLint 更好用，建议在 VSCode 的设置里开启保存时自动修复的功能。打开设置（可以通过 Ctrl + , 快捷键，Mac 是 Command + ， ），搜索：

ESLint: Auto Fix On Save —— 开启它，保存代码时就会自动修复可修复的问题。
Editor: Code Actions On Save —— 确保里面有 "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-console
quotes：https://eslint.org/docs/latest/rules/quotes
indent：https://eslint.org/docs/latest/rules/indent
space-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 使用起来也非常顺手。虽然一开始配置可能有点麻烦，但一旦配好了，写代码真的舒服很多，也能避免很多低级错误。

开发必备：API 全流程管理神器 Apifox

介绍完上文的内容，我想额外介绍一个对开发者同样重要的效率工具 —— Apifox。作为一个集 API 文档、API 调试、API 设计、API 测试、API Mock、自动化测试等功能于一体的 API 管理工具，Apifox 可以说是开发者提升效率的必备工具之一。

如果你正在开发项目需要进行接口调试，不妨试试 Apifox。注册过程非常简单，你可以直接在这里注册使用。

立即体验 Apifox

注册成功后可以先看看官方提供的示例项目，这些案例都是经过精心设计的，能帮助你快速了解 Apifox 的主要功能。

使用 Apifox 的一大优势是它完全兼容 Postman 和 Swagger 数据格式，如果你之前使用过这些工具，数据导入会非常方便。而且它的界面设计非常友好，即使是第一次接触的新手也能很快上手，快去试试吧！

免费使用 Apifox

VSCode ESLint 配置：让你的代码更规范也更省心