Using the Axe Linter Extension for VS Code

The Axe DevTools Linter extension for VS Code allows you to check your code for accessibility problems from within VS Code and VS Code-compatible editors, including AI IDEs such as Cursor and Windsurf. You can check React (JSX), React Native, Angular, Vue, HTML, and Markdown for common accessibility defects.

Obtaining the Extension

Typically, you download the extension from the VS Code extension marketplace. Click on the Install button, which will download the extension and then ask for permission to open VS Code to install the extension.

If you use VSCodium, an AI IDE such as Cursor or Windsurf, or another VS Code-compatible editor, you can install the extension from the Open VSX Registry.

See Installing in Restricted Environments for other ways to download and install the extension.

Overview of Its Use

The extension highlights accessibility errors in the VS Code with a red wavy line and provides a tooltip indicating the error. In addition, the Problems pane below (if enabled) displays a list of errors, as shown below:

The tooltip and information in the Problems pane includes a link to Deque University for more information about the specified accessibility error. In the example shown, the code example is missing the lang attribute on the html element, which is discussed at Deque University: html-has-lang.

Configuration

Configuring the extension isn't necessary, but you can change its behavior by using configuration files. For more information, see:

• Configuring Axe DevTools Linter for a reference to Axe DevTools Linter's configuration options
• Linting Custom Components with the Axe Accessibility Linter for VS Code or JetBrains IDEs for information about configuring the extension to lint custom components

Accessibility Rule Support

For more information about the rules that the plugin uses to locate accessibility errors, see Accessibility Rules.

Installing in Restricted Environments

In most cases, you can install the Axe DevTools Linter extension directly from the VS Code Marketplace or the Open VSX Registry. Some organizations, however, have security restrictions that block installing extensions directly from these registries.

The extension package is self-contained: the component that lints your files is included in the package, so the extension does not download anything on first run. This means you can install it in a restricted environment from a downloaded .vsix file, using either of the following sources:

• VS Code Marketplace or Open VSX (recommended). From a machine that can reach either registry, download the .vsix from the extension's page (on the Marketplace, use the Download Extension link in the Resources section of the item page), then transfer it to the restricted machine.
• Deque's Agora software repository. If you cannot reach either registry, and you have an Axe DevTools Linter license, you can download the .vsix from Agora instead.

About the Installation Package on Agora

Deque provides the extension on the Agora software repository:

At the location above, you'll see a directory viewer listing all the available versions. Choose the latest version and drill down the subdirectories until you locate the .vsix file.

Installation Steps

1. Download the .vsix package from one of the sources described above.
2. In VS Code, open the Extensions panel.
3. Click the overflow menu (...).
4. Select Install from VSIX..., the last option on the menu.
5. Choose your downloaded .vsix file.

Troubleshooting

The VS Code extension writes diagnostic information to an Axe Linter Output channel. This log captures extension startup activity, including platform details and extension version, and is most useful for diagnosing problems when the extension fails to start or initialize correctly.

To view the log:

1. Open the Output panel (View > Output).
2. Select Axe Linter from the channel dropdown in the top-right corner of the panel.

If you contact Deque support about an extension problem, including the contents of this log can help the team diagnose the issue.

Next Steps

This documentation site contains information about using the various Axe DevTools Linter offerings. For more information, see About Axe DevTools Linter.