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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
清空上传控件input file的值
2010/07/03 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python端口扫描简单程序
2016/11/10 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python 调用有道api接口的方法
2019/01/03 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Django操作session 的方法
2020/03/09 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
小学少先队活动方案
2014/02/18 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
拉贝日记观后感
2015/06/05 职场文书
2016年国陪研修感言
2015/11/18 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python