博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用vscode时,如何在.vue文件中使用html代码补全功能
阅读量:6328 次
发布时间:2019-06-22

本文共 614 字,大约阅读时间需要 2 分钟。

最近在Vue大神的推荐下使用了vscode,还挺好用的,跟webstorm比起来要轻量很多,打开的速度也快,功能跟webstorm也差不多,挺丰富的,尤其是插件。最主要的是使用过程中,不会卡顿!!!这是重点!!!

那么,使用的时候发现了在.vue的文件中,你只打一个div,在按tab键,是不会自动补全代码的,想想不会自动补全代码,那得多浪费开发的时间,于是我就找到了一个解决办法,请看下面:

一、HTML Snippets

在vscode中把这个插件下载了并且启用,然后翻阅插件的ReadMe,我们可以看到如下图得FAQ:

clipboard.png

这段代码是提示我们需要在settings.json中配置files.associations的属性。

二、settings.json中配置files.associations对象

首先,依次打开“文件 --> 首选项 --> 设置”,就会看到settings.json文件了

clipboard.png

然后在settings.json中找到“常用设置”里的files.associations对象

clipboard.png

然后把鼠标滑到对象的左边,会出现如图所示的一个“编辑”的标志,点击它,就会打开编辑页,如图:

clipboard.png

按照上图的步骤去配置就可以了,然后再回到.vue的页面,打出div,再按住tab键,就可以自动补全代码了

clipboard.png

可以看到也出现了代码提示功能,你可以选择一个自己想要的,也可以不选,直接按住tab键,就可以生成<div></div>了,如下图:

clipboard.png

转载地址:http://onwoa.baihongyu.com/

你可能感兴趣的文章
字符串与整数之间的转换
查看>>
断点传输HTTP和URL协议
查看>>
redis 数据类型详解 以及 redis适用场景场合
查看>>
mysql服务器的主从配置
查看>>
巧用AJAX技术,通过updatePanel控件实现局部刷新
查看>>
20140420技术交流活动总结
查看>>
SaltStack配置salt-api
查看>>
各种情况下block的类型
查看>>
ThinkPHP 3.2.x 集成极光推送指北
查看>>
MYSQL 表情评论存储(emoji)
查看>>
js作用域链
查看>>
java中如何选择Collection Class--java线程(第3版)
查看>>
ASP.NET页面之间传递值的几种方式
查看>>
Linux系统权限
查看>>
TinyTemplate模板引擎火热出炉,正式开源了~~~
查看>>
android开发之GPS定位详解
查看>>
Mac OS X如何重装 苹果电脑重装操作系统
查看>>
集算器读写EXCEL文件的代码示例
查看>>
Ubuntu Server上搭建可用于生产环境的ASP.NET服务器
查看>>
php---PHP使用GD库实现截屏
查看>>