VS Code中Vue3标签（template/script/style）无颜色显示求助

针对你遇到的Vue文件里template、script、style标签内容全为白色、无法区分的问题，给你整理了几个实测有效的解决步骤：

1. 确保用对Vue3的官方扩展 #

• 先卸载旧的Vue2扩展Vetur，它和Vue3的扩展会冲突
• 安装并启用官方推荐的Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 两个扩展
• 重启VS Code后再打开Vue文件看效果

2. 修正.vue文件的关联设置 #

• 打开你的Vue文件，点击VS Code右下角的文件类型标识（比如显示「Plain Text」）
• 在弹出菜单里选「Vue」，把.vue文件关联到正确的语法类型
• 也可以手动配置：打开设置面板（快捷键Ctrl+,），搜索files.associations，添加配置：

  "files.associations": {
    "*.vue": "vue"
  }
  

3. 更换或重置主题 #

• 有些主题对Vue语法高亮支持不好，试试切换到主流主题（比如One Dark Pro、Dracula、Monokai）
• 如果之前改主题颜色配置，可通过命令面板（快捷键Ctrl+Shift+P）输入Preferences: Reset Color Theme Settings重置主题设置

4. 检查自定义语法高亮配置 #

• 打开设置面板，搜索editor.tokenColorCustomizations，如果有自定义颜色配置，先注释掉所有内容，保存后重启VS Code
• 比如移除这类可能干扰的配置：

  "editor.tokenColorCustomizations": {
    // 这里的自定义内容可能导致Vue语法高亮失效
  }
  

5. 重新安装Volar扩展 #

• 要是以上步骤都没用，卸载Volar的两个扩展，关闭VS Code后重新打开，再重新安装扩展，确保安装过程没报错

你的代码示例 #

<script setup>
import { useStyleStore } from "@/stores/style.js";

const styleStore = useStyleStore();
</script>

<template>
  <div :class="{ dark: styleStore.darkMode }">
    <div class="bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
      <slot />
    </div>
  </div>
</template>

<script>
</script>

问题截图 #

内容的提问来源于stack exchange，提问作者Engin Tanrıkulu