Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable VS Code HTML error checking / 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 dev editor like vs code. Maybe I am just not finding the right option or extension.

How can I achieve this same html, css error checking behaviour in VS Code?

like image 587
Marc Avatar asked Jun 15 '17 05:06

Marc


People also ask

How do I enable error checking on VSCode?

Simply, go to settings by using ctrl + comma . Search for Error squiggles . Enable it or select EnabledIfIncludesResolve . Then click on Modified on Workspace , if it is disabled, then enable it.

How do I validate HTML in Visual Studio?

Follow the steps: Launch Visual Studio 2012. Go to Tools > Options menu. When Options configuration screen is displayed, go to Text Editor > HTML > Validation.

How do I validate my HTML code?

In order to validate your code, you have to declare the standard to which it adheres. To describe the HTML standard (the document type declaration, DTD), the file should contain a DOCTYPE declaration (before the HTML code). Here are a few examples (from http://www.htmlhelp.com/tools/validator/doctype.html).

Why HTML extension is not working in VSCode?

Restart VSCode Sometimes the best you can do is start VSCode from scratch. First, save all of your work. Then close VSCode, which will also stop all of the extensions you've installed. Then, reopen VSCode and try again – go to the HTML file you want to view, right click, and select "Open with Live Server".


2 Answers

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

To add HTML validation (linting), Open VSCode, then press Ctrl + P and then paste ext install HTMLHint in it, and press enter. It will install a HTML validator. You may need to reload VSCode to load the extension.

Now if you open the same html document you had the syntax error, 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.

like image 170
Nimeshka Srimal Avatar answered Oct 05 '22 12:10

Nimeshka Srimal


VS Code default support code formatting and it track the syntactical error. If you create a new file and directly try to write the code than VS Code could not able to understand which language or type of syntax user want to format/correcting. So, first need to save the new file with the proper extension than visual studio properly identify the syntax.

The code formatting is available in VS 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 VS Code marketplace.

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

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

    ext install auto-close-tag 
  2. VS 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. Also supports React's className attribute.

    ext install html-css-class-completion 
like image 39
eigenharsha Avatar answered Oct 05 '22 10:10

eigenharsha