0

0

Vue3 文件中 HTML 标签颜色不显示的解决方案

心靈之曲

心靈之曲

发布时间:2026-01-14 10:02:20

|

249人浏览过

|

来源于php中文网

原创

Vue3 文件中 HTML 标签颜色不显示的解决方案

vs code 中 vue 文件的 template、script、style 等标签显示为白色,是因默认语法高亮未适配 vue 特殊结构;可通过自定义 `tokencolorcustomizations` 配置为不同标签(如 `

在 VS Code 中,Vue 单文件组件(SFC)的

✅ 正确解决方式是:通过 settings.json 手动配置 editor.tokenColorCustomizations,按 TextMate 作用域(scope)精准控制标签颜色

? 操作步骤:

  1. 打开命令面板:Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS);
  2. 输入并选择 Preferences: Open User Settings (JSON)
  3. 在 JSON 中添加或修改 "editor.tokenColorCustomizations" 字段,务必指定当前启用的主题名称(如 "Monokai"、"GitHub Dark"、"One Dark Pro"),否则配置不生效。

? 示例配置(适配 Vue SFC 结构)

以下配置为不同标签赋予语义化颜色(以 GitHub Dark 主题为例):

{
  "editor.tokenColorCustomizations": {
    "[GitHub Dark]": {
      "textMateRules": [
        {
          "name": "Vue top-level