详解VScode编辑器vue环境搭建所遇问题解决方案


Posted in Javascript onApril 26, 2019

前言

为什么选择VScode?

在之前我用过sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。应该还有一些用过几次的编辑器,记不起来的,这些编辑器的作用不外乎一点——为了开发迅速。基本都会自带代码提示插件。随着项目越来越大,出了一系列问题,而这些问题会大量浪费我们的时间(我们只想简单的编程),故而编辑器插件的数量和支持程度成为了我们选择编辑器的重要条件,这就是为什么选择VScode,它拥有大量的插件,可以帮助我们完成我们没必要浪费时间去做的一些事情,比如代码缩紧,追加分号等等。

VScode的优势

  1. 拥有大量的插件供我们选择
  2. 跨平台可用,支持mac和windows
  3. 简单配置,json语法,开发通用
  4. 主题换肤,随心所欲
  5. vue常用(或非常用)插件介绍

vetur:用于vue语法高亮

详解VScode编辑器vue环境搭建所遇问题解决方案

prettier:格式化代码

详解VScode编辑器vue环境搭建所遇问题解决方案

ESLint:代码检查

详解VScode编辑器vue环境搭建所遇问题解决方案

Beautify:代码美化插件,格式化html

详解VScode编辑器vue环境搭建所遇问题解决方案

目前这几款插件就够用了!后续在补充其他插件

配置插件常见问题汇总

iview的标签报错 x-invalid-end-tag

{
	“vetur.validation.template”: false
}

 格式化代码的时候template里的标签属性也换行(Ps. 属性不换行)

{
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
	  "js-beautify-html": {
	   "wrap_attributes": "auto"
	  },
	  "prettyhtml": {
	   "printWidth": 120,
	   "singleQuote": false,
	   "wrapAttributes": false,
	   "sortAttributes": false
	  }
	}
}

保存自动格式化不生效

{
	// 需要自动保存的必须配置autoFix
	"eslint.validate": [
	  "javascript",
	  "javascriptreact",
	  {
	   "language": "html",
	   "autoFix": true
	  },
	  {
	   "language": "vue",
	   "autoFix": true
	  }
	],
	// 保存自动修复
	"eslint.autoFixOnSave": true,
}

以上所述是小编给大家介绍的了VScode编辑器vue环境搭建所遇问题解决方案详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript常用方法总结
May 14 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
react高阶组件添加和删除props
Apr 26 #Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 #Javascript
vue 进阶之实现父子组件间的传值
Apr 26 #Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 #Javascript
JS异步错误捕获的一些事小结
Apr 26 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python入门篇之字符串
2014/10/17 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python模块smtplib学习
2018/05/22 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python实现简易学生信息管理系统
2020/04/05 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python中K-means算法基础知识点
2021/01/25 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
授权委托书(完整版)
2014/09/10 职场文书
捐助感谢信
2015/01/22 职场文书
实习证明格式范文
2015/06/16 职场文书
养成教育主题班会
2015/08/13 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书