在 VS Code 中设置 Prettier 为默认代码格式化工具

问题描述

当你在 VS Code 中安装 Prettier 扩展后，尝试格式化文件时，可能会遇到系统提示：

您想要使用默认格式化程序还是 Prettier 格式化程序？

如果你不小心选择了默认格式化程序，之后想要更改为 Prettier 作为默认格式化程序，本指南将提供详细的解决方案。

解决方案

方法一：通过右键菜单快速设置（推荐）

这是最简单直观的方法，特别适合刚接触 VS Code 的用户：

在任意文件中右键单击
选择 使用...格式化文档 选项
在下拉菜单中选择 配置默认格式化程序...
从列表中选择 Prettier - Code formatter

提示

完成此设置后，下次查看格式化选项时，Prettier 旁边会显示 (默认) 标记。

方法二：通过图形界面设置

如果你想更精确地控制设置：

按下 Ctrl + , 打开设置界面
在搜索框中输入 default formatter
找到 Editor: Default Formatter 设置
从下拉菜单中选择 Prettier - Code formatter
（可选）搜索 Format on Save 并勾选复选框以启用保存时自动格式化

方法三：通过命令面板设置

按下 Ctrl + Shift + P 打开命令面板
输入 Format Document
选择格式化命令
如果出现提示，选择 Prettier - Code formatter 作为默认格式化程序

方法四：直接编辑 settings.json 文件

对于高级用户，可以直接编辑 VS Code 的设置文件：

按下 Ctrl + , 打开设置
点击右上角的打开文件图标（将鼠标悬停显示"打开设置(JSON)"）
在 settings.json 文件中添加以下配置：

json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

如果你想为特定文件类型设置 Prettier 为默认格式化程序，可以使用以下配置：

json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注意事项

重要提示

在设置之前，请确保：

已经安装了 "Prettier - Code formatter" 扩展
扩展已启用
VS Code 已更新到最新版本

快捷键提醒

Shift + Alt + F：手动格式化当前文档（不保存）
启用 Format on Save 后，保存时会自动格式化

故障排除

如果设置后 Prettier 仍然不能正常工作：

检查扩展是否已正确安装和启用
重启 VS Code
确认没有其他格式化扩展与 Prettier 冲突
查看 VS Code 右下角的状态栏，确认当前语言模式是否正确

通过以上任一方法，你都可以成功将 Prettier 设置为 VS Code 的默认代码格式化工具，享受统一的代码风格和自动格式化功能。

相关文章

在 VS Code 中设置 Prettier 为默认代码格式化工具 ​

问题描述 ​

解决方案 ​

方法一：通过右键菜单快速设置（推荐） ​

方法二：通过图形界面设置 ​

方法三：通过命令面板设置 ​

方法四：直接编辑 settings.json 文件 ​

注意事项 ​

故障排除 ​