如何在 VS Code 中自動格式化代碼

如何在 VS Code 中自動格式化代碼

如果您正在考慮學習編碼,或者您已經每天都在編寫代碼,那麼像 Visual Studio Code 這樣可靠的代碼編輯器是必須的。當您編寫代碼時,您應該考慮格式化,因為它更易於人們閱讀。

所有這些關於縮進和行距的特定規則都很重要,但是當您專注於工作時很容易忘記它們。

這就是為什麼 VS Code 允許你使用自動格式化擴展來幫助你。一些自動格式化擴展可以格式化不止一種編程語言,而另一些則需要您集成專門的擴展。

如何自動格式化 HTML

超文本標記語言或 HTML 是一種用於創建和顯示網頁的編碼語言。Web 開發人員和軟件工程師每天都在使用 HTML,並且可以從自動格式化工具中受益。

如果您更喜歡 VS Code 編輯器,可以通過以下方法找到流行的代碼格式化程序 Prettier,並打開自動格式化功能。

  • 在您的計算機上打開 Visual Studio Code。
  • 單擊屏幕左側的擴展選項卡。它以四個塊的形式呈現。
  • 在搜索框中輸入“Prettier code formatter”。
  • 您將獲得多個搜索結果,但選擇 Prettier 製作的而不是其他人或公司製作的。
  • 單擊“安裝”按鈕,擴展程序將在幾秒鐘內下載。

通過安裝 Prettier 格式化程序,您可以開啟自動格式化功能,確保編寫代碼時樣式一致。

  • 在 VS Code 中打開或創建一個新的 HTML 文件。
  • 轉到位於屏幕左下角的“設置”。
  • 在搜索框中鍵入“格式”,然後單擊“用戶”選項卡。
  • 單擊默認格式選項並從列表中選擇 Prettier。
  • 向下滾動一點,直到看到“編輯器:保存時格式化”選項。
  • 選中此選項旁邊的框。
  • 返回您的文件並檢查設置是否有效。

Prettier 應該在您保存 HTML 文件時自動格式化它們。

自動 JSON 格式

JavaScript 對象表示法或 JSON 被歸類為與語言無關的數據交換格式。移動應用程序和計算機程序使用 JSON 文件從服務器讀取數據並將其顯示在屏幕上。

在 Visual Studio 代碼編輯器中創建 JSON 文件時,還需要注意格式。好消息是您可以在 VS Code 中使用 Prettier 格式化程序擴展來確保您的 JSON 文件的樣式一致。

這是為 JSON 文件啟用自動格式化功能所需要做的一切。

  • 啟動 VS Code 並轉到窗口左側的 Assigned Extensions 選項卡。
  • 在搜索字段中搜索“Prettier code formatter”。
  • 第一個結果通常是您要單擊的結果。但是,可以肯定的是,選擇一個寫著“更漂亮”的作為開發者。
  • 單擊“安裝”並等待幾秒鐘以加載格式化程序。

安裝 Prettier 格式化程序後,請確保按照以下步驟啟用自動格式化功能。

  • 創建一個新的 JSON 文件或打開一個尚未格式化的文件。
  • 點擊左下角的“設置”。
  • 找到“格式”。
  • 單擊默認格式部分。從下拉列表中選擇“更漂亮”。
  • 當您看到“編輯器:保存時格式化”選項時,向下滾動並停止。
  • 選中此選項旁邊的框。
  • 確保自動格式化功能正常工作。

就這樣。VS Code 編輯器中的 Prettier 擴展簡化了自動格式化。

自動 Python 格式

Python 是當今最流行的編程語言之一,被 Web 開發人員和編程愛好者廣泛使用。它用於設計和構建軟件和網站、分析數據、自動化任務等等。

如果您使用 VS Code 編輯 Python 文件,則需要使用正確的格式化程序。雖然 Prettier 可以與許多編程語言一起使用,但它與 Python 不兼容。

幸運的是,VS Code 提供了一個解決方案。VS Code 中最好的 Python 格式化程序之一是 Black,它可用於在您自動保存文件時格式化代碼。但是,在使用 Black 之前,您需要下載 VS Code 的 Microsoft Python 擴展:

  • 打開 VS Code 並在搜索框中搜索“Python”。
  • 確保它是 Microsoft 擴展,然後單擊安裝。
  • 要安裝 Phyton 格式化程序,請在虛擬環境中輸入以下文本:“$ pip install black”。
  • 轉到 VS Code 中的“設置”並蒐索“Phyton Formatting Provider”。
  • 從下拉菜單中選擇“黑色”。
  • 向下滾動並查找“編輯器:保存時格式化”選項。
  • 選中此選項旁邊的框。

Black,Python 格式化程序現在會在您每次保存文件時自動格式化代碼。

VS Code 保存時自動格式化

無論您在 VS Code 中使用哪種編程語言或代碼格式化程序,都可以打開自動格式化功能。

大多數開發人員在 VS Code 中使用了幾個代碼格式化擴展,因此您可以確保它們中的每一個在保存文件時都會自動格式化文件。

這是它的工作原理。

  • 打開 Visual Studio 代碼編輯器。
  • 點擊左下角的“設置”齒輪圖標。
  • 找到“格式化程序”並單擊“編輯器:默認格式化程序”。
  • 從下拉菜單中選擇要使用的代碼格式化程序。
  • 向下滾動一點並選中“編輯器:保存時格式化”選項旁邊的框。

您可以對在 VS Code 中使用的每個代碼格式化程序重複此過程。

經常問的問題

為什麼自動“保存時格式化”不起作用?

如果您在 VS Code 的格式化程序中有“保存時格式化”選項並且它不能正常工作,那麼您可能正在處理一個錯誤。

您的格式化程序版本可能有問題,您需要檢查是否有可用更新。但是,問題可能不在您的最後,崩潰將由 VS Code 開發人員修復。

如何在 VS Code 中禁用自動格式化?

禁用自動格式化功能非常簡單。請按照以下步驟關閉自動格式化。

1. 打開 VS Code 編輯器並單擊“設置”圖標。

2.找到“格式化程序”並選擇要禁用自動格式化的格式化程序。

3.找到“編輯器:保存時格式化”選項並取消選中它旁邊的框。

Visual Studio Code 中的輕鬆自動代碼格式化

使用 VS Code 的最佳方面之一是精心設計的界面,即使是初學者也可以瀏覽編輯器。

正確且連續的代碼格式對於可讀代碼至關重要,但如果您必須手動執行這些約定,則可能會很麻煩。

但好消息是 VS Code 編輯器有很多代碼格式化工具,可以更輕鬆、更快速地編寫可讀代碼。

無論是 Prettier、Black 還是任何其他擴展,用戶始終可以選擇在文件保存時自動格式化代碼。

您使用哪種編程語言以及哪種格式化程序效果最好?請在下面的評論中告訴我們。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *