vscode下的vue文件格式化问题


Posted in Javascript onNovember 28, 2018

我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是:

{
 "vetur.format.defaultFormatter.html": "prettyhtml",
 "vetur.format.defaultFormatter.css": "prettier",
 "vetur.format.defaultFormatter.postcss": "prettier",
 "vetur.format.defaultFormatter.scss": "prettier",
 "vetur.format.defaultFormatter.less": "prettier",
 "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
 "vetur.format.defaultFormatter.js": "prettier",
 "vetur.format.defaultFormatter.ts": "prettier"
}

不需要修改的话就不管他,我的建议是跟着使用默认的格式化工具就行

默认的html格式化工具变为prettyhtml

下面是原来使用js-beautify-html格式化的配置,现在官方已经不推荐了,我准备跟着变为prettyhtml

原来的:

"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_line_length": 160,
  "wrap_attributes": "auto",
  "end_with_newline": false
 }
 },

新的配置:

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  // 单行超过160个长度的时候开始换行显示各种参数和事件
  "printWidth": 160
 }
 },

关于prettier的设置规则改变

1.项目的根目录不能有 .prettierrc 、 .prettierrc.js 等配置文件,否则会覆盖掉vscode上面的配置

2.新的配置项写法变化: 原来只能设置全局js的配置的:

"prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ]

可以设置vue文件里面的,和js文件不冲突:

// js文件
 "prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ],
 // vue文件里面的js
 "vetur.format.defaultFormatterOptions": {
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

和html的格式化写在一起就是:

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  "printWidth": 160
 },
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

总结

以上所述是小编给大家介绍的vscode下的vue文件格式化问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 #Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 #Javascript
js canvas实现画图、滤镜效果
Nov 27 #Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
You might like
19个Android常用工具类汇总
2014/12/30 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
详解Python实现进度条的4种方式
2020/01/15 Python
django admin 添加自定义链接方式
2020/03/11 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
个人自我评价和职业目标
2014/01/24 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
年终晚会活动方案
2014/08/21 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
党员剖析材料范文
2014/12/18 职场文书
小浪底导游词
2015/02/12 职场文书
绿色环保倡议书
2015/04/28 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书