DDR爱好者之家

利用vscode编写vue的简单配置详解
站长资源 2024/11/27 佚名
11 1538
DDR爱好者之家 Design By 杰米

前言

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

PS:现在推荐使用vetur插件

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

与sublime text相比，vscode有不少优点：

  • 中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。
  • 基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能，st每次都需要自己安装，浪费时间。

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

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": [
   "<template>",
   "</template>",
   "<script>",
   "export default {",
   " name: \"${1:component_name}\",",
   " data () {",
   " return {",
   " };",
   " }",
   "}",
   "</script>",
   "<style lang=\"${2:css}\" scoped>",
   "</style>"
  ],
  "description": "Create vue template"
 }
}

总结

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米