Configurer une application Node.js avec ESLint et Prettier

-

Introduction

Avant de construire une application, nous devons d’abord préparer l’environnement de développement avec des outils et des technologies qui facilitent le développement et le débogage. L’application Node.js ne fait pas exception, nous devons donc la configurer avec des paquets, des modules, des plug-ins et des outils qui améliorent la qualité de notre code et évitent les bogues et les erreurs. ESLint et Prettier sont deux de ces outils.

Qu’est-ce que ESLint ?

ESLint est un outil de linting JavaScript et TypeScript, c’est-à-dire qu’il analyse le code source et identifie les éventuels problèmes et erreurs de programmation. Il souligne les erreurs en rouge et les avertissements en jaune. Il est très utile pour couvrir les problèmes de style de codage.

Qu’est-ce que Prettier ?

Prettier est un formateur de code opiniâtre, il impose un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui tiennent compte de la longueur maximale des lignes, en enveloppant le code si nécessaire. Il est très utile pour garder votre code lisible et s’assurer que le format du code reste cohérent lorsque vous travaillez en équipe. Il prend également en charge de nombreux langages de programmation tels que : JavaScript, TypeScript, CSS, GraphQL, JSON et bien plus encore.

Configuration de ESLint et Prettier.

Tout d’abord, créez un nouveau dossier appelé app-eslint-prettier-config et plongez dans ce dossier. Ouvrez votre terminal et initialisez votre application node.js en entrant cette commande :

npm init --y

Assurez-vous que vous avez déjà installé Node.js sur votre machine locale, puis installez toutes les dépendances nécessaires :

npm install eslint eslint-config-prettier prettier --save-dev

Configurez ESLint en exécutant cette commande :

eslint --init

Après avoir exécuté cette commande, vous devez configurer ESLint en sélectionnant certaines options de configuration. Utilisez la touche de déplacement vers le bas pour aller à vérifier la syntaxe et trouver les problèmes, comme le montre l’image suivante. Appuyez sur la barre d’espacement pour sélectionner, puis appuyez sur la touche Entrée.

Personnellement, j’aime beaucoup choisir aussi l’option pour améliorer le style de code

Ensuite, sélectionnez le type de module que vous voulez utiliser et le framework que vous voulez utiliser. Dans notre cas, nous allons travailler sur un projet Node.js, donc ne sélectionner aucun de ces éléments. Répondez à toutes les questions suivantes en suivant la même procédure.

Le résultat final ressemblera à ceci :

Maintenant, un fichier appelé .eslintrc.json est créé. Remplacez tout le contenu de ce fichier par le code suivant :

{
    "root": true,
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "extends": [
         "eslint:recommended",
         "prettier",
         "plugin:react/recommended"
    ],
    "env": {
         "browser": true,
         "es2021": true,
         "node": true
    },
    "rules": {
         "no-console": "error"
    }
}

Maintenant, expliquons chaque paquet de code ajouté dans le fichier .eslintrc.json :

  • La propriété root indique que cette configuration est la racine du projet. En attribuant true à cette propriété root, ESLint est limité à un projet spécifique et arrête de chercher dans les dossiers parents.
  • Le parserOptions définit quelle version d’ECMASCRIPT vous utilisez dans votre code et si vous utilisez des modules ou non.
  • L’option extends permet d’ajouter des règles à la configuration. Ici, nous utilisons les règles recommandées par ESLint et les règles définies par le paquet eslint-config-prettier. Ce paquet désactive toutes les règles ESLint qui sont inutiles ou qui pourraient entrer en conflit avec Prettier.
  • La propriété env définit le type d’environnement dans lequel votre code sera exécuté. Ici, il s’agit d’un Node.js alors nous mettons la propriété node à true. Vous pouvez également ajouter la propriété browser et la définir sur true si vous travaillez également dans un environnement client comme React ou Vue.
  • La propriété rules vous permet de modifier ou d’ajouter des règles spécifiquement. Nous ajoutons no-console : "error" afin d’éviter d’utiliser les méthodes sur la console. Les messages de la console sont considérés comme étant utilisés à des fins de débogage et ne conviennent donc pas pour être envoyés au client. Mais si vous voulez autoriser les méthodes de la console, ajoutez cet exemple de code dans les règles : { "allow" : ["warn", "error"] }.

Il y a plus d’options disponibles, vous pouvez consulter la documentation officielle d’ESLint si vous êtes intéressé.

Maintenant, nous allons configurer Prettier.

Créez un fichier appelé .prettierrc.json dans le répertoire racine de votre projet et ajoutez le code suivant à ce fichier :

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

Ici, nous utilisons les options de configuration par défaut, vous pouvez en ajouter d’autres si vous le souhaitez. Consultez la documentation de Prettier pour plus de détails.

Nous avons fini de configurer ESLint et Prettier, mais nous devons ajouter quelques scripts dans le fichier package.json afin de pouvoir exécuter ESLint et Prettier manuellement.

Code ajouté dans package.json :

"scripts": {
  "format:check": "prettier --check .",
  "format:write": "prettier --write .",
  "lint:check": "eslint",
  "lint:fix": "eslint --fix"
}

Vérifiez si le formatage correspond aux règles de ce Prettier en utilisant :

npm run format:check

Forcer le formatage en utilisant cette commande :

npm run format:write

Lint votre code avec :

npm run lint:check

Corriger automatiquement les erreurs avec cette commande :

npm run lint:fix

Conclusion

Nous avons maintenant terminé la mise en place de notre application Node.js avec Eslint et Prettier. Vous pouvez trouver le code source complet dans ce dépôt :
https://github.com/alfreddagenais/kilukru-dev-eslint-prettier-node-app

Alfredhttps://www.alfreddagenais.com
Je suis un développeur Web Full Stack sénior. Chaque jour est pour moi une journée de plus pour découvrir de nouvelles idées. Le développement web et l'informatique sont omniprésents dans mon quotidien. Pour que la créativité soit à son maximum, il ne faut pas avoir peur d’expérimenter et nous avons tous que le Web est infiniment grand pour expérimenter nos idées.

Share this article

Recent posts

Popular categories

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Recent comments