Utilisation de l'extension Axe Linter pour 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

Informations sur l'installation et l'utilisation de l'extension avec VS Code

Free Trial
Not for use with personal data

L'extension Axe DevTools Linter pour VS Code vous permet de vérifier votre code pour détecter des problèmes d'accessibilité directement dans VS Code et les éditeurs compatibles avec VS Code, y compris les AI IDEs comme Cursor et Windsurf. Vous pouvez vérifier React (JSX), React Native, Angular, Vue, HTML et Markdown pour les défauts d'accessibilité courants.

Obtenir l'extension

En général, vous téléchargez l'extension depuis le marché des extensions VS Code. Cliquez sur le bouton Installer, ce qui téléchargera l'extension et demandera ensuite la permission pour ouvrir VS Code afin d'installer l'extension.

Si vous utilisez VSCodium, un IDE AI tel que Cursor ou Windsurf, ou un autre éditeur compatible avec VS Code, vous pouvez installer l'extension depuis le registre Open VSX.

Voir Installation dans des environnements restreints pour d'autres moyens de télécharger et installer l'extension.

Aperçu de son utilisation

L'extension met en évidence les erreurs d'accessibilité dans VS Code avec une ligne ondulée rouge et fournit une info-bulle indiquant l'erreur. En outre, le volet Problèmes ci-dessous (si activé) affiche une liste des erreurs, comme montré ci-dessous :

Montre un attribut lang manquant sur l'élément html via une info-bulle et une entrée dans le volet Problèmes en bas de la fenêtre VS Code

L'info-bulle et les informations dans le volet Problèmes comprennent un lien vers Deque University pour plus d'informations sur l'erreur d'accessibilité spécifiée. Dans l'exemple montré, l'exemple de code manque l'attribut lang sur l'élément html, ce qui est discuté à Deque University : html-has-lang.

Configuration

Configurer l'extension n'est pas nécessaire, mais vous pouvez modifier son comportement en utilisant des fichiers de configuration. Pour plus d'informations, voir :

Soutien des règles d'accessibilité

Pour plus d'informations sur les règles que le plugin utilise pour localiser les erreurs d'accessibilité, voir Règles d'accessibilité.

Installation dans des environnements restreints

Dans la plupart des cas, vous pouvez installer l'extension Axe DevTools Linter directement depuis le VS Code Marketplace ou le registre Open VSX. Cependant, certaines organisations ont des restrictions de sécurité qui empêchent l'installation directe d'extensions depuis ces registres.

Le paquet de l'extension est autonome : le composant qui analyse vos fichiers est inclus dans le paquet, donc l'extension ne télécharge rien lors du premier démarrage. Cela signifie que vous pouvez l'installer dans un environnement restreint à partir d'un fichier .vsix téléchargé, en utilisant l'une des sources suivantes :

  • VS Code Marketplace ou Open VSX (recommandé). Depuis une machine pouvant accéder à l'un ou l'autre registre, téléchargez le .vsix depuis la page de l'extension (sur le Marketplace, utilisez le lien Télécharger l'extension dans la section Ressources de la page de l'article), puis transférez-le vers la machine restreinte.
  • Répertoire logiciel Agora de Deque. Si vous ne pouvez accéder à aucun des registres et que vous avez une licence Axe DevTools Linter, vous pouvez télécharger le .vsix depuis Agora à la place.
tip

Besoin d'aide avec votre compte Agora ?

À propos du paquet d'installation sur Agora

Deque fournit l'extension sur le répertoire logiciel Agora :

Nom de l'extension Emplacement sur Agora Description
vscode-axe-linter-<version>.vsix https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter/ Le paquet d'extension, identique à la version du VS Code Marketplace

À l'emplacement ci-dessus, vous verrez un explorateur de répertoires listant toutes les versions disponibles. Choisissez la dernière version et explorez les sous-répertoires jusqu'à ce que vous trouviez le fichier .vsix.

Étapes d'installation

  1. Téléchargez le paquet .vsix à partir de l'une des sources décrites ci-dessus.
  2. Dans VS Code, ouvrez le panneau Extensions.
  3. Cliquez sur le menu de débordement (...).
  4. Sélectionnez Installer depuis VSIX..., la dernière option du menu.
  5. Choisissez votre fichier .vsix téléchargé.

Afficher l'option de menu sur le panneau Extensions pour installer localement les fichiers .vsix

Dépannage

L'extension VS Code écrit les informations de diagnostic dans un canal de sortie Axe Linter. Ce journal capture l'activité de démarrage de l'extension, y compris les détails de la plateforme et la version de l'extension, et est très utile pour diagnostiquer les problèmes lorsque l'extension ne parvient pas à démarrer ou à s'initialiser correctement.

Pour voir le journal :

  1. Ouvrez le panneau Sortie (Affichage > Sortie).
  2. Sélectionnez Axe Linter dans le menu déroulant du canal dans le coin supérieur droit du panneau.

Si vous contactez l'assistance Deque au sujet d'un problème d'extension, inclure le contenu de ce journal peut aider l'équipe à diagnostiquer le problème.

Étapes suivantes

Ce site de documentation contient des informations sur l'utilisation des différentes offres Axe DevTools Linter. Pour plus d'informations, voir À propos d'Axe DevTools Linter.