在 VSCode 中集成 ESLint 和 Prettier 可自动检查代码规范、统一格式并实时提示问题；需安装对应扩展和依赖，配置 .eslintrc.js 和 .prettierrc 文件，并在 settings.json 中启用保存时自动格式化与修复。
在 VSCode 中集成 ESLint 和 Prettier，能自动检查代码规范、统一格式、实时提示潜在问题，是提升 JavaScript/TypeScript 项目质量最直接有效的手段之一。
安装必要扩展和依赖
先确保本地项目已安装 ESLint 和 Prettier 相关包，再配置 VSCode 扩展：
- VSCode 扩展：安装 ESLint（由 Dirk Baeumer 维护）和 Prettier（由 Esben Petersen 开发）两个官方推荐插件
- 项目依赖：运行
npm init -y && npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier - 若用 TypeScript，额外加装
eslint-plugin-import、@typescript-eslint/eslint-plugin和@typescript-eslint/parser
配置 ESLint 规则文件
在项目根目录创建 .eslintrc.js（或 .eslintrc.json），明确启用 Prettier 并覆盖冲突规则：
- 设置
extends: ["eslint:recommended", "plugin:prettier/recommended"]—— 这会自动关闭所有与 Prettier 冲突的 ESLint 规则 - 若需自定义规则（如强制使用单引号、禁止 console），在
rules字段中单独添加，例如："quotes": ["error", "single"] - 确保
parserOptions.ecmaVersion与项目支持的语法版本一致（如2022）
配置 Prettier 格式化行为
通过 .prettierrc 文件（JSON 或 JS 格式）控制格式细节，常见实用配置包括：
-
"semi": false—— 禁用分号（配合 ESLint 的semi规则保持一致） -
"singleQuote": true—— 使用单引号 -
"tabWidth": 2、"useTabs": false—— 统一缩进为 2 个空格 -
"endOfLine": "lf"—— 行尾换行符统一为 LF（避免 Git 提交时出现 CRLF 警告）
设置 VSCode 自动修复与保存行为
编辑 VSCode 工作区设置（.vscode/settings.json），让编辑器真正“听话”：
- 启用保存时自动格式化：
"editor.formatOnSave": true - 指定默认格式化工具为 Prettier：
"editor.defaultFormatter": "esbenp.prettier-vscode" - 让 ESLint 在保存时自动修复可修复问题：
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} - 可选：禁用其他格式化插件干扰，如加上
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
配置完成后重启 VSCode，打开一个 JS/TS 文件，修改后保存——你会立刻看到格式自动调整、错误高亮消失、警告被修复。整个过程不依赖命令行，也不需要手动执行 lint 命令，开发体验更轻量、反馈更及时。
