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

Free Trial
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 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:

Mostra um atributo lang ausente no elemento html via dica de ferramenta e uma entrada no painel Problemas na parte inferior da janela do VS Code

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:

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:

  1. Você não pode baixar do Marketplace do VS Code.
  2. 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.

tip

Precisa de ajuda com sua conta Agora?

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:

Mostra uma lista de diretórios contendo diferentes versões da extensão VS Code em pacote

Você normalmente escolherá a versão mais recente e irá explorar os subdiretórios até localizar o .vsix arquivo.

Etapas de Instalação

  1. Baixe o seu .vsix pacote preferido do repositório Deque Agora.
  2. No VS Code, abra o painel de **Extensões** .
  3. Clique no menu de opções (**...**).
  4. Selecione **Instalar a partir de VSIX...**, a última opção do menu.
  5. Escolha o seu .vsix arquivo baixado.

Mostra o item de menu no painel de Extensões para instalar arquivos .vsix localmente

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:

  1. Abra o painel de **Saída** (**Ver > Saída**).
  2. 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.