vscode 默认不格式化 html 内联 script/style，需配置 prettier.embeddedlanguageformatting: "auto"、确保 type/lang 属性正确（如 type="module" 或 lang="scss"），并重启编辑器生效。

VSCode 对 HTML 内联 <script></script> 和 <style></style> 不自动格式化

默认情况下，VSCode 的 Prettier 或内置 HTML 格式化器只处理纯 HTML 结构，对内联的 <script></script> 和 <style></style> 块完全“视而不见”——哪怕你按 Shift+Alt+F，里面的 JS 或 CSS 也不会缩进、换行或修复分号。这不是 bug，是设计：编辑器把它们当作文本块，不触发对应语言的 formatter。

解决的关键是让 VSCode 明确知道：“这段 <script></script> 里写的是 JavaScript，该用 JS 规则格式化”。这靠的是语言模式识别 + formatter 配置协同工作。

• 确保已安装 Prettier 插件（或 ESLint + eslint-plugin-html 组合），且启用为默认 JS/TS/CSS 格式化工具
• 检查文件右下角语言模式是否为 HTML（不是 Plain Text）；若显示错误，点击切换回 HTML
• 在 settings.json 中确认开启嵌入语言格式化：

  "html.format.enable": true,
  "prettier.embeddedLanguageFormatting": "auto"

  （"auto" 是关键，"off" 就彻底失效）

prettier.embeddedLanguageFormatting 设为 auto 才生效

这个配置项控制 Prettier 是否介入 HTML/SVG 中的内联代码。设成 off，连 <script></script> 里的 JS 都不会动；设成 always，会强制尝试格式化所有嵌入块（包括可能不支持的语言，比如自定义模板语法，容易报错）；auto 是唯一稳妥选择——它只对 Prettier 明确认识的语言（javascript、typescript、css、scss、less）生效。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 如果改了配置没反应，重启 VSCode（插件加载时机问题，尤其多插件共存时）
• 注意：Prettier v2.8+ 才完整支持 auto 模式，旧版即使设了也无效
• 某些项目用了 .prettierrc 但没配 embeddedLanguageFormatting，VSCode 会优先读取用户级设置，所以务必在 settings.json 里显式写上

内联 <script></script> 必须带 type 属性才被识别

VSCode 和 Prettier 依赖 type 属性判断脚本语言类型。没有 type，或写成 type="text/javascript"（过时写法），Prettier 可能跳过格式化——它只认现代标准类型标识。

• ✅ 正确（会被格式化）：

  <script type="module">
  console.log('hello');
  </script>

• ✅ 正确（也会被格式化）：

  <script type="text/typescript">
  const a: number = 1;
  </script>

• ❌ 无效（大概率不格式化）：

  <script>
  console.log('hello');
  </script>

  （无 type）
• ❌ 无效（Prettier 忽略旧式 type）：

  <script type="text/javascript">
  console.log('hello');
  </script>

CSS 内联样式要加 lang 或 type 才触发格式化

和 <script></script> 类似，<style></style> 块默认只当普通文本。Prettier 要求明确语言标识，否则不处理。

• ✅ 支持格式化：

  <style lang="scss">
  .example { color: red; }
  </style>

• ✅ 支持格式化：

  <style type="text/css">
  .example { color: red; }
  </style>

• ❌ 不支持：

  <style>
  .example { color: red; }
  </style>

  （无任何标识）
• ⚠️ 注意：lang="postcss" 或 lang="stylus" 等非 Prettier 原生支持的语言，即使写了也不会格式化，别白费劲

嵌入语言格式化这件事，本质是“识别 → 交由对应语言 formatter → 合并回 HTML”。任何一个环节断掉——类型没标、插件没装、配置关了、版本太老——都会静默失败，而且毫无提示。最容易忽略的是改完配置没重启编辑器，或者以为写了 <script></script> 就够了，其实少了个 type。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！