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

Vue自从发布以来就一直受到前端开发人员的热爱，而除了一些本身优秀的特征之外，还有就是丰富的插件和工具的支持和更新。虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发，但是越来越多优秀的plugins都提供了强大的支持。比如VSCode下面的Vetur就是这样一款必备的Vue开发工具。下面就开始介绍一下它的一些功能吧

Github仓库：Vetur
官方文档：Vetur文档

语法高亮

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript，完整的支持高亮的语法如下所示：

语法高亮

Snippet

你可以使用一些snippet来编写不同的脚本，比如在script中申明 lang=”ts” 来开发TypeScript

<script lang="ts">
 // Use TS snippets here
</script>

Emmet

VSCode本身自带了Emmet，能够通过Tab键对HTML5的代码进行快速开发，不过，VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件->首选项->设置，就会进入到 settings.json 文件中，在左侧是VSCode默认的配置

在窗口右侧可以进行一系列的配置，在其中添加

"emmet.syntaxProfiles": {
 "vue-html": "html",
 "vue": "html"
}

这样就可以愉快的在Vue中体验Emmet带来的方便和快捷了

错误检测

Vetur默认使用 eslint-plugin-vue@beta 来检测

你可以在设置中的 settings.json 文件关闭 linting：

修改 vetur.validation.template 为false即可

格式

Vetur推荐使用2个空格来规定 editor.tabSize 和 editor.insertSpace，对于html和css/scss/less格式使用js-beautify来规范，js/ts的格式使用 TypeScript's language service，同时这些配置是可以改变的。具体可以参考：

js-beautify的Github仓库：js-beautify

Sbulime-HTMLPrettify的Github仓库：Sublime-HTMLPrettify

除了以上的功能外，还有代码补全和Debugging功能，总而言之，一个工具如果能够为开发提供非常大的便利，那么它就是非常值的推荐的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VsCode插件整理（小结）

    VsCode插件整理（小结）

    1.VsCode官方插件地址: https://marketplace.visualstudio.com/vscode http://code.visualstudio.com/docs 官网下载地址:http://code.visualstudio.com/ 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的""扩展""中搜索需要的插件 添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可 3.常用插件

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

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

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

  • 在VScode上使用latex编辑pdf的方法

    在VScode上使用latex编辑pdf的方法

    在VScode上使用latex编辑pdf 引言安装Tex live文件下载Tex live安装流程 在Visual Studio code(VS code)安装LateXVS code下载VS code安装latex 测试最简单的latex 引言 TEX是诞生于20世纪70年代末到80年代初的一款计算机排版软件. LATEX是对TEX的封装和拓展,实际上就是用TEX语言编写的一组宏代码,拥有比原来TEX格式(Plain TEX)更为规范的命令和一整套预定义的格式. TEXLive是TEX的一个发

  • VScode上配置 c语言环境的图文教程

    成成最近用到C语言了,之前比较喜欢用在vscode上面用python调试,今天我参考了一些文章,也尝试了下在vscode上配置c语言的调试,其中包含一些相关的基础知识. 1.在vscode里面下载c/c++官方插件: 2.安装c/c++编译器: 在windows上借助MinGW工具安装,下载地址:[https://sourceforge.net/projects/mingw/ ] 安装在d:\MinGW 下就好(自己新建一个文件夹),然后打开后这个样子: 在里面找到mingw32-gcc.bin

  • Vscode上使用SQL的方法

    Vscode上使用SQL的方法

    我们知道Vscode是一款强大的编辑器,我们可以通过商城里面的插件扩展来写C/C++/python/java等.同样Vscode支持SQL语言,我们可以通过Vscode来连接本地的数据库,并对本地的数据库进行操作,接下来看怎么实现的吧. 首先我们要在Vscode商城里面下载一个插件:MSSQL. 安装之后,我们可以新建一个.sql文件,然后我们发现右上角多了一个绿色按钮和一个红色按钮. 点击数据库,这里我选择连接的是系统数据库中的master库. 下一步更改登录密码(找到数据库的安全性,选择登录

  • 推荐史上最全的IDEA好用插件

    推荐史上最全的IDEA好用插件

    经过很多查看在巨人的肩膀上写完这篇博客,如有雷同纯属巧合,虽然自己也查了些文章才总结的,但是站在巨人肩膀上不敢搞原创! 学习使用一些插件,可以提高平常工作中的开发效率.对于我们开发人员很有帮助! 插件安装 IDEA里面,依次选择打开 File → Settings → Plugins,在Plugins里面可以搜索需要的插件,然后安装(安装完插件,一定要重启Idea,不然插件不生效) 1. Alibaba Java Coding Guidelines [阿里巴巴代码规范检查插件] ① 功能: 代码

  • 关掉vue插件Vetur格式化的时候自动添加的样式操作

    关掉vue插件Vetur格式化的时候自动添加的样式操作

    目录 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 4 点击我们想要修改的配置项 5 把默认项prettier修改为vscode-typescript 前言: 刚用Vetur的时候会发现只要格式化就会加什么小括号,冒号之类杂七杂八的标点符号.看着特别别扭,现在手把手教你如何关掉这个功能,傻瓜式教学.专门为小白设计 先打开vscode 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 Vetur › Format › Default

  • 实例教学如何写vue插件

    实例教学如何写vue插件

    在学习之前,先问问自己,为什么要编写vue的插件. 在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框.如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求. 说完需求,就来看看具体实现.目前我尝试了两种不一样的插件编写的方法,逐个介绍. 这是我的项目目录,大致的结构解释这样,尽量简单,容易理解. 一个是loading插件,一个是toast插件,不同的地方在于:loading插件是作为组件引入使用,

  • vue插件实现v-model功能

    最近在开发自己的富文本编辑器插件,在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定.就好像input中v-model的功能类似. v-model语法: 在vue中我们实现表单的双向绑定时代码一般时这样写的: <input type="text" v-model="value" style="line-height: 30px;"> data () { return { value: '222' } } 可以

  • vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置.但是官方 cli3 现在并不支持搭建 plugin 开发的项目. 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的vue-cli-plugin-p11n. 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 首先,搭建项目 vue create [your plugin name] && cd [your plugin name] vue

  • Vue插件之滑动验证码用法详解

    本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 安装 使用方法 更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数 注意事项 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github

随机推荐