Usando a Extensão Axe Linter para VS Code

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Informações sobre como instalar e usar a extensão com VS Code

Not for use with personal data

A extensão Axe DevTools Linter para VS Code permite verificar seu código em busca de problemas de acessibilidade diretamente no VS Code e em editores compatíveis com VS Code, incluindo IDEs de IA como Cursor e Windsurf. Você pode verificar React (JSX), React Native, Angular, Vue, HTML e Markdown para defeitos 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 depois solicitará permissão para abrir o VS Code para instalar a extensão.

Se você usa VSCodium, um IDE de IA como Cursor ou Windsurf, ou outro editor compatível com VS Code, você pode instalar a extensão a partir do Open VSX Registry.

Consulte 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 um sublinhado ondulado vermelho e fornece uma dica exibindo o erro. Além disso, o painel Problemas abaixo (se habilitado) exibe uma lista de erros, conforme mostrado abaixo:

A dica e as informações no painel Problemas incluem um link para Deque University para mais informações sobre o erro de acessibilidade especificado. No exemplo mostrado, o exemplo de código está sem o atributo lang no elemento html, o 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 verificar 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 tem 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 pacote .vsix para a extensão.

tip

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:

Normalmente, você escolherá a versão mais recente e navegará pelos subdiretórios até localizar o arquivo .vsix.

Etapas de Instalação

Baixe seu pacote .vsix preferido do repositório Agora da Deque.
No VS Code, abra o painel **Extensões**.
Clique no menu de transbordamento (**...**).
Selecione **Instalar a partir de VSIX...**, a última opção do menu.
Escolha o arquivo .vsix que você baixou.

Resolução de Problemas

A extensão do VS Code escreve informações de diagnóstico em um canal de Saída **Axe Linter**. 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 **Saída** (**Ver > Saída**).
Selecione **Axe Linter** no menu suspenso do canal no canto superior direito do painel.

Se você entrar em contato com suporte da Deque sobre um problema na 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 o uso das várias ofertas do Axe DevTools Linter. Para mais informações, consulte Sobre o Axe DevTools Linter.