如何啟用VS Code HTML錯誤檢查/驗證？

Question

我剛剛從Netbeans切換到Visual Studio Code進行Web開發，並且正在尋找解決方法。 在Netbeans中，如果我忘記了標記名的右括號，它將用紅色的波浪形下划線指示警告我的錯誤，並在左邊距顯示警告。

我本來認為錯誤檢查是Web開發編輯器（如vs代碼）中的一項基本功能。 也許我只是找不到合適的選項或擴展名。

如何在VS Code中實現相同的html，css錯誤檢查行為？

Answer 1

VSCode默認沒有HTML驗證。 但是，它允許您添加擴展並啟用這些功能。

要添加HTML驗證（啟動），請打開VSCode，然后按Ctrl + P ，然后在其中粘貼ext install HTMLHint ，然后按Enter。 它將安裝HTML驗證程序。 您可能需要重新加載VSCode才能加載擴展。

現在，如果打開相同的html文檔，則出現語法錯誤，您應該會看到狀態欄底部顯示一個問題:)，並且還會在這些行中顯示錯誤。

Answer 2

VS Code默認支持代碼格式化，它可以跟蹤語法錯誤。 如果您創建一個新文件並直接嘗試編寫代碼，則VS Code無法理解用戶要格式化/更正的語言或語法類型。 因此，首先需要以適當的擴展名保存新文件，而不是Visual Studio正確識別語法。

可通過以下快捷方式在VS Code中使用代碼格式：

• 在Windows上Shift + Alt + F
• 在Mac上Shift + Option + F
• 在Ubuntu上Ctrl + Shift + I

您可以從VS Code市場添加Auto Close Tag 。

啟動VS Code快速打開（Ctrl + P），粘貼以下命令，然后按Enter。

1. 自動添加HTML / XML關閉標簽，與Visual Studio IDE或Sublime Text相同

    ext install auto-close-tag 

2. 用於HTMLHint的VS代碼集成-用於HTML的靜態代碼分析工具

    ext install HTMLHint 

3. 根據工作空間中的CSS文件為HTML類屬性提供CSS類名稱完成。 還支持React的className屬性。

    ext install html-css-class-completion 

Answer 3

VS Code默認支持此功能。 它還默認啟用了Emmet支持，這意味着您不必擔心關閉HTML標記。 它會自動添加結束標簽。

Answer 4

這不是VsCode的內置功能...但是，它有很多可用的插件。 我建議您使用HTMLHint插件。 這就是我一直在使用的。

您可以使用以下命令進行ext install HTMLHint ： ext install HTMLHint命令

Answer 5

VS Code的擴展名為HTMLHint。
您可以按照以下說明進行安裝
1.要打開擴展程序：市場，請按Ctrl + Shift + X
2.在搜索擴展框中輸入HTMLHint
3.單擊搜索結果中的“安裝”按鈕，顯示“ Mike Kaufman”開發的HTMLHint

Answer 6

我發現此擴展名（雖然不允許您擴展內置規則）在檢查HTML有效性方面比HTMLHint更好。

名稱：W3C驗證

ID：umoxfo.vscode-w3cvalidation

說明：將W3C驗證支持添加到Visual Studio Code。

版本：2.3.0

發布者：Umoxfo VS

市場鏈接： https : //marketplace.visualstudio.com/items?itemName=umoxfo.vscode-w3cvalidation