VSCode 自动格式化：ESLint 与 Prettier

前言

在现代前端开发中，代码风格的一致性是一个永恒的话题。无论是团队协作还是个人项目，保持代码整洁、可读性强是每个开发者追求的目标。而 VSCode 提供了强大的工具链，让我们可以通过简单的配置实现 按下 Command + S（Mac）或 Ctrl + S（Windows/Linux）时自动格式化代码 的功能。听起来很酷对吧？但你知道这背后的机制和细节吗？

今天，我们就来深入探讨如何通过 ESLint 和 Prettier 的结合，在 VSCode 中实现这一“自动化”流程，并揭示其中的一些关键点。

一、确保插件已正确安装

首先，我们需要确保两个核心工具已经就位：ESLint 和 Prettier。它们分别扮演着不同的角色：

• ESLint 是一个静态代码分析工具，用于检查代码中的潜在问题，并提供修复建议。
• Prettier 是一个代码格式化工具，专注于统一代码风格，比如缩进、引号、分号等。

如果你还没有安装这两个插件，可以打开 VSCode 的扩展市场，搜索并安装以下两个插件：

• ESLint（作者：Dirk Baeumer）
• Prettier - Code formatter（作者：Prettier）

安装完成后，记得启用它们。

小提示：插件只是第一步，真正让它们发挥作用的是后续的配置。别急，我们慢慢来。

二、配置默认格式化工具

VSCode 支持多种格式化工具（比如内置的格式化器、Prettier、Beautify 等），但我们希望明确指定 Prettier 作为默认格式化工具。为什么？因为 Prettier 更加专注于代码风格，且与 ESLint 的集成更加顺畅。

方法一：通过 UI 设置

1. 打开 VSCode 设置（Mac: Cmd + ,，Windows/Linux: Ctrl + ,）。
2. 搜索 Default Formatter。
3. 将其设置为 esbenp.prettier-vscode（即 Prettier 插件）。

方法二：直接修改 settings.json

如果你更喜欢手动编辑配置文件，可以在 settings.json 中添加如下内容：

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这段配置的意思是：针对 JavaScript、TypeScript、HTML 和 Vue 文件，默认使用 Prettier 进行格式化。

三、启用保存时自动格式化

接下来，我们需要告诉 VSCode 在保存文件时自动格式化代码。这个功能非常实用，因为它让你无需额外操作即可保持代码整洁。

方法一：通过 UI 设置

1. 打开设置（Cmd + , 或 Ctrl + ,）。
2. 搜索 Format On Save。
3. 勾选 Editor: Format On Save。

方法二：直接修改 settings.json

在 settings.json 中添加以下配置：

"editor.formatOnSave": true

这样，每次保存文件时，VSCode 都会调用默认格式化工具（也就是我们刚刚配置的 Prettier）对代码进行格式化。

四、配置 ESLint 自动修复

虽然 Prettier 负责代码风格，但 ESLint 的作用不可忽视——它可以捕获代码中的潜在问题（如未使用的变量、语法错误等）。为了让 ESLint 在保存时也能自动修复这些问题，我们需要启用它的 Auto Fix On Save 功能。

方法一：通过 UI 设置

1. 打开设置（Cmd + , 或 Ctrl + ,）。
2. 搜索 ESLint: Auto Fix On Save。
3. 勾选该选项。

方法二：直接修改 settings.json

在 settings.json 中添加以下配置：

"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}

这段配置的意思是：在保存文件时，自动运行 ESLint 的修复功能。

五、让 Prettier 和 ESLint 协同工作

到目前为止，我们已经配置了 Prettier 和 ESLint 的基本功能，但它们之间可能会存在规则冲突。例如，ESLint 可能要求使用双引号，而 Prettier 默认使用单引号。这种冲突会导致格式化结果不一致。

为了避免这种情况，我们可以使用 eslint-config-prettier 和 eslint-plugin-prettier 来协调两者的规则。

步骤：

1. 在项目根目录下安装依赖：

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

2. 更新 .eslintrc.js 文件，添加以下配置：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 启用 Prettier 规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error' // 将 Prettier 格式问题视为 ESLint 错误
  }
};

通过这种方式，ESLint 会优先使用 Prettier 的规则，从而避免冲突。

六、验证配置

完成上述步骤后，我们需要验证配置是否生效。以下是验证方法：

1. 打开一个 JavaScript/TypeScript/Vue 文件。
2. 故意写一些不符合格式规范的代码（例如多余的空格、未对齐的缩进等）。
3. 按下 Command + S 或 Ctrl + S。
4. 如果配置正确，代码应该会自动格式化，并且 ESLint 的问题也会被修复。

七、完整的 settings.json 示例

为了方便参考，这里是一个完整的 settings.json 配置示例：

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "html",
    "vue"
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2
}

八、常见问题排查

问题 1：格式化未生效

确保当前文件类型支持 Prettier（例如 .js, .ts, .vue 等）。
检查 settings.json 中是否正确设置了 editor.defaultFormatter。

问题 2：ESLint 自动修复未生效

确保项目中已安装 ESLint 和相关插件。
检查 .eslintrc.js 文件是否正确配置了 eslint-plugin-prettier。

问题 3：规则冲突

如果 Prettier 和 ESLint 规则冲突，优先使用 eslint-config-prettier 来禁用冲突规则。

结语

通过以上步骤，你应该能够实现按下 Command + S 或 Ctrl + S 时自动格式化代码并修复 ESLint 问题的功能！这个小小的配置不仅能提升你的开发效率，还能让你的代码始终保持一致性。

当然，工具只是辅助，真正的代码质量还需要靠你的经验和思考。希望这篇文章能帮助你更好地理解 VSCode 的配置机制，并为你带来一些启发！