The webhint extension for Visual Studio Code

Use webhint, a customizable linting tool, to improve the accessibility, performance, cross-browser compatibility, PWA compatibility, and security of your site. It checks your code for best practices and common errors. This open-source project, initially developed by the Microsoft Edge team, is now part of the OpenJS Foundation. The Microsoft Edge team continues to contribute to webhint alongside web developers in the community.

Identify and fix problems in your HTML, CSS, JavaScript, TypeScript, and more by adding the webhint extension for Visual Studio Code. Hints appear as inline underlines and are summarized in the Problems pane.

The webhint extension for Visual Studio Code

The webhint extension for Visual Studio Code

Installing webhint

To install the webhint extension from within Visual Studio Code, navigate to The webhint extension for Visual Studio Code. Or, you can install the webhint extension for Visual Studio Code from the Visual Studio Marketplace.

Configuring webhint in Visual Studio Code

This extension uses a default configuration json file that activates hints and parsers for HTML, CSS, templating systems (JSX/TSX, Angular, and so on), JavaScript/TypeScript, and more.

{
    "connector": "local",
    "extends": [
        "accessibility",
        "progressive-web-apps"
    ],
    "formatters": [
        "html",
        "summary"
    ],
    "hints": [
        "apple-touch-icons",
        "button-type",
        "compat-api/css",
        "compat-api/html",
        "create-element-svg",
        "css-prefix-order",
        "disown-opener",
        "highest-available-document-mode",
        "manifest-exists",
        "meta-charset-utf-8",
        "meta-viewport",
        "no-bom",
        "no-protocol-relative-urls",
        "scoped-svg-styles",
        "sri",
        "typescript-config/consistent-casing",
        "typescript-config/import-helpers",
        "typescript-config/is-valid",
        "typescript-config/no-comments",
        "typescript-config/strict",
        "typescript-config/target"
    ],
    "hintsTimeout": 10000,
    "parsers": [
        "babel-config",
        "css",
        "html",
        "javascript",
        "jsx",
        "less",
        "sass",
        "typescript",
        "typescript-config",
        "webpack-config"
    ]
}

If you want more control over the hints and parsers that get activated, create a local .hintrc file to configure webhint. For help with output from specific hints, navigate to webhint user guide.

Getting in touch with the webhint team

Send your feedback by filing an issue in the webhint GitHub repo.

To contribute to the extension, navigate to Contributing at the webhintio/hint repo.

See also