如何为vscode配置前端开发环境_集成ESLint和Prettier的步骤是什么【教程】

配好 ESLint + Prettier 需装三插件：ESLint（官方）、Prettier（官方）、EditorConfig（推荐）；须本地安装 eslint、配置 eslint-config-prettier 并置于 extends 末位；VS Code 中禁用 formatOnSave，启用 codeActionsOnSave 修复 ESLint 问题。

VS Code 里装哪些插件才算配好 ESLint + Prettier

只装插件不配置，等于没装。核心是这三样：ESLint（官方插件）、Prettier（官方插件）、EditorConfig for VS Code（可选但推荐）。注意别装错名字，比如搜 Prettier ESLint 这类拼接名插件，基本是过时或冗余的。

装完后重启 VS Code，否则插件可能不激活。尤其 ESLint 插件依赖项目本地安装的 eslint 包，它不会自动 fallback 到全局版本——这点很多人卡住。

• 确保项目根目录有 package.json，且已执行 npm install eslint --save-dev 或 yarn add eslint -D
• 如果用 typescript，还要加 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser
• Prettier 插件本身不带校验能力，它只负责格式化；ESLint 负责代码质量检查，两者职责不能互换

如何让 ESLint 和 Prettier 不打架

默认情况下，Prettier 的格式规则会和 ESLint 的样式类规则（比如 indent、quotes）冲突，保存文件时来回覆盖。必须显式禁用 ESLint 中与 Prettier 重叠的规则。

最稳妥的做法是安装 eslint-config-prettier 并在 .eslintrc.js 里关掉所有冲突规则：

立即学习“前端免费学习笔记（深入）”；

module.exports = {   extends: [     'eslint:recommended',     'plugin:@typescript-eslint/recommended',     'prettier' // ← 这行必须放在最后   ] };

• 顺序很重要：prettier 必须是 extends 数组的最后一项，否则会被前面的规则覆盖
• 不要手动写 rules: { 'no-unused-vars': 'off' } 这类关闭语句，交给 eslint-config-prettier 统一处理更可靠
• 如果用了 eslint-plugin-prettier（把 Prettier 当作 ESLint 规则运行），需额外加 'plugin:prettier/recommended' 到 extends，但多数现代项目已不推荐这种耦合方式

保存时自动修复，但只修 ESLint 能修的，不是全部格式

VS Code 默认的 editor.codeActionsOnSave 设置容易误解：它触发的是 ESLint 的 fix，不是 Prettier 的格式化。所以如果你关掉了 eslint-config-prettier，或者没配 "eslint.autoFixOnSave": true，保存时什么都不会发生。

推荐在 .vscode/settings.json 中明确声明行为：

{   "editor.codeActionsOnSave": {     "source.fixAll.eslint": true   },   "editor.formatOnSave": false,   "eslint.validate": ["javascript", "typescript", "vue"] }

• "editor.formatOnSave": false 是关键——避免 Prettier 插件和 ESLint 插件同时抢着格式化
• "eslint.validate" 要列全你实际用的文件类型，比如写 Vue 就得加上 "vue"，否则 .vue 文件里的 块不会被检查
• 如果真想用 Prettier 格式化注释、html 或 css，可以单独绑定快捷键（如 Shift+Alt+F），而不是让它参与保存流程

为什么改了配置还是不生效？先查这几个地方

常见失效不是配置写错了，而是 VS Code 没读到正确配置路径，或项目结构干扰了规则加载。

• 检查 .eslintrc.* 是否在真正的工作区根目录（不是父文件夹），VS Code 只认打开文件夹下的配置
• 运行 npx eslint . --ext .js,.ts --quiet 看终端是否报错，如果 CLI 能跑通但 VS Code 不行，基本是插件没启用或工作区设置被覆盖
• 某些 monorepo 工具（如 pnpm workspace、Nx）会让 ESLint 找不到依赖，需要在 .eslintrc.js 里显式指定 parserOptions.project 指向 tsconfig.json
• Vue 项目中，若用 ，必须确保 @vue/eslint-config-typescript 版本 ≥ 12.0.0，老版本不识别新语法

最常被忽略的是：ESLint 插件只对打开的文件生效，且依赖当前文件的 language mode（右下角显示 javascript / TypeScript / Vue）。如果显示为 Plain Text，再好的配置也没用——先点它，选对语言模式。