快捷導(dǎo)航

vscode下的vue文件格式化問(wèn)題

更新時(shí)間：2018年11月28日 08:02:08 作者：前端全棧開(kāi)發(fā)學(xué)習(xí)

這篇文章主要介紹了vscode下的vue文件格式化問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

我相信基本上每一個(gè)在vscode上面碼Vue代碼的都會(huì)下載Vetur插件用來(lái)格式化等操作，今天Vetur更新了 0.14.2 版本，最近在使用的時(shí)候，感覺(jué)格式化總是出問(wèn)題，去Vetur上面看了下，發(fā)現(xiàn)Vetur的配置做了下面的改動(dòng)，看到幾個(gè)社區(qū)都沒(méi)有人說(shuō)明，我就先說(shuō)下，默認(rèn)的格式化配置是：

{
 "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"
}

不需要修改的話(huà)就不管他，我的建議是跟著使用默認(rèn)的格式化工具就行

默認(rèn)的html格式化工具變?yōu)閜rettyhtml

下面是原來(lái)使用js-beautify-html格式化的配置，現(xiàn)在官方已經(jīng)不推薦了，我準(zhǔn)備跟著變?yōu)閜rettyhtml

原來(lái)的：

"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_line_length": 160,
  "wrap_attributes": "auto",
  "end_with_newline": false
 }
 },

新的配置：

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  // 單行超過(guò)160個(gè)長(zhǎng)度的時(shí)候開(kāi)始換行顯示各種參數(shù)和事件
  "printWidth": 160
 }
 },

關(guān)于prettier的設(shè)置規(guī)則改變

1.項(xiàng)目的根目錄不能有 .prettierrc 、 .prettierrc.js 等配置文件，否則會(huì)覆蓋掉vscode上面的配置

2.新的配置項(xiàng)寫(xiě)法變化：原來(lái)只能設(shè)置全局js的配置的：

"prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ]

可以設(shè)置vue文件里面的，和js文件不沖突：

// js文件
 "prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ]，
 // vue文件里面的js
 "vetur.format.defaultFormatterOptions": {
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

和html的格式化寫(xiě)在一起就是：

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  "printWidth": 160
 },
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

總結(jié)

以上所述是小編給大家介紹的vscode下的vue文件格式化問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: