Un code non validé c’est le risque d’un site mal chargé, de problème d’accessibilité, de faille de sécurité, de SEO pénalisé, etc. Alors en tant que développeur débutant ou confirmé, vous désirez valider et corriger au besoin votre code HTML, CSS et Java script. Bonne nouvelle, pas besoin d’être un webmaster senior pour utiliser les 8 outils de validation que nous vous présentons aujourd’hui.
Gratuits, ils vous permettent de détecter les erreurs présentes dans vos codes HTML, CSS et JavaScript. De quoi respecter les bonnes pratiques du web et gagner en temps de débogage.
W3C HTML Validator
Accessible en ligne, sans installation ni création de compte, W3C HTML Validator valide votre code HTML selon les standards du WCAG. Cet outil analyse vos codes et vous signale toutes erreurs de syntaxes. Mais aussi les attributs manquants et les balises mal fermées.
Vous apprécierez la simplicité de l’interface et le rapport détaillé avec la localisation précise de chaque irrégularité.
HTMLHint
Le linter HTMLHint vient de dévoiler sa dernière version 1.8.0. Comme à son habitude, l’interface reste sobre et ne nécessite aucune inscription. Mais surtout, vous apprécierez la configuration des nombreuses règles de validation selon vos besoins.
L’extension HTMLHint vous permet de visualiser les erreurs de code de vos pages HTML ouvertes et vous assiste dans la réparation de celles-ci en un simple clic.
W3C CSS Validator
W3C CSS validator fonctionne sur le même principe que son homologue W3C HTML Validator. Ne vous méprenez pas. Vous avez ici deux outils bien différents, mais combien complémentaires ! W3C CSS Validator va vous permettre de visualiser les syntaxes incorrectes et les incompatibilités avec les standards CSS actuels.
ESLint
Avec ESLint vous analysez vos lignes de code JavaScript. Contrairement aux valideurs en ligne, ESLint s’installe localement dans votre pc ou directement dans votre éditeur VS code ou Sublime Text. Cet outil d’analyse statique open source identifie les erreurs de code, les mauvaises pratiques et les incohérences de style. Vous apprécierez sa rapidité d’exécution, réduisant considérablement le temps de débogage.
JSHint
Vous doutez d’une partie de votre code JavaScript ? Alors JSHint est le vérificateur qu’il vous faut. Pas d’installation requise. Il suffit de rentrer les lignes de code directement sur la page ouverte du site JSHint. Il va ainsi détecter les erreurs potentielles, les variables non déclarées et les problèmes de portée. Moins strict qu’Eslint, il est parfait pour une première validation.
Idéal pour les débutants.
Prettier
Prettier ne ressemble pas aux outils précédents. En réalité, il s’agit d’un formateur de code. Ce qui signifie qu’il ne détecte pas les erreurs, mais il uniformise la mise en forme de votre code. Concrètement, Prettier vient réécrire votre code HTML, CSS, JavaScript et bien d’autres formats selon votre configuration.
SonarLint
Voici une extension gratuite, disponible pour les éditeurs de code VS code, IntelliJ, Eclipse, etc. Directement intégré à votre IDE, SonarLint analyse votre code en temps réel et vous signale le moindre bug, les mauvaises pratiques (code smells) et les vulnérabilités de sécurité. Mais surtout, SonarLint vous suggère une correction automatique pour toute erreur détectée. Par contre, la version gratuite de cette extension vous limite à 50 000 lignes de code avec un maximum de 5 utilisateurs.
Stylelint
Stylelint est un liner spécialisé pour le code CSS et les préprocesseurs (SCSS, Less, etc.). Il vérifie votre CSS selon des règles personnalisables. Il signale les erreurs de syntaxe, les propriétés invalides et les incohérences de style. Open source, Stylelint demande une configuration manuelle avant toute validation de code.
Comprendre la validation de code CSS, HTML et JavaScript
Utiliser l’un de ces 8 outils de validation de code c’est bien, mais comprendre et apprendre à vérifier la syntaxe de ses lignes de code c’est mieux. C’est ce que propose gratuitement Carl Brison avec sa formation « valider son code — syntaxe, bonnes pratiques et accessibilité ».
En à peine 15 minutes, vous connaitrez les erreurs classiques à éviter, les différents types de validation et vous entrainerez sur un fichier HTML mis à disposition.
(4)