How can I enable Visual Studio Code HTML error checking and validation?

Question

I have just switched to Visual Studio Code for web development from NetBeans and am finding my way around. In NetBeans, if I forget the closing bracket on a tagname it will indicate my error with a red squiggly underline, and the alert in the left margin.

I would have thought error checking to be a fundamental function in a web development editor like Visual Studio Code. Maybe I am just not finding the right option or extension.

How can I achieve this same HTML, CSS error checking behaviour in Visual Studio Code?

VScode is not a fully featured IDE like netbeans :) You can extend vscode to fit your needs through extensions. Please check my answer. — Nimeshka Srimal, Jun 15 '17 at 06:33

score 88 · Accepted Answer · edited Apr 12 '23 at 21:13

88

Visual Studio Code doesn't have HTML validation by default. But it allows you to add extensions and enable these features.

To add HTML validation (linting), open Visual Studio Code, and then press Ctrl + P. Then paste ext install HTMLHint in it, and press Enter. It will install an HTML validator. You may need to reload Visual Studio Code to load the extension.

Now if you open the same HTML document you had the syntax error in, you should see there's an issue shown at the status bar at the bottom :), and it will also show you the errors in those lines.

edited Apr 12 '23 at 21:13

Peter Mortensen

30,738
21
105
131

answered Jun 15 '17 at 06:31

Nimeshka Srimal

8,012
5
42
57

2

Thank you all for your prompt response, the htmlhint extension was exactly what I needed and works great, thank you :) – Marc Jun 15 '17 at 07:11
2

Note: The author of this extension has not fixed any bugs from a long time and he not respond. So the plugin still have some bugs – kanlukasz Apr 04 '20 at 13:49
@kanlukasz What kind of bugs? – Hashim Aziz Mar 10 '22 at 02:25
1

@HashimAziz, for example: https://github.com/microsoft/vscode-htmlhint/issues/60 – kanlukasz Mar 10 '22 at 06:19
2

HTMLHint is not a validator. It is a linter. It cares about things like "Always quotes around attribute values, even if they are optional" but not "is this attribute allowed on this element". – Quentin Mar 29 '22 at 13:42
How do I enable the validator in the Visual Studio Code after I have installed it? – adrCoder Jul 06 '22 at 13:40

score 9 · Answer 2 · edited Apr 12 '23 at 21:29

Visual Studio Code by default supports code formatting and it tracks the syntactical errors. If you create a new file and directly try to write the code then Visual Studio Code would not be able to understand which language or type of syntax the user wants to format or correct.

So, one first needs to save the new file with the proper extension, and then Visual Studio Code can properly identify the syntax.

The code formatting is available in Visual Studio Code through the following shortcuts:

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

You can add Auto Close Tag from the Visual Studio Code marketplace.

Launch Visual Studio Code Quick Open (Ctrl + P), paste the following command, and press Enter.

Automatically add the HTML/XML close tag, the same as Visual Studio IDE or Sublime Text
```
ext install auto-close-tag
```
Visual Studio Code integration for HTMLHint - A Static Code Analysis Tool for HTML
```
ext install HTMLHint
```
Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. It also supports React's className attribute.
```
ext install html-css-class-completion
```

score 5 · Answer 3 · edited Apr 12 '23 at 21:16

5

This is not a builtin functionality of Visual Studio Code...However, it has a lot of plugins available. I would recommend you the HTMLHint plugin. That's what I have been using.

You can install it using the ext install HTMLHint command.

edited Apr 12 '23 at 21:16

Peter Mortensen

30,738
21
105
131

answered Jun 22 '17 at 05:41

This is a superfluous answer. It is already covered by [eigenharsha's answer](https://stackoverflow.com/questions/44559598/how-can-i-enable-visual-studio-code-html-error-checking-and-validation/44560117#44560117) (seven days prior). – Peter Mortensen Apr 12 '23 at 21:20

score 4 · Answer 4 · edited Apr 12 '23 at 21:24

4

There is an extension for Visual Studio Code which is HTMLHint.
You can install that by following the below instructions.

To open the extensions:marketplace, press Ctrl + Shift + X
Type HTMLHint in the search extension box
Click on the install button in the search result showing HTMLHint developed by "Mike Kaufman"

edited Apr 12 '23 at 21:24

Peter Mortensen

30,738
21
105
131

answered Sep 06 '19 at 03:16

Riswan

334
3
5

This adds installation instructions, but it is mostly a repeat of previous answers. It would be better if it was integrated in that previous answer. – Peter Mortensen Apr 12 '23 at 21:22

score 3 · Answer 5 · edited Apr 12 '23 at 21:22

3

I found that the extension W3C Validation (while not letting you extend the built in rules) works better than HTMLHint for checking HTML validity.

Id: umoxfo.vscode-w3cvalidation

Description: Adds W3C validation support to Visual Studio Code.

Version: 2.3.0

Publisher: Umoxfo VS

edited Apr 12 '23 at 21:22

Peter Mortensen

30,738
21
105
131

answered Dec 19 '18 at 20:29

ChekTek

175
2
10

2

Note: You must have Java 8 or later on your local environment to use this plugin – kanlukasz Apr 04 '20 at 13:50
after setting up PATH, it worked. this is the only one "real" validator that I found so far. – Allexj Mar 29 '22 at 18:19

score 2 · Answer 6 · edited Apr 12 '23 at 21:26

As HTMLHint is reported here to be problematic (lot of bugs, little updates), I found and tried HTML-validate, which has a Visual Studio Code extension.

The latter is supposed to be standalone, but when I installed it, it complained and told me to install HTML-validate globally; I did it, and the extension seems to work quite well, and to have good customization capability, like an ESLint for example.

How can I enable Visual Studio Code HTML error checking and validation?

6 Answers6

Linked