利用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 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
PHP 加密与解密的斗争
2009/04/17 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
js实现分页功能
2017/05/24 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python实现图片压缩代码实例
2019/08/12 Python
django删除表重建的实现方法
2019/08/28 Python
python3访问字典里的值实例方法
2020/11/18 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
心得体会怎么写
2013/12/30 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
倡议书格式范文
2014/04/14 职场文书
文员求职信
2014/07/15 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
复试通知单模板
2015/04/24 职场文书
女性健康讲座主持词
2015/07/04 职场文书