02 • 34 • 09 • 31 • 70
Produire un code mis en forme de manière cohérente est un atout indispensable pour tout développeur qui se respecte.
Que vous travailliez seul ou en équipe, avoir un projet qui respecte ses propres règles de nommage, d'indentation, etc. est quelque chose d’essentiel pour une meilleure maintenabilité.
Dans cet article, nous explorerons quelques-uns des outils incontournables qui permettent d’automatiser (ou en tout cas de simplifier) la mise en forme de son code : Prettier, Eslint, Stylelint, Knip et Cspell.
Prettier : la mise en forme
Prettier est un outil de mise en forme du code. C’est-à-dire que grâce à cet outil, et en une seule commande (ou à la sauvegarde de votre fichier), ce dernier viendra remettre en forme votre code : indentation, répartition sur plusieurs lignes, etc.
Une des particularités de Prettier est qu’il est opiniâtre dans ses règles, c'est-à-dire que Prettier ne propose que très peu de règles de paramètres à ses utilisateurs.
C’est une vision qu’il faut accepter pour se décider à utiliser Prettier, même si au final, celui-ci est composé de règles logiques qui ont été étudiées et validées par la communauté lors de sa conception. Et encore une fois c’est la philosophie de Prettier de proposer un outil qui ne donne que peu (voire pas) de prise de tête sur la configuration, et dont les choses qui pourraient éventuellement déranger le développeur, deviendraient acceptables face aux bénéfices (et c’est la documentation qui dit cela !).
Parmi les quelques paramètres que vous pouvez gérer, nous retrouverons : le nombre d’espace pour une indentation, le choix d’ajouter ou non des points virgules (en JS/TS), le nombre maximum de caractères par lignes, etc.
Une autre des forces de Prettier est qu’il est possible de l’utiliser sur plusieurs langages : JS/TS, HTML, CSS ou encore Markdown. Mais également, grâce à des plugins complémentaires de la communauté : Java, PHP, etc.
Prettier permet donc de gérer la “beauté” de son code. Nous allons maintenant voir un autre outil complémentaire qui permet de gérer plutôt l'aspect bonne pratique de l’écriture du code.
Eslint : la cohérence
ESLint est une solution pour contrôler la qualité et la cohérence du code. ESLint analyse le code JavaScript/Typescript pour détecter les erreurs, les mauvaises pratiques ou toute autre convention de style non conforme : présence de “console.log”, utilisation de “var” à la place de “const”, etc. Eslint, contrairement à Prettier dans son registre, propose un outil particulièrement configurable.
Vous l’aurez compris, Eslint intervient surtout en complément de Prettier. Là où Prettier permet de gérer l'esthétisme de son code, Eslint permet plutôt (même si ce n’est pas à 100% vrai) de gérer les bonnes pratiques Javascript via des règles sur l’utilisation ou la restriction de certaines syntaxes.
Une des forces de Eslint est sa communauté active qui propose déjà tout un tas de configurations et plugins pour vous faciliter la tâche. En voici quelques-uns que nous vous recommandons :
- @typescript-eslint/eslint-plugin : Permet de linter du Typescript
- eslint-config-airbnb / eslint-config-airbnb-typescript : Configuration célèbre utilisée par Airbnb avec ses règles déjà en place
- eslint-config-prettier : Permet de désactiver les règles pouvant faire conflit avec Prettier
- eslint-plugin-deprecation : Permet de faire remonter les éléments dépréciés
- eslint-plugin-import : Permet de gérer l’ordre des imports
- eslint-plugin-jsdoc : Permet de linter le JSdoc
- eslint-plugin-react / eslint-plugin-react-hooks / eslint-plugin-jsx-a11y : Permet de linter ce qui concerne la syntaxe de React
Stylelint : la cohérence et le style
Stylelint est une solution très similaire à Eslint, mais sa différence réside dans le fait qu’il permet de linter les fichiers CSS / SCSS et tout autre système de feuilles de style. Son principe reste donc le même : des règles configurables et des plugins communautaires. De nouveau, celui-ci est un complément à Prettier.
Voici quelques plugins que nous vous recommandons également :
- stylelint-config-sass-guidelines / stylelint-config-standard : Configuration de base avec son lot de règles déjà prêtes pour du SCSS/Sass
- stylelint-order : Permet de gérer l’ordre des règles CSS (alphabétiquement par exemple)
Knip : l’analyseur
Knip est un outil qui intervient dans un registre différent de ce que nous avons vu jusque-là. Ce dernier permet d'analyser un projet et de trouver différents éléments inutilisés (et vous invite donc à potentiellement les supprimer) :
- Librairies installées mais jamais importées
- Variables/Fonctions/Autres exportés par un fichier mais jamais importés par un autre
- Fichiers jamais utilisés
- Variables de Class non utilisées
- Etc…
Knip permet de rapidement voir le code mort dans son projet, ce qui arrive forcément en cours de développement où des éléments créés/installés ne sont finalement pas ou plus utilisés.
Cspell : le correcteur
Cspell est un correcteur orthographique pour le code. Celui-ci est capable de lire tout type de fichier (Javascript, Json, Markdown, etc.) pour repérer les fautes d’orthographe.
Cspell, une fois configuré, est capable de comprendre plusieurs langues. Bien sûr, par défaut, il comprend l’anglais, mais il est possible de lui ajouter des dictionnaires complémentaires pour qu’il comprenne le français en plus, par exemple. Attention, il ne corrige que l’orthographe et pas la grammaire.
En plus des dictionnaires, vous pouvez aussi configurer vos propres mots spécifiques à votre projet, comme des termes ou abréviations métiers très spécifiques.
Mise en forme automatique
Maintenant que nous avons vu ces différents outils pour améliorer la qualité de votre code, l’étape d'après serait d’automatiser les corrections pour un gain de temps et surtout une facilité d’usage lors des développements.
Extension pour Visual Studio Code : Correction à la sauvegarde
Une première technique consiste à se dire que pour chaque enregistrement d’un fichier, nous aimerions que celui-ci soit analysé et corrigé via Prettier et Eslint/Stylelint. Ainsi, pas besoin de se soucier d'exécuter une commande.
Pour cela, il existe plusieurs plugins pour VS Code qui prennent en charge ce rôle :
- esbenp.prettier-vscode : Permet l'exécution automatique de Prettier pour remettre en forme le contenu
- dbaeumer.vscode-eslint / stylelint.vscode-stylelint : Permet l'exécution automatique d’Eslint / Stylelint pour appliquer les corrections possibles (certaines règles requièrent une correction manuelle)
En plus de la correction automatique, VS Code viendra afficher sur chaque ligne, pour chaque fichier, les erreurs/warnings correspondant à votre configuration Eslint / Stylelint.
C’est également ainsi que fonctionne CSpell, en vous soulignant en bleu les problèmes d’orthographe et en vous proposant plusieurs mots proches pour venir corriger manuellement le problème.
Lint Staged : Correction au commit
Lint Staged propose une solution alternative, ou plutôt complémentaire, aux extensions Visual Studio Code.
Lint Staged permet l'exécution des différents scripts (Prettier, Eslint, etc.) lorsqu’un développeur exécute un “git commit”. Pour mettre cela en place, il est nécessaire d’ajouter un “hook git”. Husky est une librairie qui vient faciliter cette configuration.
Ainsi, à chaque commit, et avant que celui-ci ne soit validé, Lint Staged va venir lancer les commandes Eslint, Prettier, Stylelint, CSpell et/ou Knip afin de venir s’assurer que le code qui cherche à être sauvegardé respecte bien les conventions mises en place. Si ce n’est pas le cas, le commit échoue et il faudra corriger les éléments remontés.
Ainsi, nous avons vu plusieurs outils qui permettent de maintenir une meilleure qualité de code au sein de vos projets. Particulièrement utiles pour certains projets, notamment ceux en collaboration, ces outils vous permettront d’avoir des projets normés et dont la structure sera, en partie, gérée automatiquement.
Chez Next Decision, fort de cette expérience, nous savons créer des projets d’applications web métier et autres répondant à des normes de qualité et de savoir-faire pour satisfaire à vos besoins métiers.
Un besoin de formation sur-mesure ? Nos développeurs Business Apps sont à votre écoute ! Contactez-nous !
