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

前言

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

PS:

现在推荐使用vetur插件

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

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

但是st插件更丰富,vscode插件相对较少,vue相关插件vscode更是只有一个,而且使用起来有不少问题,并且作者已经很久没有更新了,折腾了一下午,最终可以用来编写vue项目了。

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

rush:plain;"> "files.associations": { "*.vue": "vue" }

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

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

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

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

rush:plain;"> { // 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" } }

总结

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

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...