Installation de Prettier

Prettier est un formateur de code opinionné qui s'occupe automatiquement de la mise en forme, permettant aux développeurs de se concentrer sur la logique applicative.

Pour ajouter Prettier à votre projet, utilisez votre gestionnaire de paquets préféré :

npm install --save-dev prettier

ou avec Yarn :

yarn add --dev prettier

Si vous utilisez des environnements comme Vue.js, des dépendances supplémentaires peuvent être nécessaires. Par exemple, pour Vue 3 :

npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

Une fois installé, créez un fichier de configuraton nommé .prettierrc (ou .prettierrc.json, .prettierrc.yaml, etc.) à la racine de votre projet pour personnaliser ses comportements.

Configuration de Pretttier

Ce fichier permet de définir des règles telles que la largeur des lignes, l'indentation, l'utilisation des guillemets, etc.

{
 "printWidth": 100,
 "tabWidth": 4,
 "useTabs": false,
 "semi": false,
 "singleQuote": true,
 "trailingComma": "all",
 "bracketSpacing": true,
 "arrowParens": "always",
 "endOfLine": "crlf"
}

Description des options courantes :

• printWidth : Définit la longueur maximale d'une ligne avant que Prettier ne tente de la couper.
• tabWidth : Spécifie le nombre d'espaces pour une tabulation.
• useTabs : Indique si les tabulations doivent être utilisées à la place des espaces pour l'indentation.
• semi : Contrôle l'ajout de points-virgules à la fin des instructions.
• singleQuote : Détermine l'utilisation des guillemets simples au lieu des guillemets doubles.
• trailingComma : Gère l'ajout de virgules finales dans les listes (objets, tableaux, etc.). Les options incluent "none", "es5", et "all".
• bracketSpacing : Permet de définir s'il faut des espaces à l'intérieur des accolades des objets littéraux.
• arrowParens : Spécifie si les parenthèses doivent être utilisées autour des paramètres des fonctions fléchées ("avoid" ou "always").
• endOfLine : Définit le type de retour à la ligne à utiliser ("lf", "crlf", "auto").

Ces options, parmi d'autres disponibles dans la documentation officielle de Prettier, façonnent la manière dont le code est formaté.

Utilisation de Prettier

Prettier peut être intégré dans divers flux de travail :

• Ligne de commande : Formatez des fichiers directement depuis votre terminal. Par exemple, pour formater tous les fichiers JavaScript dans le répertoire src : ``` prettier --write src/**/*.js

• Éditeurs de code : Des extensions pour des éditeurs comme VS Code simplifient l'application des règles de formatage, souvent en s'activant à la sauvegarde du fichier.
• Outils de build : Intégration dans des systèmes de build pour garantir que seul du code formaté est intégré.

Configuration locale vs globale

Configuration locale

La configuration définie dans le fichier .prettierrc à la racine du projet s'applique localement à ce projet. Cela est utile lorsque différents projets ont des exigences stylistiques distinctes.

Par exemple, un fichier .prettierrc spécifique à un projet pourrait ressembler à ceci :

{
 "printWidth": 120,
 "tabWidth": 2,
 "semi": true,
 "singleQuote": false
}

Configuration globale (via EditorConfig)

Pour des configurations plus générales ou pour synchroniser les paramètres de base entre différents projets et éditeurs, EditorConfig est un excellent complément. Créez un fichier .editorconfig à la racine de votre projet.

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
indent_size = 4

Ce fichier définit des règles de base pour tous les fichiers ([*]) et des règles spécifiques pour certains types de fichiers ([*.js]). Ces paramètres sont reconnus par la plupart des éditeurs de code modernes, souvent via une extension dédiée.