Prérequis : avoir installé Node.js sur sa machine
Que vous utilisiez du JavaScript basique (JSON compris) ou de l'ECMAScript, ESLint se charge de trouver et de vous signaler les erreurs de logique et de syntaxe dans votre code. Il va même plus loin que ça, puisqu'il vous suggère parfois carrément de les corriger à votre place !
Dans ce tutoriel, nous allons voir comment le mettre en place à l'intérieur du remarquable éditeur de code gratuit Visual Studio Code de Microsoft. Sachez qu'ESLint est également installable dans n'importe quel projet sans forcément passer par l'extension d'un éditeur de code. D'autre part, une extension est disponible pour Sublime Text notamment.
Mise en place
Recherchez et Installez d'abord ESLint depuis l'onglet "Extensions" (dans le menu de gauche) dans Visual Studio Code :
Relancez le programme, comme après l'installation de n'importe quelle extension. En principe, la console de débogage devrait vous dire qu'ESLint est introuvable et vous conseiller de l'installer de manière globale sur votre machine avec cette ligne de commande :
npm install -g eslintOuvrez votre terminal à la racine du projet et faites le nécessaire. Maintenant, je vous suggère de créer un petit dossier "js" dans un nouveau projet avec un fichier "test.js" à l'intérieur afin de tester tout ça. Dans ce fichier, écrivez la fonction suivante :
function fake (a, b) {
return a * c;
}Comme vous l'avez sans doutes remarqué, cette fonction est incorrecte. Effectivement, on y fait appel à la variable "c" qui n'est définit ni en tant qu'argument de la fonction, ni en dessus du "return". Bien sûr, il y a aussi le fait que la fonction n'est appelée nulle part et que l'argument "b" n'est jamais utilisé.
Pour le moment, rien ne se passe. Et oui, il nous faut encore configurer ESLint afin qu'il sache à quelle sauce il doit analyser notre JavaScript. Pour ce faire, il aura besoin d'un fichier de configuration que nous allons générer en tapant la commande suivante toujours depuis la racine du projet :
eslint --initCelui-ci devrait alors nous demander comment l’on souhaite configurer ESLint. Pour la première fois, je vous suggère de répondre "Inspect your JavaScript file(s)".
Pour info, la première option vous permet de corriger également l'indentation et le style de votre code. La seconde vous permet de faire la même chose mais selon des standards de références utilisés par Google ou Airbnb. Si vous choisissez cette possibilité, vous devrez probablement installer des packages supplémentaires avec npm.
Répondez ensuite aux autres questions posées selon les paramètres que vous souhaitez utiliser pour votre projet.
Et voilà, ESLint est opérationnel ! Il vous souligne en rouge les erreurs et vous précise ce qui est incorrect lorsque vous pointez votre souris sur l'erreur.
Je vous ai laissé entendre préalablement qu'ESLint pouvait corriger certaines erreurs. Si vous cliquez à l'endroit où se trouve une erreur et qu'une petit ampoule apparaît dans la marge à gauche, c'est qu'elle peut être corrigée automatiquement. Pour ce faire, vous pouvez cliquer sur l'ampoule puis sur "Fix this ... problem".
Si vous souhaitez corriger toutes ces erreurs en un seul coup, l'extension de ESLint propose une commande à exécuter dans le "Command Palette" (sur Mac : command + shift + P) de Visual Studio Code :
>Fix all auto-fixable problemsBien entendu, cette commande ne corrigera pas toute seul les erreurs de variables, car ESLint ne peut pas deviner ce que vous voulez faire.
Si, pour une raison ou pour une autre, vous ne voulez plus que les erreurs soient soulignées dans votre projet, vous pourrez, de la même façon, utiliser cette commande :
>Disable ESLint for this WorkspacePour réactiver la correction, vous l'aurez deviné, il faudra taper la commande suivante :
>Enable ESLint for this Workspace
Et voilà, vous savez tout ! Au cas où les paramètres de correction ne vous conviendraient pas, vous pouvez toujours les modifier dans le fichier de configuration qui a été généré pour le projet (eslintrc.js). Si un tel système est disponible par défaut dans certains environnements de développement comme PhpStorm, ESLint n'en reste pas moins une petite merveille trop peu connue qui est loin de n'être qu'un gadjet qu'on ne va utiliser qu'une fois pour tester. Si vous écrivez beaucoup de JavaScript, vous sentirez très vite sont utilité et il y a des chances que vous ne puissiez plus vous en passer !
Sources
Catégories :
Tech webTags :
JavaScript ECMAScript Visual Studio Code JSON MicrosoftVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !