Vue3开发必备的六个VSCode插件推荐

目录
  • 1. Volar
  • 2. Vue VSCode Snippets
  • 3. Auto Close Tag
  • 4. Vue Peek
  • 5. Vue Theme
  • 6. Vite
  • 总结

今天分享 6 个 Vue3 开发必备的 VSCode 插件，可以直接用过 VSCode 的插件中心直接安装使用。

1. Volar

下载数 153 万+

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

使用时需要注意：

首先要禁用 Vetur 插件，避免冲突；

推荐使用 css/less/scss 作为 <style>的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持；

如果使用 postcss/stylus/sass 的话，需要安装额外的语法高亮扩展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展；

Volar 不包含 ESLint 和 Prettier，而官方的 ESLint 和 Prettier 扩展支持 Vue，所以需要自行安装。

2. Vue VSCode Snippets

下载数 152 万+

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

该插件支持：Volar、Vue2 和 Vue3。

使用方式如下：

新建一个 .vue文件，输入 vbase会提示生成的模版内容：

输入 vfor快速生成 v-for指令模版：

输入 v3onmounted快速生成 onMounted生命周期函数：

其他就不再演示啦，功能实在太强大，常用快捷键非常多，具体可以查看文档。

3. Auto Close Tag

下载数 769 万+

Auto Close Tag 插件是一个很好用的 VS Code 扩展，它对生产率有很大影响。顾名思义，当我们在结束标记中键入结束括号时，它将添加结束标记。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

4. Vue Peek

下载数 49 万+

Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。

使用方式如下：

右键组件标签，跳转到组件定义的文件：

右键组件标签，弹窗显示组件定义的文件：

5. Vue Theme

下载数 34 万+

Vue Theme 插件提供了不错的 Vue 主题，还支持配置不同颜色，感觉还不错。

6. Vite

下载数 8.9 万+

Vite 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

总结

今天分享的 6 个插件，大家可以按需安装使用。

我比较强烈推荐实用  Volar  和 Vue VSCode Snippets 这 2 个插件。

到此这篇关于Vue3开发必备的六个VSCode插件推荐的文章就介绍到这了,更多相关Vue3必备VSCode插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • VSCode提高 Node 和 Vue 开发效率的插件推荐

    在众多代码编辑工具中,我最喜欢的就是微软的vscode.首先它十分轻便,不吃硬件,运行非常顺畅:其次是其各种各样的插件使得编程效率蹭蹭地往上提,爸爸妈妈再也不用担心我要加班了(才怪!!!不加班是不可能的) 插件列表 Auto Close Tag 自动闭合HTML标签 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Bookmarks 添加行书签 Can I Use HTML5.CSS3.SVG的浏览器兼容性检查 Code Runner 运行选中代码段(支持大量语言,包括N

  • vscode 插件开发 + vue的操作方法

    如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作 1.把开发好的vue项目打包,如果打包出来的vue执行是空白页,就需要看看之前我写的文章,vue 3 clie打包配置 -这里要注意的是,要确保vue项目里面的public有一个index用作插件打开时的模板,等一下需要做base的特换,不然插件是不知道网页的根目录在哪里 index.html -vue.config.js的配置 <!DOCTYPE html> <html lang="en">

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • VsCode工具开发vue项目必装插件清单(推荐!)

    目录 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Snippets自动生成vue模板内容插件 1.安装插件 2.使用插件生成vue模板代码 2.3.LiveServer实时刷新网页 1.安装LiveServer 2.使用LiveServer打开网页 3.开启自动保存 2.4.开发工具设置2个空格缩进 2.5.browser插件浏览器插件查看html文件 1.安装创建 2.浏览html文件 2.6.设置目录分级显示 2.7.Brac

  • Vue3开发必备的六个VSCode插件推荐

    目录 1. Volar 2. Vue VSCode Snippets 3. Auto Close Tag 4. Vue Peek 5. Vue Theme 6. Vite 总结 今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 1. Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮

  • 云开发 VSCode 插件 Cloudbase Toolkit 的正确打开方式及应用场景分析

    什么是 Cloudbase Toolkit Tencent CloudBase Toolkit 是云开发的 VS Code(Visual Studio Code)插件.该插件可以让您更好地在本地进行云开发项目开发和代码调试,并且轻松将项目部署到云端. Cloudbase Toolkit 将项目创建.函数上传.函数更新.函数本地调试等功能集成在 VSCode 的本地调试环境中,开发者可以通过简单的点击,完成云函数的更新.上传.同步等功能. 和 Cloudbase Cli 相比,Cloudbase

  • vscode插件设置之Golang开发环境配置全过程

    目录 1.vscode安装Go插件 2.vscode自动提示需要安装插件,点击install all 3.另一种手动安装插件的方式 4.设置goproxy代理 4.1.查看GO环境变量设置 4.2.插话:GO111MODULE 的由来 5.重新安装vscode插件 6.go path配置 7.go mod相关 8.VsCode Go插件在Go项目中的正确配置 8.1.如何运行 9.如何Debug和运行 9.1.创建 launch.json (运行项目) 9.2.配置cwd属性 9.3.Debug

  • 玩转VSCode插件之Remote-SSH的使用情况

    前言 每当更换电脑就要从新搭建一遍开发环境... 每当拉完最新代码程序在本地跑不起来的时候就要检查服务器和开发电脑的环境... 每当服务器上出Bug的时候就想如果可以能够调试服务器代码多好啊.. 你是不是早就受够了vim这个煞笔编辑器... 现在最火的是云原生应用,什么时候才能云开发啊? 来了来了它真的来了!!! 北京时间2019年5月3日,在 PyCon 2019 大会上,微软发布了 VS Code Remote,开启了远程开发的新时代!这次发布包含了三款核心的全新插件,它们可以帮助开发者在容

  • Java开发必备知识之数组详解

    Java开发必备知识之数组详解

    一.ASCII码 二.为什么需要数组 案例: 160班 现在 77人 统计 全班的Java成绩 用程序进行存储 变量 统计 全班不及格的同学 要 补考 补考过的同学 修改成绩 定义 77 个变量 int 帅 = 59: int 洋 = 100: int cto = 60: int ceo = 58: 三.什么是数组 概念:数组就是内存中一块 连续的 内存空间,用于存放 相同类型 的多个数据 四.定义数组 声明一个数组:确定数组中存放的数据类型 语法: 数据类型[] 数组名://建议 数据类型 [

  • 前端开发工具nvim来代替VSCode安装配置

    前端开发工具nvim来代替VSCode安装配置

    目录 1. Neovim是什么 2. 我们为什么需要Neovim 3. 如何配置Neovim 3.1 安装第三方终端 3.2 安装neoviem 3.3 快速启动neovim 3.4 创建neovim配置文件 3.5 配置字体 4. 终端模拟器之选 4.1 iterm2 4.2 alacrittty 4.3 kitty 4.4 Neovide 1. Neovim是什么 在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少

  • Visual Studio 2010 前端开发工具/扩展/插件推荐

    Visual Studio 2010 前端开发工具/扩展/插件推荐

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We

  • 简单实用的aixcoder智能编程助手开发插件推荐

    1. aixcoder安装使用 1.1. 介绍 1.1.1. 功能智能代码提示她用强大的深度学习引擎,能给出更加精确的代码提示:代码风格检查她有代码风格智能检查能力,帮助开发者改善代码质量:编程模式学习她能自主学习开发者的编程模式,边用边学,越用越强: 1.1.2. 总结 总之是个让你更快开发的工具,支持java,python,对 SpringBoot,TensorFlow,JFinal, Android 等编程场景进行了特殊适配.当然缺点就是免费版一天只有500次提示,但总比没有好,觉得好用就

  • IDEA提高开发效率的7个插件(推荐)

    1. 多行编辑 先来体验一下从xml文件拷贝字段新建实体对象 一般我们为了新建多表连接后映射的 ResultMap ,耗费不少时间,那么我们就来试一试这个多行编辑 表字段存在下划线,而实体中不允许,更是讨厌 ,等着一招教你解决 前提条件,安装一个idea的插件,用来驼峰与下划线互转的:CamelCase 步骤: ① 多行选择,按住ALT(windows)/option(Mac) ,拉动鼠标就可 ② 选中字段对象 Win Ctrl+shift+左箭头 Mac option+shift+左箭头 ③

随机推荐