VsCode中高效书写Vue3代码的插件

最新推荐文章于 2025-03-15 14:06:14 发布

田本初

最新推荐文章于 2025-03-15 14:06:14 发布

阅读量2.3w

点赞数 13

分类专栏： Vue 文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/owo_ovo/article/details/136803881

版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了Vue-Official(原Volar)扩展在Vue项目中的重要性，包括语法高亮、智能感知、错误检查功能，以及如何通过vite-plugin-vue-setup-extend进行优化配置，如处理ref数据和修改组件命名规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()], // 注册
})

使用

<script setup lang="ts" name="Home123">  // 添加name属性

打开控制台，观察Vue插件，组件名已改变
在这里插入图片描述