首頁 > 開發工具 > VSCode > 主體

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

青灯夜游
發布: 2021-05-20 18:08:53
轉載
8861 人瀏覽過

本篇文章為大家介紹一下在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中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!