Using the axe Linter Extension for VS Code
Information on installing and using the extension with 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:
- You cannot download from the VS Code Marketplace.
- 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.
Need help with your Agora account?
- Contact your Deque representative
- Visit the support desk
- Email helpdesk@deque.com
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
- Download your preferred
.vsix
package from the Deque Agora repository. - In VS Code, open the Extensions panel.
- Click the overflow menu (...).
- Select Install from VSIX..., the last option on the menu.
- 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.