VS Code中Format on Save仅对PHP文件生效，如何适配HTML/JS文件？

1. 安装对应语言的格式化插件 #

VS Code原生对HTML/JS的格式化支持有限，必须搭配专用插件才能生效：

• JavaScript/TypeScript推荐Prettier或ESLint（ESLint可同时兼顾代码检查）
• HTML可使用Prettier，或确保内置的HTML Language Features插件处于启用状态

2. 指定目标语言的默认格式化程序 #

打开HTML/JS文件后：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Format Document With
• 选择你安装的格式化工具（比如Prettier），接着选择「Configure Default Formatter for 'HTML'」（对应目标语言），将其设为该语言的默认格式化程序

3. 配置缩进规则（针对if/switch等语句） #

打开settings.json（可通过设置界面右上角的「打开设置(JSON)」进入），添加对应语言的缩进配置：

// JavaScript缩进配置示例
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2, // 按需调整缩进大小
  "editor.insertSpaces": true // 用空格替代制表符
},
// HTML缩进配置示例
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

如果使用ESLint，还可以在.eslintrc配置文件中设置indent规则，确保和格式化工具的缩进逻辑一致，避免规则冲突。

4. 排查常见问题 #

• 确认右下角状态栏的文件语言模式正确（比如显示「HTML」「JavaScript」，而非「Plain Text」）
• 手动按下Ctrl+Shift+I触发格式化，如果无反应，说明插件未正确安装或规则配置存在冲突
• 再次检查全局的Editor: Format On Save选项确实处于开启状态（设置界面搜索该选项即可查看）

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