VSCode + Vue3 常用组件

这里写自定义目录标题

问题概述
解决方案
- [1. 必装：Vue - Official](#1. 必装：Vue - Official)
- [2. 更换颜色区分明显的主题](#2. 更换颜色区分明显的主题)
- [3. 开启语义高亮](#3. 开启语义高亮)
- [4. 检查文件语言模式](#4. 检查文件语言模式)
- [5. 想突出成对标签，可以再装这个](#5. 想突出成对标签，可以再装这个)
- 建议安装组合

问题概述

新开发环境：

如下截图所示，App.vue 组件的标签内容均灰色，没有颜色区分。

解决方案

1. 必装：Vue - Official

在 VS Code 扩展中搜索：

text 复制代码

Vue - Official

发布者为 Vue，扩展 ID：

text 复制代码

Vue.volar

它以前叫 Volar，负责 .vue 文件的语法高亮、组件提示、模板类型检查和跳转等功能，是 Vue 官方推荐的 VS Code 扩展。( $Vue.js$ $1$ )

也可以在终端安装：

bash 复制代码

code --install-extension Vue.volar

如果安装了旧的 Vetur，建议在 Vue 3 项目中将其禁用，避免两个 Vue 语言服务冲突。Vue 官方也明确建议 Vue 3 使用 Vue - Official 替代 Vetur。( $Vue.js 中文网$ $2$ )

安装后执行：

text 复制代码

Ctrl + Shift + P

输入：

text 复制代码

Developer: Reload Window

重新加载 VS Code。

2. 更换颜色区分明显的主题

你的截图使用的是颜色比较接近的暗色主题。即使安装了 Vue - Official，具体显示什么颜色，主要还是由 VS Code 的主题决定。VS Code 官方说明，语义标记是否使用不同颜色取决于当前主题的配置。( $Visual Studio Code$ $3$ )

推荐安装：

text 复制代码

One Dark Pro

扩展 ID：

text 复制代码

zhuangtongfa.Material-theme

该主题对关键字、变量、字符串、组件名和属性的颜色区分通常比较明显。( $Visual Studio Marketplace$ $4$ )

安装命令：

bash 复制代码

code --install-extension zhuangtongfa.Material-theme

然后按：

text 复制代码

Ctrl + K
Ctrl + T

选择：

text 复制代码

One Dark Pro

也可以先尝试 VS Code 自带的：

text 复制代码

Dark+ (default dark)

3. 开启语义高亮

打开 VS Code 设置：

text 复制代码

Ctrl + ,

搜索：

text 复制代码

Semantic Highlighting

将其启用。

或者打开 settings.json，加入：

json 复制代码

{
  "editor.semanticHighlighting.enabled": true
}

语义高亮会让语言服务根据变量、属性、组件等实际含义进行着色，而不只是根据文本格式着色。( $Visual Studio Code$ $5$ )

4. 检查文件语言模式

打开 App.vue 后，看 VS Code 右下角的语言模式，应该显示：

text 复制代码

Vue

如果显示的是：

text 复制代码

Plain Text
HTML

点击它，然后选择：

text 复制代码

Vue

否则 Vue 扩展不会完整工作。

5. 想突出成对标签，可以再装这个

如果你的需求是快速区分：

vue 复制代码

<template>
</template>

<div>
</div>

对应的开始标签与结束标签，可以安装：

text 复制代码

Highlight Matching Tag

扩展 ID：

text 复制代码

vincaslt.highlight-matching-tag

它会突出显示当前光标所在标签所对应的开始或结束标签；其说明中表示 Vue 文件通常也可以使用，但官方主要保证 HTML 和 JSX。( $Visual Studio Marketplace$ $6$ )

bash 复制代码

code --install-extension vincaslt.highlight-matching-tag

建议安装组合

最少安装这两个：

text 复制代码

Vue - Official
One Dark Pro

需要突出成对标签时再加：

text 复制代码

Highlight Matching Tag

需要注意，正常语法高亮通常是按照"类型"区分颜色，例如组件名一种颜色、属性一种颜色、字符串一种颜色，并不会让 <div>、<span>、<el-button> 每一种标签都拥有完全不同的颜色。安装 Vue - Official + One Dark Pro 后，你截图中的 import、变量、路径字符串、template 和 HelloWorld 应该会有更清晰的颜色区别。