VSCode + ESLint + Prettier 三件套配置指南：告别分号和双引号的烦恼

在团队协作的前端开发中，代码风格的一致性往往比想象中更重要。当五位开发者提交的代码分别使用单引号、双引号、带分号、不带分号、混合缩进时，版本差异会变得难以阅读，代码审查也会变成格式纠错大会。这就是为什么我们需要一套自动化工具链来统一代码风格——不是限制创造力，而是让团队把精力集中在真正重要的逻辑实现上。

VSCode 作为现代前端开发的首选编辑器，配合 ESLint 的代码质量检查和 Prettier 的自动格式化，能构建出近乎完美的自动化代码风格工作流。本文将带你从零配置这套工具链，特别针对常见的分号与引号争议，展示如何通过配置实现"保存即格式化"的高效开发体验。

1. 工具链核心组件解析

在开始配置前，我们需要理解这三个工具各自的定位和协作关系：

• VSCode：提供底层的编辑器集成和自动化触发能力
• ESLint：专注于代码质量检查（潜在错误、不良模式等）
• Prettier：专注于代码风格格式化（缩进、引号、分号等）

它们的分工可以通过这个表格清晰对比：

工具	主要职责	典型规则示例	不可替代性
ESLint	代码质量与最佳实践	no-unused-vars, no-console	逻辑错误检测
Prettier	代码风格与格式	semi, singleQuote, printWidth	自动格式化的一致性
VSCode	工具集成与自动化工作流	formatOnSave, defaultFormatter	开发体验的核心载体

常见的配置误区是将所有规则都交给 ESLint 处理。实际上，Prettier 更适合处理纯样式问题（如分号、引号），而 ESLint 应该专注于逻辑问题。当两者规则冲突时，需要特殊处理：

# 必须安装的冲突解决包
npm install --save-dev eslint-config-prettier

这个包会关闭所有与 Prettier 冲突的 ESLint 样式规则，让两个工具完美配合。

2. 基础环境配置

2.1 必备插件安装

在 VSCode 扩展商店中搜索并安装以下三个核心插件：

1. ESLint (作者：Microsoft)
2. Prettier - Code formatter (作者：Prettier)
3. Vetur (如果是 Vue 项目，作者：Pine Wu)

注意：安装后务必重启 VSCode 以确保插件完全激活。有些格式化功能在首次使用时需要编辑器重启才能生效。

2.2 项目级依赖安装

在项目根目录下执行：

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

对于 Vue 项目，还需要额外的 ESLint 插件：

npm install --save-dev eslint-plugin-vue @vue/eslint-config-prettier

3. 配置文件深度定制

3.1 VSCode 设置 (settings.json)

在项目根目录创建 .vscode/settings.json 文件，内容如下：

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

关键配置说明：

• formatOnSave：保存时自动格式化
• codeActionsOnSave：保存时自动修复 ESLint 可自动修复的问题
• prettier.semi：禁用分号
• prettier.singleQuote：强制单引号

3.2 ESLint 配置 (.eslintrc.js)

创建或修改项目根目录下的 .eslintrc.js：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 必须放在最后
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true,
        printWidth: 100,
      },
    ],
  },
};

对于 Vue 项目，extends 数组应该包含 Vue 相关配置：

extends: [
  'plugin:vue/recommended',
  'eslint:recommended',
  '@vue/prettier',
  'plugin:prettier/recommended'
],

4. 高级配置与疑难解答

4.1 解决常见冲突场景

即使配置正确，某些情况下仍可能出现问题：

场景一：格式化后 ESLint 报错 这是因为 Prettier 的格式化结果与 ESLint 规则冲突。解决方案：

1. 确认已安装 eslint-config-prettier
2. 确保 extends 数组中 'plugin:prettier/recommended' 在最后

场景二：Vue 文件中的 HTML 属性换行问题 添加以下 Prettier 配置：

{
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "htmlWhitespaceSensitivity": "ignore"
    }
  }
}

4.2 团队统一配置方案

为了确保团队所有成员使用相同的配置，推荐以下实践：

1. 将 .vscode/settings.json 提交到代码仓库
2. 在 package.json 中固定所有相关依赖的版本号
3. 添加 pre-commit 钩子，在提交前自动运行：

npx mrm lint-staged

然后在 package.json 中添加：

"lint-staged": {
  "*.{js,jsx,vue}": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ]
}

5. 个性化风格定制

虽然本文推荐无分号+单引号的风格，但工具链完全支持其他风格。只需修改对应配置：

// 使用双引号+分号风格
{
  "prettier.semi": true,
  "prettier.singleQuote": false
}

对应的 ESLint 规则：

rules: {
  'prettier/prettier': [
    'error',
    {
      semi: true,
      singleQuote: false
    }
  ]
}

实际项目中，风格选择应该通过团队讨论确定，然后在项目文档中明确记录，并通过这套工具链强制执行。