如何在VSCode中安装并配置Prettier美化前端代码

如何在VSCode中安装并配置Prettier美化前端代码

直接装插件就行，但必须关掉自带格式化

很多开发者初次接触Prettier时，会以为装个插件就万事大吉。殊不知，VSCode自带的Ja vaScript和CSS格式化器（比如vscode-eslint或typescript-language-features）会与Prettier产生冲突。结果就是保存文件时，两套规则反复“打架”——你刚看到缩进变成了两空格，下一秒又弹回四空格；单引号被强制改成双引号，然后又改回来。这种体验，着实让人头疼。

所以，安装完Prettier插件后的第一要务，不是急着写配置，而是先关掉VSCode的默认格式化器。具体操作路径很清晰：进入设置 → Text Editor → Formatting，首先确保Format On Sa ve是开启状态；接着，关键一步是将Default Formatter修改为esbenp.prettier-vscode；最后，为了更安全可控，建议把Format On Sa ve Mode设置为modifications，这样它只会格式化你修改过的行，避免意外改动大量代码。

项目级配置优先于全局配置

在单人开发时，或许可以依赖VSCode的全局设置。但一旦进入多人协作或跨项目开发场景，问题就来了：你在全局settings.json里写的"prettier.singleQuote": true，很可能在其他同事的机器上失效，或者不小心覆盖了别人的代码风格偏好。

更规范、更可靠的做法是什么？答案是：项目级配置。在项目的根目录下，创建一个名为.prettierrc的配置文件。文件内容用JSON或YAML格式书写即可，例如：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

VSCode的Prettier插件会自动识别并优先采用这个项目级配置文件，其优先级高于用户级的settings.json。这里有个小提示：虽然也支持.prettierrc.js这种JS格式，但如果项目是纯前端环境或担心CI构建、队友本地环境不一致，建议还是使用JSON或YAML，避免不必要的麻烦。

立即学习“前端免费学习笔记（深入）”；

和ESLint共存必须用eslint-config-prettier

如今的项目，ESLint几乎是标配。那么问题来了：当Prettier遇上ESLint，两者职责有重叠怎么办？比如，no-console这类代码质量规则归ESLint管，而max-len（最大行长度）这类格式规则，两边可能都会检查。如果不做处理，你就会看到保存后代码被Prettier格式化了，但ESLint依然标红提示“该行超长”，令人困惑。

解决这个冲突，需要三步走：

• 首先，安装eslint-config-prettier这个包：npm install --sa ve-dev eslint-config-prettier
• 接着，在项目的.eslintrc.js配置文件中，找到extends数组，确保在它的末尾加上'prettier'。这个顺序至关重要，必须放最后，否则它会被前面的ESLint规则覆盖而失效。
• 最后，确认没有启用eslint-plugin-prettier的自动修复功能。这个插件会让ESLint去调用Prettier，反而可能增加保存时的延迟，让体验变卡顿。

Vue/React文件需要额外声明解析器

Prettier默认的解析器，对于.vue单文件组件里的