利用vscode编写vue的简单配置详解
2017-06-17 09:13
961 查看
前言
本文主要给大家介绍的是关于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" } }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- 在windows下的VSCode编写C++配置
- MAC电脑配置node.js环境利用vue.js开发前端webapp详解
- 【VSCode】配置完全手册(编写中)
- vscode 编写vue项目1
- vue项目eslint环境配置与vscode配置eslint
- vscode简单配置
- vue.js简单配置axios的方法详解
- 利用types增强vscode中js代码提示功能详解
- VS2013 利用msvsmon远程调试发布到服务器IIS上程序环境配置详解
- [MySQL]利用apache第三方jar包,编写的的JDBCUtils工具类过程及内容详解.附带配置文件的详细注解.
- 利用VSCode编写ArcPy代码
- 整理:Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++(Windows)
- 利用vscode调试编译后的js代码详解
- 整理:Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++(Windows)
- CocosCreator手记03——简单配置VSCode的TypeScript环境
- VSCode之C/C++调试配置详解
- VSCode配置C++编写环境
- VS Code使用 Vue工程配置 eslint
- VS2013 利用msvsmon远程调试发布到服务器IIS上程序环境配置详解
- vscode eslint配置vue遇到的问题