But not just axe, and not just Neovim!
The axe Accessibility Linter is a program that "checks code files for common accessibility defects". It is a very handy tool for any web developer wanting to create accessible websites.
Following is a set of instructions on how to get the axe linter working inside any editor with an LSP client.
This extension ships with the language server executable we will use.
If you find a way to acquire the language server executable without installing this extension, let me know.
Find where VS Code installed the axe extension. For me (on Windows) it was at ~\.vscode\extensions\deque-systems.vscode-axe-linter-4.10.10.
Inside of that directory, locate /dist/bin/LSP-server-XX.XX.XX where XX.XX.XX is the same version as the extension (in this case, 4.10.10).
This LSP-server file is in fact a statically-linked, self-contained language server executable, implementing Microsoft's Language Server Protocol.
All you really need to do is point your LSP client (editor) at this file. If you'd like, you can rename it or move it somewhere else for convenience. I renamed it to axe-ls.exe, and refer to it as that from here on out.
For convenience, I'd make sure this executable is discoverable from your PATH. Either add this directory to your PATH environment variable or copy the executable to somewhere that is (in my case, a directory literally called ~/path.) Or, if you'd like, you could just provide the full path to this executable in your editor config, which we discuss in the next step.
If you're on Windows, you must append .exe to the end of this file's name.
Finally, we just configure our editor so it knows to use--and where to look for--our axe accessibility linter executable!
Add the following to your init.lua:
vim.lsp.config("axe", {
cmd = { "axe-ls", "--stdio" },
filetypes = { "vue" },
})
vim.lsp.enable("axe")
Add the following to your languages.toml:
[[language]]
name = "vue"
language-servers = ["axe"] # ...plus others
[language-server.axe]
command = "axe-ls"
args = ["--stdio"]
Zed, much like VS Code, employs an extension system and extension marketplace. I have developed a very thin Zed extension that serves as a client for the already-existing axe-ls executable we acquired in steps 1 and 2.
First, download the Zed extension from: github.com/taylorplewe/zed-axe-linter/releases.
Then, open the Extensions pane with Ctrl + Shift + X or opening the hamburger menu in the top left and clicking "Extensions".
Click the "Install Dev Extension" button in the top right. Navigate to the extension folder you just downloaded and click "Select Folder".
In the status bar at the bottom, you should see a status message saying something like "Installing Axe Accessibility Linter...". Once it finishes, you should be good to go! Open up an HTML, Markdown, Vue, Angular, React (TSX), React Native, or Liquid template file to see it in action!
This extension expects either an executable called axe-ls to be on your PATH, or the environment variable AXE_LS_PATH to be set.
If you moved or copied the language server executable to somewhere else, you don't need the VS Code extension anymore!
These days, many editor extensions which provide some kind of code analysis like this, whether for VS Code, Visual Studio, JetBrains IDEs or Zed, are merely a thin wrapper around a language server. A VS Code extension need only A. be an LSP client, and B. spin up the LSP server, for it to work. Since many modern editors ship with their own LSP client built-in, you just have to extract the server executable like we've done here, and you can use them in those editors as well.