Usar la Extensión Axe Linter para VS Code
Información sobre cómo instalar y usar la extensión con VS Code
La extensión Axe DevTools Linter para VS Code te permite verificar tu código en busca de problemas de accesibilidad desde dentro de VS Code y editores compatibles con VS Code, incluyendo IDEs de IA como Cursor y Windsurf. Puedes verificar React (JSX), React Native, Angular, Vue, HTML y Markdown en busca de defectos comunes de accesibilidad.
Obtención de la Extensión
Normalmente, descargas la extensión desde el mercado de extensiones de VS Code. Haz clic en el botón Instalar , lo que descargará la extensión y luego pedirá permiso para abrir VS Code para instalar la extensión.
Si usas VSCodium, un IDE de IA como Cursor o Windsurf, u otro editor compatible con VS Code, puedes instalar la extensión desde el Registro Open VSX.
Consulta Instalar en Entornos Restringidos para otras formas de descargar e instalar la extensión.
Visión General de Su Uso
La extensión resalta los errores de accesibilidad en VS Code con una línea ondulada roja y proporciona un tooltip indicando el error. Además, el panel de Problemas debajo (si está habilitado) muestra una lista de errores, como se muestra a continuación:
El tooltip y la información en el panel de Problemas incluye un enlace a Deque University para obtener más información sobre el error de accesibilidad especificado. En el ejemplo mostrado, el ejemplo de código carece del lang atributo en el html elemento, que se discute en Deque University: html-has-lang.
Configuración
Configurar la extensión no es necesario, pero puedes cambiar su comportamiento utilizando archivos de configuración. Para más información, consulta:
- Configuración de Axe DevTools Linter para una referencia a las opciones de configuración de Axe DevTools Linter
- Linting de Componentes Personalizados con el Axe Accessibility Linter para VS Code o IDEs de JetBrains para obtener información sobre cómo configurar la extensión para verificar componentes personalizados
Soporte de Reglas de Accesibilidad
Para más información sobre las reglas que el plugin utiliza para localizar errores de accesibilidad, consulta Reglas de Accesibilidad.
Instalación en Entornos Restringidos
En la mayoría de los casos, puedes instalar el Axe Accessibility Linter directamente desde el Marketplace de VS Code. Sin embargo, algunas organizaciones tienen restricciones de seguridad que afectan el proceso de instalación de dos maneras:
- No puedes descargar desde el Marketplace de VS Code.
- La extensión, durante su primera ejecución, no puede descargar su componente binario requerido, el componente que realiza el análisis de tus archivos y es específico del sistema operativo.
Si tu organización tiene estas restricciones, necesitarás una licencia de Axe DevTools Linter para acceder al repositorio de software Agora de Deque. Luego, podrás descargar un .vsix paquete para la extensión.
¿Necesitas ayuda con tu cuenta de Agora?
- Contacta a tu representante de Deque
- Visita el servicio de asistencia
- Envíe un correo electrónico a helpdesk@deque.com
Acerca de los paquetes de instalación en Agora
Deque ofrece dos opciones de paquetes en el repositorio de software Agora:
| Nombre de la extensión | Ubicación en Agora | Descripción |
|---|---|---|
vscode-axe-linter-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter/ | La extensión estándar solo (idéntica a la versión de VS Code Marketplace), que necesita descargar el componente binario para su sistema operativo en el primer uso |
vscode-axe-linter-bundle-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter-bundle/ | Un paquete completo que incluye tanto la extensión como los componentes binarios para todos los sistemas operativos |
Verás un visor de directorios con todas las versiones de la extensión, por ejemplo:
Por lo general, elegirás la última versión y explorarás los subdirectorios hasta que encuentres el .vsix archivo.
Pasos de instalación
- Descarga tu
.vsixpaquete preferido desde el repositorio Deque Agora. - En VS Code, abre el panel de Extensiones .
- Haz clic en el menú de desbordamiento (...).
- Selecciona Instalar desde VSIX..., la última opción del menú.
- Elige tu
.vsixarchivo descargado.
Solución de problemas
La extensión de VS Code escribe información de diagnóstico en un canal de Salida de Axe Linter . Este registro captura la actividad de inicio de la extensión, incluyendo detalles de la plataforma, versión de la extensión y el estado de la descarga del componente binario, y es especialmente útil para diagnosticar problemas cuando la extensión no se inicia o inicializa correctamente.
Para ver el registro:
- Abre el panel de Salida (Ver > Salida).
- Selecciona Axe Linter del menú desplegable de canales en la esquina superior derecha del panel.
Si contactas con soporte de Deque sobre un problema con la extensión, incluir el contenido de este registro puede ayudar al equipo a diagnosticar el problema.
Próximos pasos
Este sitio de documentación contiene información sobre el uso de las diversas ofertas de Axe DevTools Linter. Para más información, consulta Acerca de Axe DevTools Linter.