11个VS Code工作区格式化配置，全栈必备

▌ 技术引导 11个VS Code工作区格式化配置，我见过的全栈开发者几乎都踩过这个坑。配置太多，工具链太乱，格式化规则不统一，代码质量直线下滑。最值钱的信息是，如何用最少的配置覆盖最多语言，让格式化过程可控、可复用、可调试。别再傻乎乎地克隆配置仓库，自己搭个模板，把格式化逻辑怼到 `.vscode/settings.json` 里，用 `prettier` 搭配 `eslint`，配置 `formatOnSave` 完全不香。详细说，就是用 `javascript` 语言的 `format` 作为核心，然后通过 `prettier` 的 `.prettierrc` 指定语言类型，用 `eslint` 的 `settings` 表达排除规则，最后让 `.vscode` 目录的 `settings.json` 成为格式化规则的总控开关。我见过有些人格式化完代码反而更难看，就是没设好语言检测和排除规则。别再搞那种万能格式化配置了，太傻。 我见过太多人为了格式化规则卡了几天，最后发现是 `.gitignore` 把配置文件排除了。别让配置文件被藏起来，放在 `.vscode` 里，干活的时候直接调用。格式化工具要按语言分治，别搞混，否则你写的 React 代码会被 Prettier 格式成 Vue 的风格，这玩意没救。关键是 `formatOnSave` 和 `formatOnType` 不能同时开，否则会死循环，代码刚写完又格式化一遍，真恶心。还有人问怎么在不同项目之间切换格式化规则，其实只要把 `.vscode` 目录复制粘贴到项目根目录，就能瞬间切换。 如果你用 `Prettier` 做格式化，必须知道 `semi` 参数的真谛，它决定是否添加分号，绝对不能放任系统自动决定，得手动写死。用 `eslint` 的 `rules` 覆盖格式化规则时，最好设置 `no-formatting` 为 `off`，否则会冲突。我见过有人用 `clang-format` 格式化 C++ 代码，结果被 `.prettierrc` 搞 die，因为默认规则不支持。如果用 `prettier` 格式化 TypeScript，别忘了加 `typescript` 到 `prettier` 的配置 `fileExtensions` 里，否则它会当没看见。 还别用那个什么 `formatOnSave` 通配符系统，它会把所有文件格式化一遍，哪怕你根本没改，这浪费时间。得用 `eslint` 的 `format` 命令，配合 `prettier` 的 `--write` 参数，只格式化你改过的文件。最稳的配置是 `formatOnSave` 关闭，用 `eslint` 触发格式化动作，这样更可控。格式化工具要按语言区分，不要统一用一个，否则就会有乱序问题。别再相信什么“全语言统一格式”的神话，那根本不现实，只会让你的代码看起来像屎。 我见过有的项目用 `prettier` 格式化 JSON 文件，结果 JSON 里的注释被删除了，因为 `prettier` 默认不处理注释。所以得在 `.prettierrc` 里加 `printWidth: 100` 或 `tabWidth: 4`，确保格式化不会造出屎。还有人用 `prettier` 格式化 markdown 时，把代码块格式化成 `js` 或 `ts` 的方式，这得多蠢。得用 `markdownlint` 管理 markdown 的格式，别让 `prettier` 混入。总之，格式化配置不是随便写几个参数就能解决的，得讲究语言区分、规则分层、动作分治，否则你的代码质量根本提不上来。 ▌ 技术参考 一 用 `.vscode/settings.json` 做通用格式化配置 VS Code 格式化控制中枢是 `.vscode/settings.json`，里面可以通过 `editor.formatOnSave` 和 `editor.formatOnType` 控制格式化时机。我见过太多人把所有配置写到 `settings.json` 里，结果格式化规则冲突。其实只要在 `.vscode` 目录下放 `.prettierrc`、`.eslintrc`，再配合 `extensions` 的格式化插件，就能离线控制。比如设置 `editor.defaultFormatter` 为 `esbenp.prettier-vscode`，再指定 `editor.formatOnSave` 为 `true`，就能让所有文件在保存时自动格式化。但别忘了，有些项目需要 `formatOnType`，比如前端代码，实时格式化能减少视觉污染。 二 用 `prettier` 管理多语言格式化规则 `prettier` 能格式化 `js`、`ts`、`css`、`scss`、`html`、`vue`、`jsx`、`json`、`yaml` 等多种语言，但前提是你得写好 `.prettierrc`。比如配置 `printWidth: 100`、`tabWidth: 2`、`semi: false`、`trailingComma: 'es5'`、`bracketSpacing: true`，这些参数直接决定代码风格。我见过有人用 `prettier` 格式化 JSON 文件时，把注释自动删了，这完全是 `prettier` 默认行为。为了避免，可以在 `.prettierrc` 里加 `ignorePath: '.prettierignore'`，然后在 `.prettierignore` 里排除 `.json`，或者写一个专门的 `prettier.json` 用于 JSON 文件。 三 用 `eslint` 配合格式化规则管理 `eslint` 的 `rules` 可以用来覆盖格式化规则，比如禁用 `no-formatting`，让代码不被格式化。但如果你用 `eslint` 和 `prettier` 一起，就必须配置 `eslint-config-prettier` 来避免冲突。我见过有人在 `eslint` 中设置 `no-undef: 'error'`，结果格式化时把 `const` 改成 `var`，导致警告一堆。这种情况下，可以把 `no-undef` 改为 `warn`，或者用 `eslint-plugin-prettier` 来让 `prettier` 的规则覆盖 `eslint` 的规则。关键点是 `eslint` 不能替代 `prettier`，两者要分工明确，`eslint` 管语法，`prettier` 管格式，别混用。 四 用 `.prettierignore` 排除不需要格式化的文件 `.prettierignore` 是一个关键工具，用来排除不需要格式化的文件，比如 `node_modules`、`dist`、`.env`、`.log`。我见过有人在 `.prettierrc` 里写 `ignorePath: true`，结果格式化工具忽略掉 `.prettierrc`，导致配置文件本身也被格式化。这种情况下，必须在 `.prettierrc` 里显式写 `ignorePath: '.prettierignore'`，这样就能确保 `.prettierrc` 不被格式化。另外，有些项目需要排除 `.d.ts` 或 `.tsx`，可以直接在 `.prettierrc` 里加 `exclude: ['/.d.ts', '/.tsx']`。 五 格式化规则冲突的解决办法 格式化规则冲突是最常见的坑。比如你用了 `prettier`，还用了 `eslint`，结果 `prettier` 把 `eslint` 的规则格式化了。解决办法是用 `eslint-plugin-prettier`，这样 `prettier` 的规则就会被 `eslint` 优先执行。或者用 `prettier-eslint`，让 `prettier` 读取 `eslint` 的规则。我见过有人用 `prettier` 格式化 `vue` 文件时，把 `.vue` 的 `` 标签格式化成不带缩进的写法，这完全是因为 `prettier` 的默认行为。要解决这个问题，必须在 `.prettierrc` 里加 `vuePrintWidth: 80`，或者在 VS Code 的 `settings.json` 里加 `prettier.vuePrintWidth: 80`。 六 用 `vsce` 搭建格式化模板库 如果你是团队开发者，可以考虑用 `vsce` 搭建格式化模板库。比如在 `.vscode` 目录下放多个 `settings.json`，然后通过 `vsce` 打包成扩展，这样就能复用配置。我见过有人用这个方法给不同项目建不同的格式化规则库，比如前端项目用 `prettier`，后端用 `clang-format`，数据库用 `sqlfluff`。这种方法虽然复杂，但能保证每个项目有专属的格式化规则，不会互相干扰。关键是 `vsce` 配合 `vsce` 的命令行工具，能快速生成 `vsix` 文件。 七 在 `settings.json` 中控制格式化动作 `settings.json` 中的 `editor.formatOnSave` 和 `editor.formatOnType` 是两个关键开关。我见过有人把 `formatOnSave` 开了，结果每次保存都格式化一次，导致开发效率下降。更合理的做法是只在 `formatOnType` 上开启，这样写代码的时候自动格式化，但保存时不自动。或者用 `formatOnSave: true` 但是配合 `eslint` 的 `format` 命令，这样只有在保存时触发格式化，不会像 `prettier` 那样暴力。另外，`settings.json` 中的 `editor.defaultFormatter` 会影响格式化工具的选择，必须确保它指向 `prettier` 或 `eslint`。 八 VS Code 格式化命令行参数控制 VS Code 有命令行工具，比如 `code --format` 可以格式化整个项目。我见过有人用 `code --format` 但没指定规则，导致所有文件都被格式化。解决方法是用 `code --format --config-path .vscode/settings.json`，这样就能指定配置文件。另外，`code` 命令支持 `--workspace` 参数，可以指定多个工作区文件，这样就能统一管理多个项目。这种操作在 CI/CD 中特别有用，能确保部署前格式化完所有代码。 九 用 `formatOnSave` 和 `eslint` 分工协作 把 `formatOnSave` 和 `eslint` 分开来用，能减少冲突。比如在 `settings.json` 中设置 `formatOnSave: true`，然后用 `eslint` 的 `format` 命令来格式化代码。这样就能保证 `prettier` 的规则不被 `eslint` 覆盖。我见过有人在 `eslint` 中设置了 `no-formatting: 'error'`，结果 `prettier` 还是格式化，因为 `eslint` 不支持这个规则。这时候就得用 `eslint-plugin-prettier`，让 `prettier` 的规则覆盖 `eslint` 的规则。这种分工能减少很多不必要的错误。 十 格式化工具选型和配置顺序 格式化工具选型很关键，比如 `prettier` 和 `eslint` 不能混用。我见过有人用 `prettier` 格式化 `js` 代码，结果 `eslint` 把 `const` 改成了 `var`，这完全是配置错误。正确的做法是先用 `eslint` 检查语法，再用 `prettier` 格式化，这样就能避免冲突。`prettier` 的配置顺序也很重要，比如 `.prettierrc` 优先级高于 `settings.json`，如果配置冲突，优先用 `.prettierrc`。还有人问怎么在 VS Code 中设置格式化工具为 `prettier`，其实只需要在 `settings.json` 中写 `editor.defaultFormatter: 'esbenp.prettier-vscode'` 就行。 十一 格式化后的代码质量保障 格式化不等于质量保障，但能作为质量控制的一部分。比如在 `eslint` 中设置 `no-mixed-spaces-and-tabs: 'error'`，能确保代码缩进统一。我见过有人用 `prettier` 格式化代码后，发现 `eslint` 的警告反而多了，因为格式化工具改了某些写法。这时候就得用 `eslint` 的 `format` 命令，确保格式化后的代码符合 `eslint` 的规则。`prettier` 的 `printWidth` 参数设置到 `100` 会更合理，否则代码会变成一个长串，影响可读性。 十二 用 `vsce` 构建格式化模板库 我之前搭建过一个格式化模板库，里面放了多个 `.vscode` 目录。比如前端项目用 `prettier`，后端项目用 `clang-format`，数据库项目用 `sqlfluff`。这样就能快速切换格式化规则。每个 `.vscode` 目录都有自己的 `settings.json`、`.prettierrc`、`.eslintrc`。用 `vsce` 打包成 `.vsix` 文件，然后在 VS Code 中安装，就能统一管理多个项目。这种方法虽然复杂，但能保证每个项目有专属配置，不会互相影响。 十三 格式化工具的性能影响 格式化工具会影响开发效率，尤其是大项目。我见过有人用 `prettier` 格式化 `ts` 代码，结果每次保存都卡顿。这时候就得用 `prettier` 的 `--no-write` 参数，避免写入文件。或者在 `settings.json` 中加 `prettier.semi: false`，减少格式化次数。`prettier` 的 `printWidth` 设置到 `100` 会更合理，否则代码会写成一行，影响阅读。格式化工具的性能优化关键在于配置参数和文件类型过滤，别用 `prettier` 格式化所有文件，只选特定类型。 十四 格式化后的代码版本控制 格式化后的代码容易产生无意义的 diff，影响代码审查。我见过有人用 `husky` + `lint-staged` 来控制格式化，这样在 commit 前自动格式化。这能减少格式化导致的 diff。`lint-staged` 可以指定哪些文件需要格式化，比如 `.js`、`.ts`、`.vue`，这样就能避免格式化非关键文件。用 `prettier` + `husky` 会更稳定，别用 `eslint` + `husky`，因为 `eslint` 会自动修改代码，反而更麻烦。 十五 格式化规则的调试技巧 调试格式化规则是关键，别直接依赖工具。我见过有人格式化后的代码和预期不符，结果通过 `prettier` 的 `--print-width` 参数，发现是 `printWidth` 设置错了。这时候就得用 `prettier` 的 `--write` 参数来测试，比如 `prettier --write --log-level debug`，这样就能看到详细的格式化过程。还有人用 `prettier` 的 `--parser` 参数来指定解析器，比如 `--parser typescript`，这样能避免 `prettier` 把 `ts` 文件当成 `js` 处理。调试工具要开 `--log-level debug`，这样才能看到具体错误。