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 the VS Code IDE. 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.

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 Accessibility Linter directly from the VS Code Marketplace. However, some organizations have security restrictions that affect the installation process in two ways:

1. You cannot download from the VS Code Marketplace.
2. The extension, during its first run, cannot download its required binary component, the component that does the linting of your files, and is operating-system specific.

If your organization has these restrictions, you'll need an axe DevTools Linter license to access Deque's Agora software repository. You can then download a .vsix package for the extension.

About the Installation Packages on Agora

Deque provides two package options on the Agora software repository:

Extension Name	Location on Agora	Description
vscode-axe-linter-<version>.vsix	https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter/	The standard extension only (identical to VS Code Marketplace version), which needs to download the binary component for your operating system on first run
vscode-axe-linter-bundle-<version>.vsix	https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter-bundle/	A complete package that includes both the extension and binary components for all operating systems

You will see a directory viewer of all the versions for the extension, for example:

You'll typically choose the latest version and drill down the subdirectories until you locate the .vsix file.

Installation Steps

1. Download your preferred .vsix package from the Deque Agora repository.
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.

Next Steps

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