Guide rapide ESLint + VsCode ESLint " on save"

Salut à toutes et à tous! Aujourd'hui, je vais vous parler de quelque chose qui m’a rendu la vie beaucoup, beaucoup plus facile : ESLint.

Note : Les plupart des choses sur lesquelles je vais parler viennent d’explication de Colt Steele sur ESLint. Colt est bon, cold et drôle, Colt est un trésor. Si vous aimez regarder en lieu de lire, vous pouvez trouver sa vidéo ici : https://www.youtube.com/watch?v=mfGkKlMDfwQ&ab_channel=ColtSteele , je vais juste donner une info supplementaire : Commen configurer VsCode ESLint lors de save.

Note2 : Vous voyez c’est « on save » dans le titre ? Je ne sais pas comment traduire « on save » au français. On dit comment ? « lors de la sauvegarder ou l’enregistrement » ou qqch comme ça ? Si quelqu’un/e peut me dire la traduction correcte, ce sera hyper cool:)

C’est quoi ESLint ?

Le wiki dit que « ESLint est un outil d’analyse de code statique pour identifier les modèles problématiques toruvés dans le code JavaScript. Il a été créé par Nicholas C. Zakas en 2013. »(merci Nicholas!) et je crois que cet explication est tout ą fait suffisante. Mais penser à ce que fait réellement ESLint, en action, mec, c’st plutòt cool. Dites comme on a déclaré une fonction mais ne l’avez jamais utilisé », BOOM ! ESLint donen une erreur et nous indique à cette direction. Ou l’on a écrit une « arrow » fonction (fonction de flèche? On dit comment ça?) d’une manière très, très moche, illisible (parce que t’es un débutant et c’est tout à fait normal, je te parle Murat, je te parle) et que fait ESLint ? BAM ! Cela embellit le code.

Si je peux parler d’expérience personnelle, je vois ESLint dans de nombreaux endroits depuis toujours. Même en ce qui concerne les exigences de l’emploi, et je pensais que c’était peut-être une fonctionnalité effrayante comme Webpack et peut-être j’aurais besoin de plus de temps pour en comprendre, il faut que j’attends etc. Procrastionation classique. Je te le dis mec, ESLint est génial, super fonctionnel et hyper facile ! Alors, on va voir comment peut-on l’utiliser !

Installation d’ESLint

Je suppose que l’On a un dossier sur lequel on travaille, comme un project ou quelque truc omme ça. Okay, on va dans ce dossier et exécute npm init -y dans le terminal (pour Linux, les utilisateurs de npm évidemment) si l’on ne l’a pas encore fait. On sait maintenant que l’on a un fichier package.json.

Puis on lance npm install eslint –save-dev dans le terminal. On a maintenant npm_modules et un fichier package.lock.json. Alors, on doit maintenant lancer ESLint dans son dossier. On écris npx eslint –init dans le terminal. Maintenant, on sera invité à répondre à diverses questions telles que « Commen aimeriez-vous utiliser ESLint ? » ou « Quel guide de style voulez-vous suivre ? », je pense que cette partie et assez explicite et dépend de choix personnels, donc je ne parle pas d’eux. On choisit simplement ce que se convient.

Cofiguration d’ESLint

Après avoir répondu à toutes les questions, on va aller au fichier package.json et là-bas, on va trouver le clé « scripts » qui ressemble à ceci :

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    }```



Là, on va ajouter le code suivant : `"Lint": "npx eslint tonFichier.js"`. Mais bien sûr, ici `tonFichier.js` est le fichier Javascript dans lequel on souhaite utiliser ESLint, donc on va changer ce nom selon ça. Le résultat devrait être quelque truc comme ça :

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npx eslint app.js"

},```

Ça y est ! Juste pour essayer, on peut ajouter du mauvais code et l’exécuter npm run lint dans le terminal, on verra tous les commentaires sur le terminal. Mais, si l’on penserait que ce n’est pas ni bon ni efficace, et l’on voudrait voir les erreur sur l’éditeur texte, on va faire quoi ? Eh, il y a une extension pour ça:)

ESLint avec VsCode

On sait comment ajouter des extensions à VsCode, n’est-ce pas ? Si non, une recherche rapide sur Google clarifierait tous les nuages dans son esprit en un rien de temps. Il y a donc cette extension ESLint dans VsCode, apr Dirk Baeumer, on va l’installer et c’est tout.

ESLint on save

Donc, je voulais utiliser ESLint on save avec VsCode, mais j’ai rencontré des erreurs. Et il ya plein des informations obsolètes dans le web. Ce que je vais parler sur fonctionne bien maintenant (28/07/2021).

Sur VsCode, on va aller à preferences-settings-extensions-eslint (on peut rechercher ESLint une fois on est à « settings » main il faut qu’on clique sur Workspace car c’est là qu’on va changer les paramètres) et là, sur le en haut à droite de la page, on va voir unce icône, et si l’on passe la souris dessus, elle indiquera Open Settings (JSON) . Cela nous mènera à un fichier nommé workspace.json . Là, on va ajouter ce qui suit aux settings . Le résultat sera resssemble ça :

"settings": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
          }
    }``



Et voilà ! Désormais, chaque fois qu l’on enregistre son code, ESLint s’exécutera et fera sa magie.

Bon coding !