欢迎来到山村网

如何利用vscode编写vue的简单配置

2019-03-09 12:59:18浏览:219 来源:山村网   
核心摘要:本文主要给大家介绍的是关于vscode编写vue简单配置的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:PS:现在推荐

本文主要给大家介绍的是关于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" }}
(责任编辑:豆豆)
下一篇:

MongoDB动态字段如何设计

上一篇:

WiFi限制速度设置方法

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com