"VS Code，用 Twig 或 Swig 標簽格式化 HTML 代碼"

Question

當我們使用 Twig 或 Swig 標簽時，有沒有辦法在 VSCode 中正確格式化 HTML，比如

{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...

現在，代碼格式化程序會刪除這些標記之前和之后的所有換行符。

無法找到合適的擴展名.. 也不是配置內部代碼格式化程序的方法。

Answer 1

我遇到了同樣的問題並解決了安裝這個擴展：

樹枝語言

安裝它，重新啟動編輯器，然后您在 Windows 上可以使用標准ALT + SHIFT + F進行格式化。

希望它有幫助。

Answer 2

與此相關的事情，我是通過在 vs 代碼中安裝樹枝來做到的。 打開 VS Code 並

Ctrl+Shift+X

並獲取樹枝擴展並安裝它。 謝謝。

Answer 3

現在有一種內置的方式； 當您嘗試格式化文檔時，您會被轉發到擴展頁面，並會運行針對給定文件格式的格式化搜索。 對於樹枝：

category:formatters xml

Twig Language 2似乎是目前最好的格式化程序的首選 VS Code Twig 擴展。

Answer 4

我一直在為此苦苦掙扎，終於找到了一個完全可行的解決方案； 所以想在這里分享。 請按照以下步驟操作，您應該一切順利：

• 下載 Vs 代碼擴展更漂亮的代碼格式化<\/a>程序。 密切注意抓住這個Prettier<\/code>包，因為 Visual Studio 提出了幾個不同的Prettier<\/code>擴展包。

• 在 Visual Studio 編輯器中，轉到Settings<\/code> --> type "format" 直到彈出格式設置，然后選擇Prettier Code Formatter - esbenp.prettier-vscode<\/code>作為您的默認格式化程序。 對User<\/code>和Workspace<\/code>選項卡執行此操作，如果不是自動完成的話。

• 接下來，您需要使用 Prettier 在 Vs Code 中添加用於正確格式化 twig 文件的melody<\/code>插件。 這實際上是一個nodejs包，所以首先需要安裝Node JS。 稍后安裝節點包時可能會遇到權限問題。 為了盡量避免這種情況， 請使用 nvm 安裝節點<\/a>。

• 現在你可以安裝旋律插件<\/a>了。 為此，請按照鏈接存儲庫的說明進行操作。 請注意，如果您尚未安裝yarn<\/code> ，您之前需要通過npm install --global yarn<\/code> 。

• 要在您的 github 存儲庫\/項目中保存項目特定的格式，您可以添加一個.vscode\/settings.json<\/code>文件，該文件包含您當前在項目中使用的一般更漂亮的配置。 這對於在開發人員\/存儲庫之間共享更漂亮的格式設置非常有用。

• .prettierrc<\/code>文件添加到您的項目根目錄，其中包含以下內容：

  這定義了上述插件的額外使用。 您可以根據需要調整配置。 您可以將包含其中包的node_modules<\/code>文件夾放入本地項目中，或者根據需要調整路徑以適應您的旋律插件在本地計算機上的位置。
  
     
     
     
  
      
      
      
  僅供參考： node_modules<\/code>文件夾由於其大小通常不會上傳到項目存儲庫。 安裝節點后，您將自動在本地計算機上獲取該node_modules<\/code>文件夾。 然后，當您安裝上述軟件包時，它應該安裝到該node_modules<\/code>文件夾中。
  
      
      
  現在添加來自whatwedo<\/code>的Twig Syntax 高亮<\/a>包。 現在，當您打開 Twig 文件時，VS Code 應該能夠識別它們。 通過在 VS Code 中打開一個.twig<\/code>文件並在右下角檢查該文件是否被識別為HTML (Twig)<\/code>來驗證這一點。 這將另外突出您的 swig 標簽。
  
      
      
      
  要驗證一切是否正常，您可以通過單擊 VS Code 右下角的Prettier<\/code>打開 prettier 終端。 現在將一些樹枝內容寫入.twig<\/code>文件並觸發格式化程序。 如果控制台沒有報錯，並且控制台提示使用了melody插件進行格式化； 當然，代碼已正確格式化； 你可以走了。