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下的几个你可能没用过的功能
Aug 29 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
js日期相关函数总结分享
Oct 15 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
vue使用过滤器格式化日期
2021/01/20 Vue.js
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
大课间活动制度
2014/01/18 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
社区平安建设方案
2014/05/25 职场文书
求职简历自荐信
2014/06/18 职场文书
2014年管理工作总结
2014/11/22 职场文书
费用申请报告范文
2015/05/15 职场文书
工作表现证明
2015/06/15 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL