ESLint de hacker mdcocaola boum boum

•

Utilises-tu ESLint ? ESLint est un outil indispensable pour faire du JS... Qui va te faire gagner du temps et des skills 📈 Il va rendre ton code consistant et t'éviter de faire des erreurs ! Il faut le MAÎTRISER et l'UTILISER 🚨 Pourquoi ? Comment ? Thread 👇🧵

1. Qu'est-ce que c'est ? ESLint est le linter le plus populaire JavaScript (et TypeScript etc... avec des plugins). Il va te permettre non seulement de vérifier constamment ton code mais aussi de le corriger automatiquement pour toi. Demo :

ESLint est très utilisé quand tu travailles en équipe, afin d'éviter que chacun code « à sa sauce » et d'avoir un code plutôt homogène ! Quand tu travailles tout seul, tu peux totalement l'utiliser ! Il est même conseillé d'utiliser cet outils ! (Obligé ?)

Dans tous mes projets perso, j'ai une config ESLint de gros bourrin qui me correspond, que je change parfois. La voici (bonjour l'angoisse), tu peux retrouver ma config ici : gist.github.com/6456d872352344433c8db51e820e3b0b

Comme tu peux le voir j'ai beaucoup de règles et de plugins afin d'avoir un code 100 % vérifier ✅ Tout ce que ESLint gère je n'ai pas besoin de m'en soucier. Voici la liste de mes plugins. C'est un config que je développe depuis longtemps et que j'améliore avec le temps.

2. Comment installer Dans n'importe quel projet JS tu peux faire : npm i -D eslint

Il faut ensuite init eslint avec : npm init @eslint/config Ensuite, répondre aux questions simplement dans le terminal !

Il va générer un fichier de config en JSON, je préfère YAML, mais tu fais comme tu veux. Une fois que tu as ta config, ESLint fonctionne déjà avec les règles par défaut.

Par exemple, si tu déclare une variable que tu n'utilises pas, tu auras directement une erreur. Après c'est à toi de prendre le temps d'ajouter des règles.

Par exemple, ajoutons ma règle préférée : Par défaut tu peux utiliser let alors que tu ne modifies pas la variable, et même var.

On va donc rechercher dans la doc eslint comment interdire ça et on arrive ici : eslint.org/docs/latest/rules/prefer-const. J'ai aussi envie d'interdit les var : eslint.org/docs/latest/rules/no-var On rajoute les règles dans le fichier de config ESLint :

On retourne dans notre fichier de test où j'ai ajouté un test avec var et boom 2 grosses erreurs ! C'est pas parfait ? Tu ne peux plus te tromper, c'est ton IDE qui s'occupe de ça. Rends-toi compte, tu as de la charge mental en plus pour TOI. Profites-en. Utilise-le.

ESLint est illimité. Il gère du JavaScript basique, pas TypeSript. C'est pour ça que tu peux installer de nombreux plugins pour le booster avec tous les langages que tu souhaites. github.com/dustinspecker/awesome-eslint Ce repo est une pépite pour ajouter des règles.

Comme Neolectron m'a dit une fois : « C'est le marketplace de ESLint, tu viens, tu prends ce que tu veux npm i , copier-coller et boom tu as tout ce qu'il faut » Ce n'est jamais du temps perdu. Le temps que tu prends ici va t'en faire gagner beaucoup !

Dans le repository que j'ai partagé en haut, tu peux voir les règles de Google et Facebook etc... qui t'expliquent pourquoi ils ont fait ce choix. Lire ces informations permet de devenir meilleur et de comprendre certaines choses du JS ou TS.

Au lieu de perdre du temps à choisir le meilleur outil de note comme Notion ou Obsidian ou Trello prend du temps pour trouver une config qui te correspond. Et tu ne pourras plus t'en passer !

Je te remercie d'avoir lu, maintenant ARRÊTE DE SCROLLER TWITTER et passe à l'action (installe ESLint quoi...) ! Tu peux me follow @melvynxdev pour devenir un EXPERT du x (porno ESLint) 🤪