VS Code扩展Prettier不生效，按CTRL+S保存HTML文件无格式化效果如何解决？

常见原因 #

• 项目根目录无合法Prettier配置文件（如.prettierrc、.prettierrc.json），或配置文件存在语法错误
• 待格式化的HTML文件本身存在语法错误，Prettier无法正常解析
• 编辑器配置冲突：同时开启多个格式化工具（如ESLint、内置HTML格式化器等），默认格式化器未指定为Prettier
• Prettier编辑器插件版本与项目本地安装的Prettier依赖版本不兼容
• 未开启「保存时自动格式化」配置，或HTML文件类型未被纳入Prettier格式化生效范围
• 当前工作区文件夹权限不足，Prettier无法读取配置或写入修改后的文件

修复步骤 #

你可以先点击状态栏的感叹号查看具体报错日志，根据提示定向修复，通用操作如下：

• 确认基础格式化配置：打开编辑器设置，搜索default formatter，将默认格式化器设置为esbenp.prettier-vscode，再搜索format on save，勾选该选项开启保存自动格式化
• 修正Prettier配置：项目级使用时，在根目录新增合法的Prettier配置文件，示例参考：

// .prettierrc.json
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css"
}

注意删除配置文件中的错误语法项，保证JSON格式合法

• 排查HTML语法问题：手动检查当前HTML文件是否存在未闭合标签、属性引号缺失等基础语法错误，修复后重试
• 解决版本兼容问题：如果项目本地安装了Prettier依赖，保证编辑器Prettier插件版本与项目依赖版本一致，也可以在设置中开启Prettier: Use Global Config使用全局安装的Prettier
• 排除工具冲突：在HTML文件编辑界面右下角，点击「选择格式化程序」，单独指定HTML文件的默认格式化器为Prettier，禁用其他针对HTML的格式化插件
• 修复权限问题：确保当前工作区文件夹有读写权限，Windows系统可尝试用管理员身份启动编辑器，macOS/Linux系统可修改文件夹权限为可读写

内容的提问来源于stack exchange，提问作者Dsthsnrbg