css 如何启用Visual Studio Code HTML错误检查和验证?

eoxn13cs  于 2023-04-13  发布在  其他
关注(0)|答案(6)|浏览(303)

我刚刚从NetBeans切换到Visual Studio Code for web development,并且正在寻找我的方法。在NetBeans中,如果我忘记了标记名上的结束括号,它将用红色波浪形下划线和左边距的警告来指示我的错误。
我本以为错误检查是像VisualStudioCode这样的Web开发编辑器的基本功能,也许我只是没有找到正确的选项或扩展。
如何在Visual Studio Code中实现相同的HTML、CSS错误检查行为?

8wtpewkr

8wtpewkr1#

Visual Studio Code默认情况下没有HTML验证。但它允许您添加扩展并启用这些功能。
若要添加HTML验证(linting),请打开Visual Studio Code,然后按Ctrl + P。然后将ext install HTMLHint粘贴到其中,然后按Enter。它将安装HTML验证器。您可能需要重新加载Visual Studio Code以加载扩展。
现在,如果你打开同样的HTML文档,你应该看到有一个问题显示在底部的状态栏:),它也会显示这些行中的错误。

ercv8c1e

ercv8c1e2#

默认情况下,Visual Studio Code支持代码格式设置,并跟踪语法错误。如果您创建新文件并直接尝试编写代码,则Visual Studio Code将无法理解用户要设置格式或更正的语言或语法类型。
因此,首先需要使用正确的扩展名保存新文件,然后Visual Studio Code可以正确识别语法。
在Visual Studio Code中,可以通过以下快捷方式使用代码格式:

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

您可以从Visual Studio Code市场添加 * 自动关闭标记 *。
启动Visual Studio代码快速打开(Ctrl + P),粘贴以下命令,然后按Enter键。
1.自动添加HTML/XML关闭标记,与Visual Studio IDE或Sublime Text相同

ext install auto-close-tag
  1. Visual Studio Code integration for HTMLHint -一个HTML静态代码分析工具
ext install HTMLHint

1.基于工作区中的CSS文件为HTML class属性提供CSS类名完成。它还支持React的className属性。

ext install html-css-class-completion
watbbzwu

watbbzwu3#

这不是Visual Studio Code的内置功能......但是,它有很多可用的插件。我会向您推荐HTMLHint插件。这就是我一直在使用的。
您可以使用ext install HTMLHint命令安装它。

6gpjuf90

6gpjuf904#

我发现扩展 * W3C Validation *(虽然不能扩展内置规则)在检查HTML有效性方面比HTMLHint工作得更好。
ID:umoxfo.vscode-w3cvalidation
说明:将W3C验证支持添加到Visual Studio Code。
版本:2.3.0
发行商:Umoxfo VS

yiytaume

yiytaume5#

Visual Studio Code有一个扩展名是HTMLHint。
您可以按照以下说明安装。
1.要打开扩展:市场,请按Ctrl + Shift + X
1.在搜索扩展名框中键入HTMLHint
1.点击搜索结果中的安装按钮,显示由“Mike考夫曼”开发的HTMLHint

vtwuwzda

vtwuwzda6#

由于HTMLHint在这里被报告为有问题(很多bug,很少更新),我找到并尝试了HTML-validate,它有一个Visual Studio Code extension
后者应该是独立的,但当我安装它时,它抱怨并告诉我安装HTML-validate全局;我做到了,扩展似乎工作得很好,并有良好的定制能力,如ESLint例如。

相关问题