vscode下的vue文件格式化问题
更新时间：2018年11月28日 08:02:08 作者：前端全栈开发学习
这篇文章主要介绍了vscode下的vue文件格式化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
我相信基本上每一个在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文件格式化问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了基于Vue 实现一个中规中矩loading组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
在Vue中，组件是构建页面的基本单位。通过组件化开发，可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时，需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题，以实现更好的组件复用和开发效率2023-05-05
这篇文章主要为大家详细介绍了Vue使用Echarts实现数据可视化的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白,所以下面这篇文章主要给大家介绍了关于vue3动态路由刷新后空白或者404问题的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-09-09
这篇文章主要介绍了Vue项目配置跨域访问和代理proxy设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时，回调函数自动调用，进行相关操作,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue element-admin权限控制之按钮使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
data属性是Vue实例的数据对象,可以绑定的是对象或者是函数,下面这篇文章主要给大家介绍了关于VUE中data配置项详细解析的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论