Vue-Official（原Volar）
就是原先的Volar，现已弃用。
Vue-Official 提供的功能：
-
语法高亮: Vue-Official 扩展可以为 Vue 单文件组件（.vue 文件）中的 HTML、CSS 和 JavaScript 部分提供语法高亮，使代码更易于阅读和编写。
-
代码片段: Vue-Official 扩展提供了丰富的 Vue.js 相关的代码片段，可以更快地编写 Vue 单文件组件。
-
智能感知: 扩展会根据 Vue.js 的语法规则提供智能感知功能，例如属性名补全、自动完成、方法参数提示等，这有助于提高代码编写的效率。
-
错误检查: Vue-Official 扩展会在代码中检测 Vue.js 相关的错误，并在编辑器中标记出来，帮助你及时发现和修复问题。
安装扩展前：代码无高亮，可读性极差；没有代码提示，单词错写率提升，且没有错误提示。
安装扩展后：
默认配置中不包含优化ref数据的处理，需要自行勾选，步骤如下：
1.进入扩展设置
2.勾选Auto Insert
操作ref数据时，自动补全.value。
vite-plugin-vue-setup-extend
默认情况组件名和文件名是相同的，如果不同可以使用插件
在script标签的setup中添加name属性，表示组件名
下载
npm i vite-plugin-vue-setup-extend -D
vite.config.ts中导入并注册
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
// 引入
import VitePluginExtend from "vite-plugin-vue-setup-extend"
export default defineConfig({
plugins: [vue(), VitePluginExtend()], // 注册
})
使用文章来源：https://www.toymoban.com/news/detail-860912.html
<script setup lang="ts" name="Home123"> // 添加name属性
打开控制台，观察Vue插件，组件名已改变
文章来源地址https://www.toymoban.com/news/detail-860912.html
到了这里，关于VsCode中高效书写Vue3代码的插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
