VsCode的语法高亮在编写Vue的单文件组件时不正常

Question

问题遇到的现象和发生背景

我安装了VsCode，但是在使用VsCode写单文件组件的时候定义组件内部成员的时候这些变量名的值或者名字的语法高亮部分总是显示得不正常。有的高亮显示一半，有的高亮显示的颜色还不一致，看着很烦。

操作环境、软件版本等信息

VsCode里面我安装了以下插件：prettier/vetur/vetur-SFC/Vue-Official

尝试过的解决方法

开始我以为是插件的问题，于是我卸载了vetur/vetur-SFC/Vue-Official，只留prettier。然后我把所有都卸载了，只留Vue-Official，还是不行。

我想要达到的结果

我想要在vue的单文件组件里面的变量名字和值的语法高亮正常，一点，不要一半一半的。

Answer 1

引自免费微信小程序：皆我百晓生

在VsCode中遇到Vue单文件组件（.vue）的语法高亮不正常的问题，这可能是由于语言识别、主题设置或者插件冲突导致的。针对您的问题，我将提供以下排查和解决步骤：

1. 检查语言模式： 确保VsCode正确识别您正在编辑的.vue文件的语言模式为“Vue”。您可以在底部状态栏查看当前文件的语言模式，如果不是“Vue”，点击它并选择正确的模式。

2. 更新/重置VSCode设置：

   • 请尝试关闭所有VSCode窗口，然后重新打开，确保已加载正确的用户或工作区设置。
   • 检查您的VSCode颜色主题设置，切换至其他内置或市场下载的主题，看是否可以解决问题。

3. Vue插件配置：

   • 即使您只留下了Vue官方插件，也请确保它是最新版本，并且已经激活。您可以从Extensions面板检查更新，或者卸载后重新安装Vue Language Features (Volar)（目前推荐使用的Vue插件，代替了vetur）。
   • 在用户设置.json文件中添加或检查以下配置：

     "editor.semanticHighlighting.enabled": true,
     "editor.tokenColorCustomizations": {
         "textMateRules": [
             // 可以在这里自定义特定语法的颜色，但通常无需手动配置
         ]
     },
     "[vue]": {
         "editor.defaultFormatter": "octref.vetur"
         // 如果使用Volar，请改为："editor.defaultFormatter": "johnsoncodehk.volar"
     }
     

4. 禁用其他可能影响高亮的插件： 尝试逐个禁用非Vue相关的格式化插件（如Prettier），以确认是否存在插件间的冲突。

5. 清理缓存与重新索引项目： 使用VsCode命令面板（Ctrl+Shift+P）运行Developer: Reload Window来重启编辑器，或者使用Volar: Restart VLS命令重启Vue语言服务器。

6. 检查Vue模板部分的代码结构： 确保Vue模板内的变量名书写正确，没有语法错误，因为错误的语法可能导致高亮异常。

通过以上步骤应该能够解决大部分的Vue单文件组件内语法高亮显示不一致的问题。如果问题仍然存在，请访问VsCode插件（如Volar）的GitHub仓库，查看是否有类似问题的反馈或解决方案。