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


Posted in Javascript onJune 17, 2017

前言

本文主要给大家介绍的是关于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"
 }
}

总结

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

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
React 高阶组件入门介绍
Jan 11 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
JS实现新建文件夹功能
Jun 17 #Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
JS实现商品筛选功能
Aug 19 #Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
You might like
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
mysql 字段类型说明
2007/04/27 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python单线程实现多个定时器示例
2014/03/30 Python
深入理解python try异常处理机制
2016/06/01 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python 求数组局部最大值的实例
2019/11/26 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
EJB timer的种类
2014/10/28 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
对孩子的寄语
2014/04/09 职场文书
员工安全生产承诺书
2014/05/22 职场文书
小学教师读书活动总结
2014/07/08 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python
Fluentd搭建日志收集服务
2022/09/23 Servers