首页 > 其他分享 >VsCode中高效书写Vue3代码的插件

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

时间:2024-03-20 16:01:57浏览次数:28  
标签:插件 vue VsCode 代码 Official Vue Vue3 setup vite

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插件,组件名已改变
在这里插入图片描述

标签:插件,vue,VsCode,代码,Official,Vue,Vue3,setup,vite
From: https://blog.csdn.net/owo_ovo/article/details/136803881

相关文章

  • 【Vue3】组件通信以及各种方式的对比
    方式一:props「父」向「子」组件发送数据父组件:定义需要传递给子组件的数据,并使用v-bind指令将其绑定到子组件的props上。<template><child-component:message="parentMessage"/></template><scriptsetup>importChildComponentfrom'./ChildComponent.......
  • vue3 项目接入keycloak
    之前都是vue2项目接入keycloak,网上表较多资料参考,vue3得比较少记录一下。这个前端项目是jetlinks社区版。引入了 dsb-norge/vue-keycloak-js插件, https://github.com/dsb-norge/vue-keycloak-js,还是要看官方得文档、示例。1.官方提供得示例比较全,我需要得是vue3typescri......
  • 得嘞,分页插件PageHelper返回记录总数total竟然出错了!
    问题描述分页返回的记录总数total和每页数量pageSize一致,数据库统计的数量大于当前返回的总记录数total,以下是相关代码问题分析sql错误导致返回信息有误?检查结果:经过数据执行日志中生成的sql,sql正常并且数据总条数也正确PageHelper使用方式错误,导致数据错误检查结果:通过与......
  • Photoshop2024(PS)和Lightroom(LR)设计的智能磨皮插件Portraiture下载
     打造完美肤质,PortraiturePS/LR专用智能磨皮插件让你的照片焕发魅力副标题:让你的照片告别粗糙皮肤和毛孔,展现自然细腻的肤质在摄影后期处理中,给照片进行磨皮和肤质优化是一项必不可少的步骤。而今天,我们为你带来了一款专为Photoshop(PS)和Lightroom(LR)设计的智能磨皮插件——......
  • vscode大小写快捷键
    实质意义上的使用PHP从去年6月开始的,作为初学者只能从简,省略能省略的,能产出能运行就成。同期使用的IDE是vscode,对不同的语言需安装对应的语法和编译模块觉得很酷,像apt,npm一样。久之,关注点得回到提升编写效率,像大小写转换,以前也就自个手敲两下,反复这么敲也占用专注度,像PHP,常用的PHP......
  • 打造专业人像照片的必备神器Portraiture2024免费PS/LR专用智能磨皮插件
    在摄影后期处理中,人像照片的磨皮处理是一项必不可少的技能。今天,我们为大家带来了一款专为Photoshop(PS)和Lightroom(LR)设计的智能磨皮插件——Portraiture。这款插件凭借其出色的表现和便捷的操作,深受广大摄影爱好者和专业摄影师的喜爱。接下来,让我们一起探索Portraiture的魅力......
  • vue3学习笔记
    1.创建一个vue3项目1.创建vueclinpminstall-g@vue/cli2.创建项目npmcreate<项目名称>开始敲代码啦!!!1.引用组件只需要import就可以了,因为使用了setup之后引用了就会被自动成为子组件了。2.声明数据ref用于声明基本数据类型reactive 用于声明对......
  • vite + vue3 + typescript 搭建
    1.安装node.js 下载地址:https://nodejs.p2hp.com/,安装好后,cmd输入node-v查看版本号,出现以下图版本号内容则安装成功2.安装vite(本步骤可省略)可先切换淘宝镜像 npmconfigsetregistryhttpsregistry.npm.taobao.org确保node安装好,输入 npminstall-gcreate-vite命......
  • Vue3 Slot—插槽全家桶使用详解
    插槽是什么插槽slot就是子组件中提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换<slot></slot>标签。插槽被分为三种:匿名插槽、具名插槽、作用域插槽。1、匿名插槽没有名字的插槽就是匿名插槽,组件可以放......
  • 各大OJ的插件(篡改猴)
    声明:我用的360,也不知道别的浏览器能不能用篡改猴下载?link进入页面后点击下载处黑色小猴子的去商店右边的灰色按钮然后启动下载的东西剩下的自己看着办洛谷smart-lougulink美化LuoguTaskslink在洛谷侧边栏显示题单与自己存的题LuoguSearchAnyWherelink在页面右......