vlambda博客
学习文章列表

VSCode开发工具怎么少得了这款插件

前端瓶子君
瓶子君,2021致力于帮助前端开启技术专项+算法之路!
39篇原创内容
Official Account

回复算法,加入前端编程面试算法每日一题群

VSCode开发工具怎么少得了这款插件

作者:DT辰白

https://juejin.cn/post/6965382258341445646

前言

最近使用了Vscode编辑器写Vue前端代码,发现很坑,很多东西都不会提示,而且超级难找,所以这里记录一下小编的初使用过程中遇到的坑。


一、Vue VSCode Snippets插件安装

VSCode开发工具怎么少得了这款插件
在这里插入图片描述

这里小编第一次安装完成之后,发现他的一些命令根本不生效,我重启了Vscode还是没啥反应,解决方式:

查看底部的状态栏当前的语法格式:

VSCode开发工具怎么少得了这款插件
在这里插入图片描述

如果是html点击弹框之后选择vue的语法配置。

VSCode开发工具怎么少得了这款插件 这样就有效果了,下面就来使用这个插件的功能。

二、使用步骤

1.生成vue基本模板代码

首先用vscode新建一个.vue的文件后,居然是空白的,我靠,顿时我啥了,之前用webstorm用的多了,忽然不习惯。

VSCode开发工具怎么少得了这款插件
在这里插入图片描述

上面我们已经安装配置好了插件,我们就可以使用插件命令生成我们vue的基础模板。

vbase
复制代码
VSCode开发工具怎么少得了这款插件
在这里插入图片描述

输入vbase回车,就会帮我们生成基础模板。

VSCode开发工具怎么少得了这款插件
在这里插入图片描述

2.自定义模板

比如这个时候你想生成一些注释,和我们java类一样,基本的描述信息,创建时间,那怎么做呢?我们已经安装好了这个插件,我们只需要修改里面的配置即可。

首先找到这个jso文件:C:\Users\DT开发者.vscode\extensions\sdras.vue-vscode-snippets-2.2.0\snippets 一般默认安装了插件之后都会在这个位置能找到。

VSCode开发工具怎么少得了这款插件 VSCode开发工具怎么少得了这款插件

3.常用快捷键

比如:

vdata
复制代码

VSCode开发工具怎么少得了这款插件 VSCode开发工具怎么少得了这款插件 以下是所有快捷键的使用:



总结

使用上对的工具,好的工具能够为我们开发带来很高的效率,避免重复CV,效率高不高全靠工具使用的好不好。

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「 算法 」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「 阅读 」,每日刷刷高质量好文!
如果这篇文章对你有帮助,在看」是最大的支持
前端瓶子君
瓶子君,2021致力于帮助前端开启技术专项+算法之路!
39篇原创内容
Official Account

“在看和转发” 就是最大的支持