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

╰半橙微兮° 2022-10-05 02:55 186阅读 0赞

点击上方 前端瓶子君，关注公众号

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

![dbd17f657e6ac6abaea6d247c77c2cb0.png][]

# 作者：DT辰白 #

https://juejin.cn/post/6965382258341445646

# 前言 #

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

--------------------

# 一、Vue VSCode Snippets插件安装 #

![54d63d2a2c27477ce12a5609b795efbd.png][] 在这里插入图片描述

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

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

![977d571654931592ce93b6b40623f7d4.png][] 在这里插入图片描述

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

![52368a647d1a70c2280bbd2cf3825242.png][] 这样就有效果了，下面就来使用这个插件的功能。

# 二、使用步骤 #

## 1.生成vue基本模板代码 ##

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

![1ae829416622f1289812e1dec6330b47.png][] 在这里插入图片描述

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

vbase
    复制代码

![ec481ebf2aaa28c67e4d86bb8d7c15c1.png][] 在这里插入图片描述

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

![5dfc0d517fe9f36daa1e8be69654241f.png][] 在这里插入图片描述

## 2.自定义模板 ##

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

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

![1e51d53b0bd9bab3bf344f35d66cb9c5.png][] 打开vue.json加入我们自己的配置，保存然后重启Vscode。

![bef32bbb770c3e110a3baf5ca8389980.png][] ![1f65c6fac2c8a1cafb948f7138d11fd5.png][]

## 3.常用快捷键 ##

比如：

vdata
    复制代码

![92a158e807b57521e5532c9aca274606.png][] ![cc3f4f43ce7452b84477196be484f3e3.png][] 以下是所有快捷键的使用：

![9cc3d8ec3f278192950b2d6c57e4d77b.png][]

# 总结 #

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

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

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

[dbd17f657e6ac6abaea6d247c77c2cb0.png]: /images/20221005/17af2fedfea84711981cd7b845264e97.png
[54d63d2a2c27477ce12a5609b795efbd.png]: /images/20221005/70cbdadeaa7c4ce3ac0a4c1d10c1242f.png
[977d571654931592ce93b6b40623f7d4.png]: /images/20221005/567eac9421da496a9f6c47ef43a19dc4.png
[52368a647d1a70c2280bbd2cf3825242.png]: /images/20221005/f1c974c8b6de458c94fd55d558463689.png
[1ae829416622f1289812e1dec6330b47.png]: /images/20221005/b7e2d1371a0b44dc9128f52594ff261f.png
[ec481ebf2aaa28c67e4d86bb8d7c15c1.png]: /images/20221005/8cd7dd6536d5425183b00adb7fe12d35.png
[5dfc0d517fe9f36daa1e8be69654241f.png]: /images/20221005/dd174f7a277d4df79a48b44584744a4d.png
[1e51d53b0bd9bab3bf344f35d66cb9c5.png]: /images/20221005/d9558fad466e4690974cc72472fee0f2.png
[bef32bbb770c3e110a3baf5ca8389980.png]: https://img-blog.csdnimg.cn/img_convert/bef32bbb770c3e110a3baf5ca8389980.png
[1f65c6fac2c8a1cafb948f7138d11fd5.png]: /images/20221005/18bb598e02df47b78c05bd3db27544aa.png
[92a158e807b57521e5532c9aca274606.png]: https://img-blog.csdnimg.cn/img_convert/92a158e807b57521e5532c9aca274606.png
[cc3f4f43ce7452b84477196be484f3e3.png]: /images/20221005/462a9ae0d91440948b1c5559d8cb0983.png
[9cc3d8ec3f278192950b2d6c57e4d77b.png]: /images/20221005/4679ce20116c43b29af3e762500944cc.png