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
的設定規則改變
-
專案的根目錄不能有
.prettierrc
、.prettierrc.js
等配置檔案,否則會覆蓋掉vscode上面的配置 - 新的配置項寫法變化: 原來只能設定全域性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 } }, 複製程式碼
沒什麼技術含量,但是對程式碼格式有要求的還是有不小的幫助的