Usando a Extensão Axe Linter para VS Code
Informações sobre como instalar e usar a extensão com VS Code
A extensão Axe DevTools Linter para VS Code permite verificar seu código em busca de problemas de acessibilidade diretamente no IDE VS Code. Você pode verificar React (JSX), React Native, Angular, Vue, HTML e Markdown quanto a falhas comuns de acessibilidade.
Obtendo a Extensão
Normalmente, você baixa a extensão do marketplace de extensões do VS Code. Clique no botão Instalar , que fará o download da extensão e, em seguida, solicitará permissão para abrir o VS Code para instalar a extensão.
Se você usa o VSCodium ou outro editor de código aberto compatível com o VS Code, também pode instalar a extensão do Open VSX Registry.
Veja Instalando em Ambientes Restritos para outras maneiras de baixar e instalar a extensão.
Visão Geral do Uso
A extensão destaca erros de acessibilidade no VS Code com uma linha ondulada vermelha e fornece uma dica de ferramenta indicando o erro. Além disso, o painel de Problemas abaixo (se ativado) exibe uma lista de erros, conforme mostrado abaixo:
A dica de ferramenta e as informações no Problemas incluem um link para a Deque University para mais informações sobre o erro de acessibilidade especificado. No exemplo mostrado, o exemplo de código está faltando o lang atributo no html elemento, que é discutido na Deque University: html-has-lang.
Configuração
Configurar a extensão não é necessário, mas você pode alterar seu comportamento usando arquivos de configuração. Para mais informações, veja:
- Configurando o Axe DevTools Linter para uma referência às opções de configuração do Axe DevTools Linter
- Lintando Componentes Customizados com o Axe Accessibility Linter para VS Code ou IDEs JetBrains para informações sobre como configurar a extensão para analisar componentes personalizados
Suporte a Regras de Acessibilidade
Para mais informações sobre as regras que o plugin usa para localizar erros de acessibilidade, veja Regras de Acessibilidade.
Instalando em Ambientes Restritos
Na maioria dos casos, você pode instalar o Axe Accessibility Linter diretamente do Marketplace do VS Code. No entanto, algumas organizações possuem restrições de segurança que afetam o processo de instalação de duas maneiras:
- Você não pode baixar do Marketplace do VS Code.
- A extensão, durante sua primeira execução, não pode baixar seu componente binário necessário, o componente que faz a análise dos seus arquivos, e é específico para o sistema operacional.
Se sua organização tiver essas restrições, você precisará de uma licença do Axe DevTools Linter para acessar o repositório de software Agora da Deque. Você pode então baixar um .vsix pacote para a extensão.
Precisa de ajuda com sua conta Agora?
- Entre em contato com seu representante da Deque
- Visite o suporte técnico
- Envie um email para helpdesk@deque.com
Sobre os Pacotes de Instalação no Agora
A Deque oferece duas opções de pacotes no repositório de software Agora:
| Nome da Extensão | Localização no Agora | Descrição |
|---|---|---|
vscode-axe-linter-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter/ | Apenas a extensão padrão (idêntica à versão do VS Code Marketplace), que necessita baixar o componente binário para o seu sistema operacional na primeira execução |
vscode-axe-linter-bundle-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter-bundle/ | Um pacote completo que inclui tanto a extensão quanto os componentes binários para todos os sistemas operacionais |
Você verá um visualizador de diretórios de todas as versões da extensão, por exemplo:
Você normalmente escolherá a versão mais recente e irá explorar os subdiretórios até localizar o .vsix arquivo.
Etapas de Instalação
- Baixe o seu
.vsixpacote preferido do repositório Deque Agora. - No VS Code, abra o painel de **Extensões** .
- Clique no menu de opções (**...**).
- Selecione **Instalar a partir de VSIX...**, a última opção do menu.
- Escolha o seu
.vsixarquivo baixado.
Resolução de Problemas
A extensão do VS Code grava informações de diagnóstico em um canal de **Axe Linter** de saída. Este log captura a atividade de inicialização da extensão, incluindo detalhes da plataforma, versão da extensão, e o status do download do componente binário, sendo mais útil para diagnosticar problemas quando a extensão falha ao iniciar ou inicializar corretamente.
Para visualizar o log:
- Abra o painel de **Saída** (**Ver > Saída**).
- Selecione **Axe Linter** no menu suspenso de canais no canto superior direito do painel.
Se você entrar em contato com o suporte da Deque sobre um problema com a extensão, incluir o conteúdo deste log pode ajudar a equipe a diagnosticar o problema.
Próximos Passos
Este site de documentação contém informações sobre como usar as várias ofertas do Axe DevTools Linter. Para mais informações, veja Sobre o Axe DevTools Linter.



