详解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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
浅谈Angular 观察者模式理解
2018/11/01 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
对Python中的@classmethod用法详解
2018/04/21 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
解决Python二维数组赋值问题
2019/11/28 Python
python梯度下降算法的实现
2020/02/24 Python
在keras中实现查看其训练loss值
2020/06/16 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
化学教师教学反思
2014/01/17 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
幼儿教师工作感言
2014/02/14 职场文书
材料员岗位职责
2014/03/13 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书