本篇文章為大家介紹一下在vscode中格式化vue檔案的方法,附自訂快捷鍵的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
【推薦學習:《vscode教學》】
"beautify.language": { "js": { "type": [ "javascript", "json" ], "filename": [ ".jshintrc", ".jsbeautify" ] }, "css": [ "css", "scss" ], "html": [ "htm", "html", "vue"//在这里加上vue ] }
# 1.在工作目錄下建立.jsbeautifyrc檔案
{ "brace_style": "none,preserve-inline", "indent_size": 2, "indent_char": " ", "jslint_happy": true, "unformatted": [""], "css": { "indent_size": 2 } }
檔案內容如上,其中有些參數要重點說明下。
brace_style
,格式風格,詳見官方說明(為避免和eslint預設檢查衝突,建議此屬性設定為none,preserve-inline) indent_size
,縮排長度(為避免和eslint預設檢查衝突,建議此屬性設為2)indent_char
,縮排填滿的內容(充滿♂)jslint_happy:true
,若要搭配jslint使用,請開啟此選項unformatted: ["a","pre"]
,這裡放不需要格式化的標籤類型。注意template
也是預設不格式化的,.vue的template標籤如果需要格式化請在.jsbeautifyrc重新定義不帶template的聲明屬性。 .jsbeautifyrc設定官方文件位址:Click here
#2.啟用儲存時自動
##在VSCode的設定檔裡新增editor.formatOnSave:true即可實現儲存時自動格式化
{ "key": "ctrl+b",//自己定键位 "command": "HookyQR.beautify", "when": "editorFocus" }
程式設計影片! !
以上是詳解vscode中如何格式化vue文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!