Nettoyer son code source en 5 minutes avec Prettier

La gestion d’un projet informatique avec un fort turnover peut rapidement devenir un véritable cauchemar pour les développeurs. Les équipes se succèdent, le code source devient chaotique et difficile à maintenir. Le manque de cohérence du code dû aux nombreux styles de programmation rend la tâche encore plus complexe. Dans ce contexte, maintenir un code propre et lisible est un véritable défi pour ceux qui reprennent le projet.

Comment reprendre un projet en main en moins de 5 minutes ?

La solution ? Prettier, un outil simple et puissant pour uniformiser le style de code. Voyons ensemble comment l’installer et l’utiliser efficacement pour remettre de l’ordre dans votre projet.

Installation des outils

Si vous lisez ceci, c’est probablement parce que vous avez déjà été confronté à un code source illisible en reprenant un projet existant. Des problèmes comme une indentation chaotique, des lignes de code trop longues ou des espaces mal placés rendent la maintenance compliquée.

Pour illustrer cela, imaginons une application AngularJs avec un backend Java EE. Ce type de projet est idéal pour démontrer comment Prettier peut rapidement remettre de l’ordre dans le code. Voici comment l’installer :

Étape 1 : Créez un dossier pour les outils

$ mkdir tools
$ cd tools

Étape 2 : Initialisez le projet avec npm

$ npm init -y
$ npm install prettier prettier-plugin-java

Pour les projets nécessitant Java, utilisez le plugin prettier-plugin-java. Pour les autres langages, vous pouvez consulter la documentation officielle de Prettier.

Configurer Prettier pour votre projet

Une fois Prettier installé, il faut le configurer pour qu’il applique les bonnes règles de formatage à votre projet. Vous pouvez personnaliser les règles en fonction des besoins de chaque langage de votre projet.

Fichier .editorconfig

Le fichier .editorconfig est utilisé pour définir des règles de formatage générales. Voici un exemple :

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
trim_trailing_whitespace = true
max_line_length = 140

[*.js]
indent_size = 2

[*.css,*.scss]
indent_size = 2

[*.html]
indent_size = 2

[*.java]
indent_size = 4
max_line_length = 120

Cet exemple montre comment appliquer des règles spécifiques selon le type de fichier. Cela garantit une cohérence dans le formatage, peu importe l’éditeur utilisé.

Fichier .prettierrc

Ensuite, configurez le fichier principal .prettierrc. Voici un exemple simple :

semi: true

Ce fichier indique à Prettier d’ajouter des points-virgules à la fin des instructions JavaScript, garantissant ainsi un formatage cohérent.

Exécuter Prettier pour formater votre code

Les deux fichiers précédent permettent de configurer le comportement de Prettier. Il est maintenant temps de l’exécuter pour formater le code source :

# pwd -> tools
$ npx prettier -w path/to/project/**/*.{html,css,scss,js,java}

Cette commande formate tous les fichiers HTML, CSS, SASS, JavaScript et Java du projet, en sauvegardant les modifications dans les fichiers d’origine.

Ne vous arrêtez pas là !

En intégrant Prettier et EditorConfig dans votre projet, vous garantissez un code uniforme et lisible pour l’ensemble des développeurs, quel que soit leur éditeur de texte. Ces fichiers de configuration sont compatibles avec des IDE modernes comme VSCode.

Ne laissez plus le turnover ou le manque de rigueur de certains développeurs dégrader la qualité de votre projet. Prettier vous offre une solution simple pour maintenir un code propre et agréable à lire.