vscode 默认不支持 里的 vue 模板语法高亮，因 uni-app 的 .vue 文件含小程序等多端特有标签（如 ）和指令（如 v-if 编译为 wx:if），原生 vetur/volar 无法识别其组件库与别名；需安装 dcloud 官方 uniapp-vscode-extension 插件，并配置 vetur.ignoreprojectwarning: true 及 vetur.grammar.customblocks 显式声明各平台自定义块为 vue 语法。
为什么默认不支持 <template></template> 里的 Vue 模板语法高亮
VSCode 默认把 .vue 文件当标准 Vue 单文件组件处理，但 Uni-app 的 .vue 文件实际运行在多端（小程序、H5、App），其模板层存在非标准扩展：比如 <swiper-item></swiper-item>、<rich-text></rich-text> 等自定义标签，以及 v-if 在小程序中被编译为 wx:if 的逻辑。原生 Vetur 或 Volar 都不会主动识别 Uni-app 特有的组件库和指令别名，所以标签不亮、属性无提示、<template></template> 区域像纯 HTML 一样“哑火”。
必须安装 uniapp-vscode-extension 插件
这是 DCloud 官方维护的插件，专为 Uni-app 场景定制，它不只是加高亮，还做了三件事：注入 Uni-app 组件全局声明、补全 uni. API、适配不同平台的条件编译块（如 #ifdef MP-WEIXIN）。不装这个，其他配置全是白搭。
- 在 VSCode 扩展市场搜
uniapp-vscode-extension，认准发布者是DCloud.io - 安装后重启 VSCode，确保状态栏右下角出现
Uni-app标识 - 如果项目根目录有
unpackage/或node_modules/@dcloudio/uni-cli-shared，插件会自动激活；否则手动在设置里启用："uniapp.enable": true
vetur.ignoreProjectWarning 要设为 true，否则报红
Uni-app 项目结构和标准 Vue CLI 不完全一致（比如没有 vue.config.js 或 vue.runtime.esm.js 引入路径），Vetur 会检测到“非标准 Vue 项目”并弹出警告，同时禁用部分功能。这个警告不能点“不再提示”，必须进设置关掉。
- 打开 VSCode 设置（
Ctrl+,），搜索vetur.ignoreProjectWarning - 勾选它，或在
settings.json中加一行："vetur.ignoreProjectWarning": true - 注意：不是禁用 Vetur，而是让它别因结构差异就罢工——Uni-app 插件依赖 Vetur 的模板解析能力
模板标签仍不亮？检查 vetur.grammar.customBlocks 配置
Uni-app 允许在 <template></template> 外定义自定义块，比如 <mp-weixin></mp-weixin> 或 <app-plus></app-plus>，这些块默认不被 Vetur 当作 Vue 模板处理，导致里面写的标签没高亮。需要显式告诉 Vetur：“这些块的内容也是 Vue 模板语法”。
- 在项目根目录的
.vscode/settings.json中添加：
{
"vetur.grammar.customBlocks": {
"mp-weixin": "vue",
"mp-alipay": "vue",
"mp-baidu": "vue",
"mp-toutiao": "vue",
"app-plus": "vue",
"h5": "vue"
}
}
.vue 文件，对应平台块内的标签立刻有高亮和属性提示mp-jd），那个块里就还是白底黑字@dcloudio/uni-app 内置的组件类型定义 + 显式声明语法块作用域。少一步配置，就会卡在某一层——比如 API 补全有了，但 <input confirm-type="search"> 的 confirm-type 属性仍然不提示，大概率是 customBlocks 没对齐当前平台。
