VSCode關閉保存時自動格式化

一、實現功能介紹

在使用VSCode進行編碼的過程中，常常需要進行代碼規範化處理。而使用VSCode提供的「保存時自動格式化」功能，可以解決這個問題。啟用該功能後，每當用戶輸入ctrl+s進行保存時，VSCode會在執行保存操作之前自動對文件進行代碼格式化。這樣能夠使代碼整潔易讀，提高代碼的可維護性和可讀性。

實際上，該功能並不是默認開啟的，需要進行相關設置。同時，用戶可以通過自定義設置來調整格式化規則、修改不同文件類型的格式化程序等等。

打開VSCode，依次進入「文件」->「首選項」->「設置」，或直接使用快捷鍵ctrl+,進入「用戶設置」頁面。在搜索框中輸入「format on save」，找到「Editor: Format On Save」選項，將其勾選即可開啟保存時自動格式化功能。

"editor.formatOnSave": true

在VSCode中，可以使用多種代碼格式化程序，如Prettier、JS-Beautify等。在使用「保存時自動格式化」功能時，需要確認使用的格式化程序，並進行相應配置。

在搜索框中輸入「format provider」，找到「Editor: Default Formatter」選項，點擊「編輯設置(JSON)」按鈕，找到並修改「[languageId]」後綴對應文件類型的默認代碼格式化程序。

"[html]": "js-beautify-html",
"[javascript]": "prettier",
"[typescript]": "prettier",
"[json]": "prettier"

可以通過設置「Editor: Format On Save Mode」選項來控制保存時執行格式化的範圍，支持的值有「file」和「modifications」。

同時，用戶也可以使用「Editor: Default Formatter Options」選項來對不同格式化程序的參數進行設置。例如Prettier可以配置代碼的縮進、行長度、分號等等。

"editor.formatOnSaveMode": "file",
"prettier.printWidth": 120,
"prettier.tabWidth": 4,
"prettier.semi": true,
"prettier.singleQuote": true

在實際使用過程中，不同文件類型的代碼格式化要求可能會有所不同。例如在編寫HTML文件時，用戶通常會期望標籤與標籤之間的空格有固定的規則，這時就可以針對HTML文件進行單獨的格式化配置。

在搜索框中輸入「file associations」，找到「Files: Associations」選項，點擊「添加項目」按鈕，在彈出的對話框中輸入文件類型和對應的語言ID，然後在VSCode頁面完成格式化配置。

"files.associations": {
    "*.xx": "languageID"
}

用戶在使用「保存時自動格式化」功能時，可以根據實際需求選用不同的代碼格式化程序。例如Prettier和JS-Beautify都很常用，用戶可以根據自己的使用習慣自由切換。

在搜索框中輸入「format provider」，找到「Editor: Default Formatter」選項，選擇自己喜歡的代碼格式化程序，然後按照上文說明進行配置即可。

在使用「保存時自動格式化」功能之前，建議先檢查代碼的格式，確保代碼質量可以得到進一步提高。可以使用VSCode中內置的代碼格式化工具，或使用外部的代碼質量工具如ESLint等。

如果代碼質量不高，沒有進行規範化處理，格式化後也只是換湯不換藥，依然難以維護。這時可以考慮使用代碼重構工具，對代碼進行全面重構，提高代碼質量和可讀性。

VSCode是一款非常強大的代碼編輯器，提供了眾多優秀的功能輔助用戶進行編碼。其中「保存時自動格式化」功能可以大大提高代碼可讀性，使代碼更加優秀。希望本文介紹的相關設置和使用建議對大家有所幫助。

原創文章，作者：WJVCI，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/361514.html