利用vscode编写vue的简单配置详解

网友投稿 464 2023-05-07


利用vscode编写vue的简单配置详解

前言

本文主要给大家介绍的是关于vscode编写vue简单配置的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

PS:现在推荐使用vetur插件

win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode。

与sublime text相比,vscode有不少优点:

中文输入法支持更好。在windows平台下,需要st支持中文输入需要安装各种插件,而且效果也是差强人意。

基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能,st每次都需要自己安装,浪费时间。

vscode关于vue插件现在只有vscode-vue一个,安装完成代码提示并没有生效,这是因为vue文件的语言模式默认为html,需要在setting.json中设置:

"files.associations": {

"*.vue": "vue"

}

但是此时编写样式emmet插件不能正确识别,所以我后来也放弃了这种方式。

仔细思考,编写vue项目主要需要:

代码补全&代码片段

emmet正确生成html标签

emmet正确生成css、scss

代码高亮

其中2、3、4点,在html中都是可以做到的,而vue的代码补全与代码片段只需要自己编写就可以了,于是我将vue文件的语言模式还原为默认的html,在用户代码片段中加入vue文件需要的代码片段(文件-首选项-用户代码片段-html),最终效果还可以。

添加的代码片段(持续更新):

{

// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and

// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

// $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.

// Example:

"Print to console": {

"prefix": "log",

"body": [

"console.log('$1');",

"$2"

],

"description": "Log output to console"

},

"Create vue template": {

"prefix": "vuec",

"body": [

"

"",

"",

""

],

"description": "Create vue template"

}

}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring boot 数据库连接断线重连问题
下一篇:java 是否实现接口(java 接口能实现接口吗)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~