如何启用 VS Code HTML 错误检查/验证？

Question

我刚刚切换到 Visual Studio Netbeans 的 Web 开发代码，并且正在寻找解决方法。在 Netbeans 中，如果我忘记了标记名上的右括号，它会用红色波浪下划线指示我的错误，并在左边距中显示警告。

我原以为错误检查是像 vs 代码这样的 Web 开发编辑器中的一项基本功能。也许我只是没有找到正确的选项或扩展。

如何在 VS Code 中实现相同的 html、css 错误检查行为？

Answer 1

VS Code 默认支持代码格式化并跟踪语法错误。如果您创建一个新文件并直接尝试编写代码，那么 VS Code 将无法理解用户想要使用哪种语言或语法类型 format/correcting。因此，首先需要使用正确的扩展名保存新文件，而不是 visual studio 正确识别语法。

代码格式化可通过以下快捷方式在 VS Code 中使用：

On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I

您可以从 VS Code 市场添加 Auto Close Tag。

启动 VS Code Quick Open (Ctrl+P)，粘贴以下命令，然后按回车键。

自动添加HTML/XML关闭标签，与Visual StudioIDE或Sublime Text
相同
```
ext install auto-close-tag
```
HTMLHint 的 VS 代码集成 - HTML
的静态代码分析工具
```
ext install HTMLHint
```
根据工作区中的 CSS 文件为 HTML class 属性提供 CSS class 名称完成。还支持 React 的 className 属性。
```
ext install html-css-class-completion
```

Answer 2

VSCode 默认没有 HTML 验证。但它允许您添加扩展并启用这些功能。

要添加 HTML 验证（linting），打开 VSCode，然后按 Ctrl + P，然后在其中粘贴 ext install HTMLHint，然后按回车键。它将安装一个 HTML 验证器。您可能需要重新加载 VSCode 才能加载扩展程序。

现在，如果您打开同一个 html 文档，您会遇到语法错误，您应该会在底部的状态栏中看到一个问题 :) 并且它还会向您显示这些行中的错误.

Answer 3

这不是 VsCode 的内置功能...但是，它有很多可用的插件。我会向您推荐 HTMLHint 插件。这就是我一直在使用的。

您可以使用：ext install HTMLHint命令

安装它

Answer 4

我发现此扩展（虽然不允许您扩展内置规则）比 HTML 检查 HTML 有效性的提示更好。

名称：W3C 验证

Id: umoxfo.vscode-w3cvalidation

描述：向 Visual Studio 代码添加 W3C 验证支持。

版本：2.3.0

发布者：Umoxfo VS

市场Link：https://marketplace.visualstudio.com/items?itemName=umoxfo.vscode-w3cvalidation

Answer 5

VS Code 有一个扩展，即 HTMLHint。
您可以按照以下
安装它 1. 要打开 extensions:marketplace，请按 Ctrl + Shift + X
2. 在搜索扩展框中输入 HTMLHint
3. 点击搜索结果中的安装按钮显示 "Mike Kaufman"

开发的 HTMLHint

Answer 6

由于这里报告的 HTMLHint 有问题（错误很多，更新很少），我发现并尝试了 HTML-validate, which has a VSC extension。
后者应该是独立的，但当我安装它时，它抱怨并告诉我全局安装 HTML-validate ；我做到了，扩展似乎工作得很好，并且具有良好的定制能力，例如 ESLint。

如何启用 VS Code HTML 错误检查/验证？

How to enable VS Code HTML error checking / validation?

javascript

html

css

visual-studio-code

code-editor