Usar la Extensión 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

Información sobre cómo instalar y usar la extensión con VS Code

Not for use with personal data

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 e instalarla.

Si utilizas VSCodium, un IDE de inteligencia artificial como Cursor o Windsurf, u otro editor compatible con VS Code, puedes instalar la extensión desde el Registro Open VSX.

Consulta Instalación en Entornos Restringidos para conocer 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 Problemas a continuación (si está habilitado) muestra una lista de errores, como se muestra a continuación:

El tooltip y la información en el panel Problemas incluye un enlace a Deque University para obtener más información sobre el error de accesibilidad especificado. En el ejemplo mostrado, al ejemplo de código le falta el atributo lang en el elemento html, lo cual 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 analizar componentes personalizados

Soporte de Reglas de Accesibilidad

Para obtener más información sobre las reglas que utiliza el complemento para detectar errores de accesibilidad, consulta Reglas de Accesibilidad.

Instalación en Entornos Restringidos

En la mayoría de los casos, puedes instalar la extensión Axe DevTools Linter directamente desde el Mercado de extensiones de VS Code o el Registro Open VSX. Sin embargo, algunas organizaciones tienen restricciones de seguridad que impiden instalar extensiones directamente desde estos registros.

El paquete de la extensión es autónomo: el componente que revisa tus archivos está incluido en el paquete, por lo que la extensión no descarga nada en la primera ejecución. Esto significa que puedes instalarla en un entorno restringido desde un archivo .vsix descargado, utilizando cualquiera de las siguientes fuentes:

Mercado de extensiones de VS Code o Open VSX (recomendado). Desde una máquina que pueda acceder a cualquiera de los registros, descarga el .vsix desde la página de la extensión (en el Mercado de Extensiones, usa el enlace Descargar extensión en la sección Recursos de la página del artículo), luego transfiérelo a la máquina restringida.
El repositorio de software Agora de Deque. Si no puedes acceder a ninguno de los registros y tienes una licencia de Axe DevTools Linter, puedes descargar el .vsix de Agora en su lugar.

tip

¿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 del paquete de instalación en Agora

Deque proporciona la extensión 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/	El paquete de extensión, idéntico a la versión del Mercado de Extensiones de VS Code

En la ubicación anterior, verás un visor de directorios que enumera todas las versiones disponibles. Elige la última versión y abre las subcarpetas hasta localizar el archivo .vsix.

Pasos de instalación

Descarga el paquete .vsix de una de las fuentes mencionadas anteriormente.
En VS Code, abre el panel Extensiones.
Haz clic en el menú de desbordamiento (...).
Selecciona Instalar desde VSIX..., la última opción del menú.
Elige el archivo .vsix que descargaste.

Solución de problemas

La extensión de VS Code escribe información de diagnóstico en un canal de Salida Axe Linter. Este registro captura la actividad de inicio de la extensión, incluidos los detalles de la plataforma y la versión de la extensión, y es más útil para diagnosticar problemas cuando la extensión no se inicia o no se inicializa correctamente.

Para ver el registro:

Abre el panel 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 de 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 distintas ofertas de Axe DevTools Linter. Para más información, consulta Acerca de Axe DevTools Linter.