全栈笔记_插件篇（用Volar替换Vuter）

Volar与Vuter的区别

1. TS支持：Volar和Vuter是2个独立的插件，都是为.vue单文件组件提供代码高亮以及语法支持，但是Vuter对ts的支持并不友好。
2. 唯一根标签：Volar 不限制是否唯一根标签，vuter 则会报错 The template root requires an element rather than texts，需要在设置里取消勾选 Template 。 vue3 模板可以使用多个根标签，vue2 模板需要唯一根标签。

Volar插件安装

1. Vue Language Features (Volar)：不仅支持 Vue3 语言高亮、语法检测，还支持 ts 和基于 vue-tsc 的类型检查功能，用来替代 vuter
2. 开启托管模式：禁用 VSCode 的内置 TS 语言服务

   • 在当前项目的工作空间下，用Ctrl + Shift + P唤起命令面板。

   • 输入built，然后选择“Extensions：Show Built-in Extensions”。
     

   • 在插件搜索框内输入TypeScript(不要删除@builtin前缀)。
     

   • 点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable(Workspace)”。

   • 重新加载工作空间。托管模式将会在打开一个 Vue 或者 TS 文件时自动启用，方便代码调用定位。