利用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 12 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
七个很有意思的PHP函数
May 12 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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/11/26 PHP
php HandlerSocket的使用
2011/05/02 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Python中方法链的使用方法
2016/02/23 Python
python http接口自动化脚本详解
2018/01/02 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
django+echart数据动态显示的例子
2019/08/12 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
一句话工作感言
2014/03/01 职场文书
小学生环保倡议书
2014/05/15 职场文书
奉献演讲稿范文
2014/05/21 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
公民授权委托书
2014/10/15 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang