在日常的 JavaScript 开发中，代码格式化是保持项目整洁、提升可读性的关键环节。Visual Studio Code（VS Code）作为当前最流行的代码编辑器之一，其内置格式化工具和丰富的扩展生态为开发者提供了极大的便利。然而，最近不少开发者反映，在格式化 JavaScript 或 TypeScript 代码时，花括号 } } 之间会莫名其妙地出现多余空格，尤其是在多行对象、数组或代码块嵌套的场景下。这一看似微小的问题，却可能影响代码风格的一致性，甚至导致代码检查工具（如 ESLint）报错。本文将深入剖析这一现象的成因，并提供多种高效解决方案。

问题表现：格式化后“多余空格”从何而来？

假设你有一段 JavaScript 代码：

const obj = {
  a: 1,
  b: { c: 2 }
}

当你使用 VS Code 的默认格式化快捷键（Shift + Alt + F）或保存时自动格式化后，可能变成：

const obj = {
  a: 1,
  b: { c: 2 } }

注意倒数第二行末尾的 } } 之间多了一个空格。更常见的场景是在箭头函数、条件语句或模板字符串中：

// 期望
const fn = () => {};

// 格式化后
const fn = () => { };

这类空格问题往往与 VS Code 的格式化配置、扩展（如 Prettier、ESLint）以及语言服务（如 TypeScript/JavaScript 内置格式化器）之间的冲突有关。

原因分析：谁在添加这个空格？

要解决问题，首先需要定位“肇事者”。常见的可能原因包括：

  1. VS Code 默认格式化引擎：旧版本的 VS Code 在处理某些语法结构时，会错误地在空代码块或嵌套括号间插入空格。
  2. Prettier 扩展：作为最流行的代码格式化工具，Prettier 默认会在空对象 {} 内部添加一个空格（即 { }），但这一行为通常可以通过配置关闭。
  3. ESLint 与格式化器冲突：如果项目中同时启用了 ESLint 的 space-in-parens、object-curly-spacing 等规则，可能会与格式化器产生叠加效果。
  4. 多扩展干扰：安装了多个格式化扩展（如 Beautify、JS-CSS-HTML Formatter），导致格式化规则被覆盖或混淆。

解决方案：针对不同场景的详细步骤

方案一：调整 VS Code 内置格式化的设置

如果你仅使用 VS Code 内置的 JavaScript 格式化工具，且不希望额外安装扩展，可以修改 settings.json：

  1. 打开命令面板（Ctrl+Shift+P），输入“Preferences: Open Settings (JSON)”。
  2. 添加或修改以下配置项：
{
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBrackets": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBrackets": false
}

其中，NonemptyBrackets 控制非空花括号内是否插入空格，EmptyBrackets 控制空花括号。将两者都设为 false 即可消除多余空格。

方案二：使用 Prettier 并关掉花括号内空格

Prettier 默认会在空对象 {} 内部添加空格，但你可以通过 .prettierrc 配置文件覆盖：

{
  "bracketSpacing": false
}

该选项设置为 false 后，{ } 会变为 {}，同时 } } 之间的多余空格也会消失。注意：Prettier 不会在非空对象内部添加额外空格，因此此设置主要针对空代码块场景。

方案三：统一使用 ESLint 的格式化能力

如果你的项目中已经使用了 ESLint，可以借助 eslint-plugin-prettier 或直接让 ESLint 接管格式化，并配置相应规则：

在 .eslintrc.json 中添加：

{
  "rules": {
    "object-curly-spacing": ["error", "never"],
    "array-bracket-spacing": ["error", "never"],
    "computed-property-spacing": ["error", "never"]
  }
}

"never" 表示花括号、方括号内部不添加空格。同时，禁用 VS Code 的默认格式化器，仅让 ESLint 负责格式化。

方案四：排查并禁用冲突扩展

有时问题源于安装的多个格式化扩展。可以在 VS Code 扩展面板中逐个禁用非必要的格式化工具，测试格式化结果。推荐保留一个主要格式化器（如 Prettier 或 ESLint），并确保设置中将该扩展设为默认：

在 settings.json 中指定：

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

验证与总结

完成配置后，重新格式化代码并检查是否仍有空格。建议在项目根目录创建 .editorconfig 文件，统一团队成员的编辑器设置，避免因个人环境差异导致的风格不一致。

花括号间多余空格虽是小细节，却直接反映了代码格式化的严谨性。通过上述方法，开发者可以根据项目需求灵活调整，让 VS Code 的格式化输出完全符合团队规范。毕竟，干净的代码不仅让机器易于解析，更让开发者心情愉悦。未来，随着 VS Code 和扩展工具的持续更新，相信这类格式化问题会越来越少，但掌握排查和解决思路，依然是每位前端开发者必备的“排雷”技能。