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 相关文章推荐
javascript原始值和对象引用实例分析
Apr 25 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
微信小程序如何获取用户收货地址
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
单位速度在实战中的运用
2020/03/04 星际争霸
?繁体转换的class
2006/10/09 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
TensorFlow高效读取数据的方法示例
2018/02/06 Python
点球小游戏python脚本
2018/05/22 Python
python自动发送邮件脚本
2018/06/20 Python
python人民币小写转大写辅助工具
2018/06/20 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
人事部主管岗位职责
2013/12/26 职场文书
售后客服工作职责
2014/06/16 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
师德师风个人整改措施
2014/10/27 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
演讲开头怎么书写?
2019/08/06 职场文书