写代码有时候写着写着就容易“放飞自我”,尤其是项目一多、人一杂,风格不统一的问题就暴露出来了。这个时候,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-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 使用起来也非常顺手。虽然一开始配置可能有点麻烦,但一旦配好了,写代码真的舒服很多,也能避免很多低级错误。
开发必备:API 全流程管理神器 Apifox
介绍完上文的内容,我想额外介绍一个对开发者同样重要的效率工具 —— Apifox。作为一个集 API 文档、API 调试、API 设计、API 测试、API Mock、自动化测试等功能于一体的 API 管理工具,Apifox 可以说是开发者提升效率的必备工具之一。
如果你正在开发项目需要进行接口调试,不妨试试 Apifox。注册过程非常简单,你可以直接在这里注册使用。

注册成功后可以先看看官方提供的示例项目,这些案例都是经过精心设计的,能帮助你快速了解 Apifox 的主要功能。
使用 Apifox 的一大优势是它完全兼容 Postman 和 Swagger 数据格式,如果你之前使用过这些工具,数据导入会非常方便。而且它的界面设计非常友好,即使是第一次接触的新手也能很快上手,快去试试吧!
