CODEWITHSUNDEEP
javascripthtmlcssvisual-studio-codecode-editor
Marc
Marc

Reputation: 453

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

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?

Upvotes: 45

Views: 90749

Answers (6)

eigenharsha
eigenharsha

Reputation: 2231

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.

  1. Automatically add the HTML/XML close tag, the same as Visual Studio IDE or Sublime Text

    ext install auto-close-tag

  2. Visual Studio Code integration for HTMLHint - A Static Code Analysis Tool for HTML

    ext install HTMLHint

  3. 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

Upvotes: 9

PhiLho
PhiLho

Reputation: 41162

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.

Upvotes: 4

Riswan
Riswan

Reputation: 374

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

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

Upvotes: 4

ChekTek
ChekTek

Reputation: 174

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

Upvotes: 3

user8197826
user8197826

Reputation:

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.

Upvotes: 5

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8950

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.

Upvotes: 90

Related Questions