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 面向对象编程  function是方法(函数)
Sep 17 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
常用DOM整理
Jun 16 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
mysql时区问题
2008/03/26 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
thinkPHP查询方式小结
2016/01/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python实现树形打印目录结构
2018/03/29 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
保密普查工作实施方案
2014/02/25 职场文书
物流专业求职信
2014/06/30 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
大学体育课感想
2015/08/10 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书