Using the axe Linter Extension for VS Code

Link to Using the axe Linter Extension for VS Code copied to clipboard

Information on installing and using the extension with VS Code

Free Trial

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:

Shows a missing lang attribute on the html element via a tooltip and an entry in the Problems pane at the bottom of the VS Code window

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:

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.

tip

Need help with your Agora account?

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:

Shows a listing of directories containing different versions of the bundled VS Code extension

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.

Show the menu item on the Extensions panel for installing .vsix files locally

Next Steps

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