詳解vscode中如何格式化vue文件

本篇文章為大家介紹一下在vscode中格式化vue檔案的方法，附自訂快捷鍵的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

vscode使用beautify外掛程式格式化vue檔案

1. 先安裝外掛程式beautify

【推薦學習：《vscode教學》】

2.  開啟設定=> 搜尋 beautify.language 

##3.  設定 json 設定了

 

"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即可實現儲存時自動格式化

ps : 為了操作方便可以自訂快捷鍵 

1. 快捷鍵設定步驟

#2.  自訂快速鍵

# 

 {
  "key": "ctrl+b",//自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

ps: 若要修改編輯器自定義的快捷鍵點這裡直接輸入鍵位即可

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是詳解vscode中如何格式化vue文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！