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 d'ouvrir VS Code pour installer l'extension.

Si vous utilisez VSCodium, un AI IDE comme 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 d'installer l'extension.

Aperçu de son utilisation

L'extension souligne les erreurs d'accessibilité dans VS Code avec un trait ondulé rouge et fournit une info-bulle indiquant l'erreur. De plus, le volet Problèmes en dessous (si activé) affiche une liste d'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 incluent 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' lang attribut sur l' html élément, 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 le Axe Accessibility Linter directement depuis le VS Code Marketplace. Cependant, certaines organisations ont des restrictions de sécurité qui affectent le processus d'installation de deux manières :

  1. Vous ne pouvez pas télécharger depuis le marketplace de VS Code.
  2. L'extension, lors de sa première exécution, ne peut pas télécharger son composant binaire requis, le composant qui fait l'analyse de vos fichiers, et est spécifique au système d'exploitation.

Si votre organisation a ces restrictions, vous aurez besoin d'une licence Axe DevTools Linter pour accéder au dépôt logiciel Agora de Deque. Vous pourrez alors télécharger un .vsix package pour l'extension.

tip

Besoin d'aide avec votre compte Agora ?

À propos des paquets d'installation sur Agora

Deque propose deux options de paquets sur le dépôt 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/ Extension standard uniquement (identique à la version sur le marché VS Code), qui nécessite de télécharger le composant binaire pour votre système d'exploitation lors du premier démarrage
vscode-axe-linter-bundle-<version>.vsix https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter-bundle/ Un paquet complet qui inclut à la fois l'extension et les composants binaires pour tous les systèmes d'exploitation

Vous verrez un explorateur de répertoires de toutes les versions de l'extension, par exemple :

Affiche une liste de répertoires contenant différentes versions de l'extension VS Code groupée

Vous choisirez généralement la dernière version et naviguerez dans les sous-répertoires jusqu'à localiser le .vsix fichier.

Étapes d'installation

  1. Téléchargez votre .vsix paquet préféré depuis le dépôt Agora de Deque.
  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 des 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, la version de l'extension et le statut du téléchargement du composant binaire, et est très utile pour diagnostiquer les problèmes lorsque l'extension ne démarre pas ou ne s'initialise pas correctement.

Pour voir le journal :

  1. Ouvrez le panneau Sortie (Affichage > Sortie).
  2. Sélectionnez Axe Linter dans le menu déroulant du canal, en haut à droite du panneau.

Si vous contactez l'assistance Deque concernant 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.