ESLint + VS Code可实现实时代码检查与自动修复，通过配置.eslintrc.json和启用保存时自动修复，提升代码规范性与团队协作效率。
在JavaScript开发中，保持代码风格一致、避免低级错误是提升团队协作效率和项目可维护性的关键。VS Code中的ESLint插件正是为此而生。它能在你编写代码时实时检测问题，并给出修复建议，帮助你写出更规范、更健壮的JavaScript代码。
为什么选择ESLint + VS Code
ESLint是一个高度可配置的静态代码分析工具，能够识别代码中的潜在问题和格式不一致。与VS Code结合后，这些检查可以在编辑器中即时呈现，无需等到运行或构建阶段。
主要优势包括：
- 实时反馈：保存或输入代码时立即看到警告或错误
- 自动修复：支持一键修复缩进、引号、分号等常见问题
- 团队统一规范：通过共享配置文件（如.eslintrc.js）确保所有成员遵循相同规则
- 深度集成：与Prettier等工具协同工作，兼顾格式化与逻辑检查
如何安装与配置
第一步是在VS Code中安装ESLint扩展。打开扩展市场，搜索“ESLint”，选择由Microsoft官方发布的版本并安装。
立即学习“Java免费学习笔记（深入）”；
接着在项目根目录创建配置文件，例如.eslintrc.json：
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"no-console": "warn",
"semi": ["error", "always"],
"quotes": ["error", "single"]
}
}
这个配置启用了基本环境、继承推荐规则，并自定义了部分风格要求。保存后，VS Code会立即开始标记不符合规则的代码行。
启用保存时自动修复
让ESLint在保存文件时自动修复可修复的问题，能极大提升编码流畅度。在VS Code的settings.json中添加：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
这样每次保存JavaScript文件时，ESLint会自动处理分号、引号、空格等问题，无需手动操作。
注意：若同时使用Prettier，需配置冲突规则或使用eslint-config-prettier禁用ESLint中与格式相关的规则，避免互相干扰。
结合项目实际定制规则
不同项目可能使用React、Vue或Node.js，对应的ESLint规则也应调整。例如在React项目中，可以扩展plugin:react/recommended：
"extends": [ "eslint:recommended", "plugin:react/recommended" ]
然后安装对应依赖：npm install eslint-plugin-react --save-dev。
也可以针对特定文件类型启用规则，比如只在.jsx文件中强制JSX语法检查。
基本上就这些。合理配置ESLint插件后，你的JavaScript代码将更加整洁、一致，团队协作也会更顺畅。关键是根据项目需求灵活调整规则，而不是盲目套用。不复杂，但容易忽略细节。
