欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vscode下的vue文件格式化问题

程序员文章站 2023-08-21 14:24:19
我相信基本上每一个在vscode上面码vue代码的都会下载vetur插件用来格式化等操作,今天vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,...

我相信基本上每一个在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文件格式化问题,希望对大家有所帮助