代码审查配置VS Code代码格式化，全网最详细

▌ 技术引导
配置VS Code代码格式化，别再用插件瞎折腾了。用内置的格式化工具，配合预设的配置文件，能直接解决90%的格式化问题。我做这件事的时候，第一件事就是搞清楚Prettier和ESLint在2024年之后的集成方式，特别是针对TypeScript和React项目。
直接装Prettier和ESLint插件，然后在VS Code的settings.json里配置formatter。这时候别忘了设置“formatOnSave”为true，不然每次手動格式化都得点那个按钮，效率低到爆。还有，格式化的时候会自动检查代码，所以得先装ESLint插件并设置规则，不然格式化会报错。
实际操作中，我发现很多项目用Prettier但没配置好，导致格式化结果乱七八糟。比如缩进是4个空格，结果你的项目要求2个，格式化就冲突了。所以提前写好配置文件，直接导入，别硬编码。
如果项目用的是ESLint，那格式化命令应该是`eslint --fix`，配合Prettier一起用。这时候要确保Prettier在ESLint的配置里被正确调用。另外，有些项目用ESLint的autofix，结果发现格式化之后代码还是有问题，这说明配置文件没写对。
最常见的是用户误以为VS Code默认格式化就能搞定，其实不是。必须手动设置格式化工具和规则，不然写出来的代码乱成狗。配置文件要放对位置，比如根目录下的`.prettierrc`和`.eslintrc`，不然VS Code根本不知道怎么处理。

▌ 技术参考

一
代码格式化配置的核心在于定义规则和选择工具。VS Code本身没有内置的格式化工具，但支持通过插件或内置配置调用Prettier、ESLint、prettier-eslint等。2025年之后，Prettier与ESLint的集成更加紧密，推荐使用prettier-eslint插件来统一处理。配置文件要放在项目根目录，比如`.prettierrc`和`.eslintrc`，这样VS Code才能找到并加载。格式化时的缩进、换行、引号等参数要根据项目要求统一，否则会引发版本差异问题。

二
在VS Code中配置格式化，首先要打开命令面板（Ctrl+Shift+P），输入“Preferences: Open Settings (UI)”，然后找到“Editor: Default Formatter”选项。这里直接选Prettier或prettier-eslint。如果项目用的是TypeScript，可以通过安装`prettier-eslint`插件，并在`settings.json`中配置`"editor.defaultFormatter": "esbenp.prettier-eslint"`。这样就能直接触发Prettier和ESLint的联合格式化流程。
配置文件的优先级比全局设置高，所以必须确保`.prettierrc`和`.eslintrc`在项目根目录。比如在React项目中，可以在`eslintConfig`中设置`rules`，并在`prettier`的配置里指定`trailingComma`为"es5"，这样就能保证代码风格统一。另外，格式化命令要写成`eslint --fix`，而不是简单的`eslint`，这样格式化结果才完整。

三
配置过程中最容易出错的是格式化工具的调用顺序和规则冲突。比如在2024年中期，有些项目同时使用Prettier和ESLint，但没设置好prettier-eslint的优先级，结果格式化后代码又变回原来的样子。这时候需要在`settings.json`里设置`"prettier.printWidth": 80`，并确保`"prettier.trailingComma": "es5"`，这样能避免不必要的换行和逗号问题。
还有一种情况是，用户在设置里启用了`"editor.formatOnSave": true`，结果格式化之后发现代码又乱了。这时候要检查ESLint的配置是否允许格式化，比如`"eslintIntegration": true`。另外，有些项目会使用`eslint --fix`来格式化，但实际运行时发现代码没变，这说明配置文件没有正确设置，或者项目没有运行这个命令。

四
配置格式化工具时，最好用`.prettierrc`来统一控制代码风格。比如在TypeScript项目中，可以设置`"semi": false`，避免在语句末尾加分号。同时，`"trailingComma": "all"`可以保证对象或数组的最后一个元素后面有逗号，这样在团队协作中更统一。
如果项目使用了Tailwind CSS，那么Prettier配置里要加上`"tailwindConfig": "./tailwind.config.js"`，这样能够正确识别Tailwind的类名格式，避免格式化破坏类名结构。另外，VS Code的格式化工具会优先使用项目根目录下的配置文件，而不是全局设置，所以一定要确保配置文件位置正确。

五
在2026年，Prettier已经支持多种语言，包括JavaScript、TypeScript、CSS、HTML等。配置文件可以是JSON、YAML或TSX格式，具体要看项目需要。比如对于React项目，可以使用`"prettier.jsxBracketSameLine": true`来控制JSX标签是否在同一行，这样能减少不必要的换行。
当格式化失败时，VS Code会提示错误信息，这时候要检查配置文件是否正确。比如`"prettier.singleQuote": true`是否被正确应用，或者`"prettier.tabWidth": 2`是否被覆盖了。另外，有些项目会使用`"prettier.printWidth": 100`来增加行宽，避免过多换行，这在团队协作中非常实用。

六
格式化工具的配置会影响代码效率。比如Prettier的`printWidth`设置为80，会比设置为100更节省时间，因为它减少了换行次数。而ESLint的`fix`模式会自动修复格式问题，但有时候会误删代码，这时候需要手动检查。
在2025年，VS Code的格式化工具已经能识别多个配置文件，比如`.prettierrc`、`.eslintrc`和`prettier.config.js`。这时候，最好在项目中统一使用`prettier.config.js`，这样配置更清晰，也更不容易出错。同时，`prettier-eslint`插件的版本要和ESLint、Prettier保持一致，否则会出现兼容性问题。

七
格式化配置的适用场景主要是团队协作或者大型项目。如果是单人开发，格式化工具反而会限制你的写作风格，导致效率下降。比如在2024年时，有些开发者因为格式化规则太严格，导致写代码时不得不反复调整，影响了开发节奏。
而如果是团队项目，格式化配置能极大减少代码风格不一致的问题。比如在React+TypeScript的项目中，统一使用`"prettier.trailingComma": "es5"`和`"prettier.semi": false`，这样每个人写出来的代码都能保持一致。同时，代码审查时格式化错误能直接被ESLint捕获，提高整体代码质量。

八
对于某些老旧项目，没有配置文件，只能手动设置。比如在2024年，有些遗留项目用的是ESLint 7版本，这时候prettier-eslint可能不兼容，得先升级ESLint到8版本。或者项目里没有Prettier，这时候可以手动安装，然后通过`npm install --save-dev prettier`引入。
如果项目里有多个配置文件，比如`.prettierrc`和`.eslintrc`，这时候要注意优先级问题。VS Code会优先加载项目根目录下的配置，所以如果全局配置和项目配置冲突，应该以项目配置为准。此外，格式化工具的参数可以放到命令行里，比如`prettier --write "src//.ts"`可以只格式化指定文件夹，而不是整个项目。

九
在2025年，VS Code的格式化工具已经被广泛用于前端项目，尤其是在React、Vue和Angular中。配置的时候，注意不要遗漏`"formatOnSave": true`，这样每次保存就能自动格式化。但有时候这个选项会导致格式化太频繁，影响性能。这时候可以设置`"editor.formatOnType": false`来减少不必要的格式化。
格式化工具的性能表现跟项目规模有关。比如在2025年，一个有500个文件的React项目，使用Prettier+ESLint组合格式化，大约需要3秒。如果是用ESLint单独格式化，可能需要更长的时间，因为ESLint会逐行检查并修复。所以最好用Prettier先处理，再用ESLint修复错误。

十
格式化配置的局限性在于无法覆盖所有代码风格问题。比如有些项目使用了自定义的代码规范，这时候Prettier和ESLint可能不适用。或者某些工具链强制要求特定格式，这时候就得用其他方式处理。
在2026年，很多项目开始使用ESLint的`@typescript-eslint/eslint-plugin`来替代Prettier，这样能更精确地控制类型相关的代码风格。比如在TypeScript项目中，`@typescript-eslint/eslint-plugin`可以检测空格、分号、括号等，而Prettier主要处理格式。这时候需要在`settings.json`里关闭Prettier的格式化选项，只让ESLint处理。

十一
替代方案是使用`eslint --fix`命令来格式化代码。比如在2024年底，很多团队改用这个命令来替代VSC的格式化工具，因为它更直接，也不容易出错。如果项目中有大量代码需要格式化，可以写一个npm脚本，比如`"format": "eslint --fix"`，然后在终端里运行。
另外，在2025年，VS Code支持通过`format`命令来触发格式化操作，比如在终端输入`code --format`，这样就能直接格式化整个项目。这种方法适合在CI/CD中使用，因为它不需要打开编辑器，也能自动化处理代码风格问题。

十二
进阶技巧是将格式化配置和代码审查结合起来。比如在2024年，有些团队会用ESLint的`fix`模式来检查格式错误，同时将错误类型设置为`error`，这样代码审查时就能直接看到问题。比如在`eslintrc.js`中设置`"rules": {"prettier/prettier": "error"}`，这样就能让人看到格式错误，而不是忽略。
另外，格式化配置可以结合代码规范工具使用。比如在2025年，有些项目会用`stylelint`来检查CSS格式，这时候可以用`prettier-stylelint`插件来统一处理，这样代码审查时就能同时检查格式和规范问题。

十三
配置格式化工具时，有时候会遇到第三方库的不兼容问题。比如2024年，有些库的代码结构不符合Prettier的规则，这时候需要在配置文件中添加`"prettier.ignorePath": ".prettierignore"`，这个文件可以用来排除不需要格式化的文件。
如果项目里有自己写的工具库，也可以在`.prettierignore`里添加路径，比如`src/utils//.ts`，这样就不会误格式化这些文件。此外，`prettier-eslint`插件在处理某些TSX文件时可能会报错，这时候需要在配置里设置`"prettier-eslint.checkOnSave": false`，避免保存时触发不必要的检查。

十四
在2026年，VS Code的格式化工具已经能支持多种语言和框架。比如在Vue项目中，可以使用`prettier`和`eslint-plugin-vue`结合，这样就能同时处理HTML、JSX和Vue组件的格式。配置上要注意`"prettier.vueIndentWidth": 2`，这样Vue组件的缩进就能保持一致。
如果项目使用了Tailwind CSS，需要在Prettier配置里加上`"tailwindConfig": "./tailwind.config.js"`，这样Tailwind的类名格式就不会被破坏。此外，`prettier`的`printWidth`设置为80，能有效避免代码被频繁换行，提升可读性。

十五
格式化配置的优化点在于减少不必要的检查。比如在2024年，很多项目会把ESLint的规则设置为`error`，但实际开发中，很多规则是不必要的。这时候可以将规则改为`warn`，这样格式错误不会直接阻止代码提交，但会提醒开发者。
在2025年，VS Code支持格式化范围选择，比如通过快捷键`Ctrl+Shift+I`来格式化当前文件，或者`Ctrl+Shift+K`来格式化整个项目。这种细粒度的控制能提升效率，避免格式化不必要的代码。此外，`prettier-eslint`插件在2026年加入了`checkOnSave`选项，这样保存时会自动检查并格式化代码，减少手动操作。