利用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 EasyPager 分页函数
May 25 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
理理Vue细节(推荐)
Apr 16 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 xml文件操作代码(一)
2009/03/20 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP加密解密类实例分析
2015/04/20 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Element-UI+Vue模式使用总结
2020/01/02 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
vue实现图书管理系统
2020/12/29 Vue.js
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python动态加载变量示例分享
2014/02/17 Python
python django集成cas验证系统
2014/07/14 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python模糊图片过滤的方法
2018/12/14 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
德国家具折扣店:POCO
2020/02/28 全球购物
存储过程的优点有哪些
2012/09/27 面试题
会计专业应届生自荐信
2014/02/07 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js