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 a extensão Axe DevTools Linter diretamente do Marketplace do VS Code ou do Open VSX Registry. No entanto, algumas organizações têm restrições de segurança que impedem a instalação de extensões diretamente desses registros.

O pacote da extensão é autônomo: o componente que verifica seus arquivos está incluído no pacote, portanto, a extensão não faz download de nada na primeira execução. Isso significa que você pode instalá-la em um ambiente restrito a partir de um arquivo .vsix baixado, utilizando uma das seguintes fontes:

Marketplace do VS Code ou Open VSX (recomendado). De uma máquina que pode acessar qualquer um dos registros, baixe o .vsix da página da extensão (no Marketplace, use o link Baixar Extensão na seção Recursos da página do item), depois transfira para a máquina restrita.
Repositório de software Agora da Deque. Se você não puder acessar nenhum dos registros e tiver uma licença do Axe DevTools Linter, pode baixar o .vsix do Agora.

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 o Pacote de Instalação no Agora

A Deque fornece a extensão 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/	O pacote da extensão, idêntico à versão do Marketplace do VS Code

No local acima, você verá um visualizador de diretórios listando todas as versões disponíveis. Escolha a versão mais recente e navegue pelos subdiretórios até localizar o arquivo .vsix.

Etapas de Instalação

Baixe o pacote .vsix de uma das fontes descritas acima.
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 grava informações de diagnóstico em um canal de Saída **Axe Linter**. Esse log captura atividades de inicialização da extensão, incluindo detalhes da plataforma e a versão da extensão, 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.