如何为<vue-component />形式的Vue组件实现语法高亮？

问题根因 #

• 语法高亮失效和Prettier无关：Prettier仅负责代码格式化逻辑，不参与编辑器代码token识别、语法着色的流程，不需要调整Prettier核心配置解决高亮问题。
• 问题根源在Vetur的默认解析规则：Vetur内置的vue-html语法解析器，默认仅对原生HTML标签、Vue官方内置组件、带属性/子节点的自定义组件、大驼峰命名的自定义组件触发高亮匹配，对纯kebab-case写法的无属性自闭合组件<xxx-yyy />存在识别遗漏，和部分团队要求的短横线命名自闭合组件规范存在冲突。

分步配置方案 #

1. 修正Vetur基础解析配置 #

打开VS Code的用户/工作区设置，进入settings.json文件，添加以下配置，让Vetur优先使用项目本地的Vue编译器解析SFC文件，避免内置解析器版本不匹配导致的识别异常：

{
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "prettier"
}

配置完成后通过命令面板执行Vetur: Restart Vetur Server重启Vetur服务，先验证基础识别是否恢复。

2. 自定义高亮匹配规则（第一步未生效时使用） #

如果重启后kebab-case自闭合组件仍然没有高亮，直接在settings.json中追加TextMate语法规则，强制匹配自定义组件标签的着色逻辑：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "meta.tag.custom.vue entity.name.tag",
      "settings": {
        "foreground": "#569cd6",
        "fontStyle": ""
      }
    }
  ]
}

上述色值可替换为你当前使用的代码主题中，原生组件/HTML标签对应的高亮十六进制色值，保证视觉风格统一。

3. 对齐Prettier格式化规则 #

为了避免Prettier格式化时自动改写组件写法，违反团队编码规范，需要在项目根目录的.prettierrc配置文件中添加以下规则，强制保留短横线命名、自闭合的组件写法：

{
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "attributeNameCase": "kebab-case",
  "tagNameCase": "kebab-case",
  "htmlSelfClosing": "all"
}

配置完成后重启编辑器，即可实现所有按团队规范编写的<vue-component />类自定义组件正常显示语法高亮，且格式化时不会被改写为不符合规范的写法。

验证方法 #

在.vue文件的template块中写入无属性的kebab-case自闭合组件，如<user-info-card />，不需要添加任意属性、不需要改写为大驼峰写法，即可看到组件标签正常高亮，执行格式化操作后写法保持不变。

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