首先安装 ESLint 扩展并初始化项目配置，生成 .eslintrc 文件且安装 eslint 依赖；然后在 vscode 中启用 ESLint 校验，配置 settings.json 支持 js/ts/vue 检查，并设置保存时自动修复；最后通过 format on save 与 codeActionsOnSave 实现保存自动修正，验证提示生效即完成。
在 VSCode 中配置 ESLint 能帮助你在编写 javaScript 或 typescript 代码时实时发现语法错误和代码风格问题。只要正确设置，ESLint 会自动提示、修复问题，提升开发效率。
安装 ESLint 扩展
打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），搜索 ESLint，选择由 microsoft 官方发布的 ESLint 插件并安装。
项目中初始化 ESLint
确保你的项目根目录中有 ESLint 配置文件。如果没有，可以通过以下步骤创建：
- 在项目根目录打开终端，运行 npm init @eslint/config（或使用 yarn/pnpm）
- 根据提示选择环境（如浏览器、node.js）、模块类型、框架（react、Vue 等）、是否使用 TypeScript
- 选择你喜欢的代码风格（如 Airbnb、Standard）或自定义规则
- 保存配置后，会生成 .eslintrc.cjs 或 .eslintrc.json
同时确保项目已安装依赖：
npm install eslint –save-dev
配置 VSCode 设置
为了让 ESLint 在编辑器中正常工作，建议检查或添加以下设置：
- 打开 VSCode 设置（Ctrl+,），搜索 eslint validate
- 确保启用了对 javascript 和 typescript 的校验
- 如果使用 Vue 或 JSX，可能需要额外启用对应语言块的检查
也可以在项目根目录创建 .vscode/settings.json 文件：
{ “eslint.enable”: true, “eslint.autoFixOnSave”: true, “eslint.validate”: [ “javascript”, “typescript”, “vue” ] }
注意：autoFixOnSave 已逐渐被弃用，推荐使用 VSCode 的“保存时自动格式化”功能配合 ESLint。
启用保存时自动修复
修改 VSCode 的用户或工作区设置，实现保存文件时自动修复可修复的问题：
- 打开设置，搜索 format on save，勾选 Editor: Format On Save
- 设置默认格式化工具为 ESLint：右键编辑器 -> “格式化文档” -> 选择“ESLint”作为默认
或者在 settings.json 中添加：
“editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }
这样每次保存时，ESLint 会自动修复支持的代码问题。
基本上就这些。配置完成后，打开一个 JS/TS 文件，故意写点不符合规则的代码（比如多余的分号），如果看到黄色波浪线或 ESLint 提示，说明配置成功了。