如何配置 VSCode 以无缝衔接 ESLint 和 Prettier 进行代码检查和格式化？

幻影之瞳

发布时间：2025-09-20 21:13:01

534人浏览过

来源于php中文网

原创

答案：配置VSCode需安装ESLint和Prettier扩展，项目中安装eslint、prettier及相关插件，通过.eslintrc.js和.prettierrc.js定义规则，并在.vscode/settings.json中设置保存时自动格式化，确保editor.formatOnSave为true且defaultFormatter指向Prettier，同时启用codeActionsOnSave修复ESLint问题，利用eslint-config-prettier禁用冲突规则，eslint-plugin-prettier将Prettier集成进ESLint检查，通过overrides实现不同文件类型定制化规则，优先级上以Prettier格式为准，ESLint负责质量检查，避免规则冲突。

如何配置 vscode 以无缝衔接 eslint 和 prettier 进行代码检查和格式化？

配置 VSCode 来无缝衔接 ESLint 和 Prettier 进行代码检查和格式化，核心在于正确安装必要的扩展和项目依赖，然后通过 VSCode 的工作区设置以及项目根目录下的配置文件来统一代码规范。这能确保你的代码在保存时自动进行格式化，并实时提示潜在的语法或风格问题，极大提升开发效率和团队协作质量。

解决方案

要让 VSCode 愉快地与 ESLint 和 Prettier 协同工作，你需要做几件事。这可不是简单地装上扩展就完事，背后还有些配置的小心思。

首先，在 VSCode 里安装两个关键扩展：

ESLint (作者: Dirk Baeumer): 这个扩展是让 ESLint 活起来的基础。
Prettier - Code formatter (作者: Esben Petersen): 这是 Prettier 在 VSCode 中的官方支持，负责格式化。

接着，在你的项目里安装必要的开发依赖。打开终端，进入项目根目录，然后运行：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
# 或者使用 yarn
yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier

这里面

eslint-config-prettier

和

eslint-plugin-prettier

是重头戏。

eslint-config-prettier

负责禁用那些可能与 Prettier 冲突的 ESLint 格式化规则，避免两者打架。而

eslint-plugin-prettier

则是把 Prettier 的格式化能力集成到 ESLint 的规则中，这样 ESLint 就能报告 Prettier 认为不符合规范的地方，然后通过 ESLint 的自动修复来解决。

然后，你需要配置 ESLint 和 Prettier。

ESLint 配置 (

.eslintrc.js

或
.eslintrc.json
): 在项目根目录创建或修改

.eslintrc.js

（我个人偏爱 JS 格式，灵活性高）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // 如果是 React 项目
    'plugin:@typescript-eslint/recommended', // 如果是 TypeScript 项目
    'prettier', // 确保这个在最后，禁用冲突的 ESLint 规则
    'plugin:prettier/recommended', // 确保这个在最后，将 Prettier 规则作为 ESLint 规则
  ],
  parser: '@typescript-eslint/parser', // 如果是 TypeScript 项目
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react', // 如果是 React 项目
    '@typescript-eslint', // 如果是 TypeScript 项目
    'prettier', // 启用 Prettier 插件
  ],
  rules: {
    // 你可以在这里添加或覆盖 ESLint 规则
    'prettier/prettier': 'error', // 将 Prettier 格式化问题视为错误
    'indent': ['error', 2], // 示例：强制缩进为2个空格
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
    // 其他自定义规则...
  },
  settings: {
    react: {
      version: 'detect', // 如果是 React 项目
    },
  },
};

Prettier 配置 (

.prettierrc.js

或
.prettierrc.json
): 在项目根目录创建或修改

.prettierrc.js

：

module.exports = {
  semi: true, // 行末是否加分号
  singleQuote: true, // 使用单引号
  printWidth: 100, // 每行代码最大长度
  tabWidth: 2, // 缩进宽度
  trailingComma: 'es5', // 对象或数组的最后一个元素后是否加逗号
  arrowParens: 'always', // 箭头函数参数始终加括号
  endOfLine: 'lf', // 保持文件以 LF 结尾，避免跨平台问题
  // 其他自定义规则...
};

最后，也是最关键的一步，配置 VSCode 的工作区设置 (

.vscode/settings.json

)。在项目根目录创建一个

.vscode

文件夹，并在其中创建

settings.json

文件：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true // 比如，自动排序导入
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // 确保 Prettier 插件在所有相关文件类型上都生效
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这里

editor.defaultFormatter

设置为 Prettier，

editor.formatOnSave

开启保存时自动格式化。而

editor.codeActionsOnSave

里的

"source.fixAll.eslint": true

则是让 ESLint 在保存时自动修复所有能修复的问题，这其中就包括了

eslint-plugin-prettier

报告的格式问题。这样一来，你保存文件的时候，Prettier 会先格式化，然后 ESLint 再进行一遍修复和检查，确保万无一失。

为什么我的代码保存后没有自动格式化或检查错误？

这问题太常见了，每次帮同事看配置，十有八九都出在这里。别急，我们一步步排查。

首先，最基础的：扩展装了吗？ 确认 VSCode 里 ESLint 和 Prettier 扩展都处于已启用状态。有时候，装了但没启用，或者被其他扩展冲突了。

然后，项目依赖是不是全的？ 回到终端，再跑一遍

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

。有时候网络问题或者手滑，少装了某个包，整个链条就断了。特别是

eslint-config-prettier

和

eslint-plugin-prettier

，它们是 ESLint 和 Prettier 和平共处的关键。

接下来，VSCode 的设置对不对？ 仔细检查

.vscode/settings.json

文件。

```
editor.formatOnSave
```
必须是
```
true
```
。

editor.defaultFormatter

必须是

"esbenp.prettier-vscode"

。

```
editor.codeActionsOnSave
```
里
```
"source.fixAll.eslint": true
```
也不能少。如果这些配置写在了用户设置（全局设置）里，而项目工作区设置（
```
.vscode/settings.json
```
）又覆盖了它们，那以工作区设置为准。确保工作区设置是正确的。

配置文件有没有语法错误？

.eslintrc.js

和

.prettierrc.js

都是 JavaScript 文件，如果里面有语法错误，或者 JSON 文件格式不对，那它们就不会生效。我经常看到有人在 JSON 文件里不小心加了注释或者多余的逗号。

查看 VSCode 的输出面板。 这是排查问题的利器。打开 VSCode 的“输出”面板（View -> Output），在下拉菜单中选择 "ESLint" 或 "Prettier"。这里会显示它们运行时的日志和错误信息。比如，ESLint 可能会告诉你它找不到某个插件，或者某个配置文件解析失败。Prettier 也会告诉你它在格式化时遇到了什么问题。这些日志通常能帮你快速定位问题。

最后，一个比较玄学但有时管用的办法：重启 VSCode。是的，有时候就是这么简单，重启一下，所有的配置和扩展就都重新加载了，问题就解决了。如果还不行，尝试彻底关闭 VSCode，甚至杀掉所有相关的进程，再重新打开。

XPaper Ai

AI撰写论文、开题报告生成、AI论文生成器尽在XPaper Ai论文写作辅助指导平台

下载

如何针对不同项目或文件类型定制 ESLint 和 Prettier 规则？

嗯，代码规范这东西，不可能一刀切。不同的项目、不同的文件类型，甚至项目里的不同模块，可能都有自己独特的风格需求。定制化是必须的。

项目级别的定制，最直接的方式就是在每个项目的根目录下创建

.vscode/settings.json

文件。这个文件里的设置会覆盖你的用户（全局）设置，只对当前项目生效。比如，你可能有一个项目使用 2 个空格缩进，而另一个老项目因为历史原因必须用 4 个空格，就可以在各自的

settings.json

中配置

editor.tabSize

。

ESLint 的定制，主要通过

.eslintrc.js

文件中的

overrides

字段来实现。这个字段允许你根据文件路径或 glob 模式，为特定的文件集合应用不同的规则、解析器或插件。

// .eslintrc.js 示例
module.exports = {
  // ... 其他基础配置
  overrides: [
    {
      files: ['src/**/*.js', 'src/**/*.jsx'], // 针对 src 目录下的 JS/JSX 文件
      rules: {
        'no-console': 'warn', // 在 src 文件中，console.log 只是警告
      },
    },
    {
      files: ['test/**/*.js'], // 针对测试文件
      env: {
        jest: true, // 启用 Jest 全局变量
      },
      rules: {
        'no-undef': 'off', // 测试文件里允许未定义的全局变量（如 describe, it）
      },
    },
    {
      files: ['*.ts', '*.tsx'], // 针对 TypeScript 文件
      parserOptions: {
        project: ['./tsconfig.json'], // 指定 TypeScript 项目文件
      },
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': 'off', // 禁用 TS 的某些规则
      },
    },
  ],
};

这样一来，你的测试文件可以有更宽松的规则，而生产代码则可以更严格。这就像给你的代码库里的不同部门，制定了不同的行为准则。

Prettier 的定制 也很类似，在

.prettierrc.js

文件中同样有

overrides

选项。

// .prettierrc.js 示例
module.exports = {
  // ... 基础 Prettier 配置
  overrides: [
    {
      files: '*.json', // 针对 JSON 文件
      options: {
        tabWidth: 4, // JSON 文件使用 4 个空格缩进
      },
    },
    {
      files: '*.md', // 针对 Markdown 文件
      options: {
        proseWrap: 'always', // Markdown 文件总是换行
      },
    },
  ],
};

你看，JSON 文件可能习惯 4 个空格，Markdown 文件可能需要自动换行以提高可读性，这些都可以通过

overrides

精准控制。

另外，别忘了

.eslintignore

和

.prettierignore

文件。它们的作用是告诉 ESLint 和 Prettier，哪些文件或目录应该被完全忽略，不进行检查或格式化。比如

node_modules/

、

dist/

目录通常都会被忽略。这对于避免处理生成文件或第三方库的代码非常有用。

ESLint 和 Prettier 冲突了怎么办，我该听谁的？

这问题简直是代码规范工具配置中的“哲学”问题。当 ESLint 和 Prettier 出现冲突时，你确实需要明确一个“老大”，否则就会陷入无休止的格式化-修复-格式化循环。我的经验是，Prettier 负责格式化，ESLint 负责代码质量和风格。

核心解决思路是：让 Prettier 说一不二地决定代码的格式，然后让 ESLint 来检查代码质量，同时把 Prettier 的格式规则也当成 ESLint 的一部分规则来检查。

这就是前面提到的

eslint-config-prettier

和

eslint-plugin-prettier

的作用。

```
eslint-config-prettier
```
: 它的职责非常明确——关闭所有与 Prettier 冲突的 ESLint 格式化规则。比如，ESLint 可能有一个规则叫
```
indent
```
，它会检查缩进，而 Prettier 也有自己的缩进规则。如果不禁用 ESLint 的
```
indent
```
规则，两者就会打架。
```
eslint-config-prettier
```
就是来做这个“和事佬”的。在
```
.eslintrc.js
```
的
```
extends
```
数组中，它应该放在所有其他配置的后面，以确保它能覆盖并禁用掉冲突的规则。
```
eslint-plugin-prettier
```
: 这个插件则把 Prettier 的格式化结果，作为一条 ESLint 规则来运行。也就是说，如果你的代码不符合 Prettier 的格式，ESLint 就会把它当作一个错误报告出来。这样，你就可以利用 ESLint 的自动修复功能（
```
source.fixAll.eslint
```
）来应用 Prettier 的格式化，而不是仅仅依赖 VSCode 的
```
formatOnSave
```
。这层封装让格式化错误也能通过 ESLint 的报告机制统一管理。在
```
.eslintrc.js
```
的
```
extends
```
数组中，
```
'plugin:prettier/recommended'
```
也应该放在最后。

如果你发现两者还在冲突，那多半是配置顺序不对，或者你手动添加的某些 ESLint 规则与 Prettier 的默认行为冲突了。

检查
extends
顺序：确保

prettier

和

plugin:prettier/recommended

在

.eslintrc.js

的

extends

数组中是最后两个。

检查自定义 ESLint 规则：如果你在
```
rules
```
字段里手动设置了像
```
indent
```
、
```
quotes
```
、
```
semi
```
等与格式相关的规则，它们可能会和 Prettier 冲突。在启用了
```
plugin:prettier/recommended
```
后，通常就不需要再手动设置这些格式相关的 ESLint 规则了，让 Prettier 全权负责。如果非要设置，那就要非常小心，确保它们和 Prettier 的配置完全一致。