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学习笔记之jQuery中的$
Jan 19 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
如何编写jquery插件
Mar 29 jQuery
JS函数节流和函数防抖问题分析
Dec 18 Javascript
对node.js中render和send的用法详解
May 14 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
基于vue实现图片验证码倒计时60s功能
Dec 10 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生成mysql的数据字典
2016/07/07 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python Tkinter版学生管理系统
2019/02/20 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python如何运行js语句
2020/09/09 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
大学生村官典型材料
2014/01/12 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
给老婆的保证书范文
2014/04/28 职场文书
企业文化标语口号
2014/06/09 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
放弃继承权公证书
2015/01/23 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python