Maintenez votre code impeccable avec Prettier : guide expert

Le formatage du code peut sembler anodin, mais il impacte directement la qualité, la lisibilité et la collaboration en équipe. Évitez les débats interminables sur les accolades ou les indentations en déléguant cette tâche à Prettier, l'outil open source incontournable.

Pourquoi le formatage compte

Les équipes de développement perdent trop de temps à débattre de la longueur des lignes ou du placement des accolades. Une chose est sûre : la cohérence est essentielle dans un projet. Prettier résout cela en reformattant automatiquement votre code de manière uniforme. Disponible comme extension d'éditeur, outil en ligne de commande ou démo en ligne.

Prettier excelle particulièrement dans le développement web frontal avec un support natif pour :

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Et une extension illimitée via plugins pour d'autres langages.

Testez Prettier en ligne

Avant installation, essayez le terrain de jeu en ligne. Collez votre code dans l'interface web et observez la magie opérer. Idéal pour une utilisation occasionnelle ou pour découvrir ses effets.

L'interface affiche deux panneaux : entrée à gauche, sortie formatée à droite. Effacez l'exemple et testez ce JavaScript :

(function () {
  window.alert('ok');
})();

Prettier le transforme en :

(function () {
  window.alert("ok");
})();

Modifications par défaut :

• Guillemets doubles
• Ajout de points-virgules
• Indentation à 2 espaces

En bas à gauche, ajustez les options comme --single-quote (guillemets simples) ou --no-semi (sans points-virgules).

Configurer les options

Prettier est "opinionated" : il priorise la cohérence sur la personnalisation fine (contrairement à ESLint). Créez un fichier .prettierrc.json à la racine de votre projet :

{
  "tabWidth": 8
}

Ce fichier est lu par tous les outils Prettier.

Installation et usage en ligne de commande

Installez globalement :

$ yarn global add prettier

Ou avec npm :

$ npm install --global prettier

Vérifiez : $ prettier (affiche l'aide).

Formater un fichier

$ prettier --write filename.js (écrase le fichier).

Ou tout le projet : $ prettier --write .

Sortie vers un nouveau fichier : $ prettier test.js > test2.js

Vérifier sans modifier

$ prettier --check . liste les fichiers mal formatés.

Options CLI

Exemple avec guillemets simples :

$ prettier tmp.js
fonction exemple() {
  console.log("bonjour, monde");
}
$ prettier --single-quote tmp.js
fonction exemple() {
  console.log('bonjour, monde');
}

Aide détaillée : $ prettier --help trailing-comma

Intégrez Prettier dans votre éditeur

Prettier s'intègre parfaitement dans les éditeurs populaires.

Sublime Text

Installez JsPrettier via Package Control (après avoir installé Prettier globalement). Clic droit pour formater, ou activez auto_format_on_save.

Atom

Installez prettier-atom via le gestionnaire de paquets.

Vim

mkdir -p ~/.vim/pack/plugins/start
git clone https://github.com/prettier/vim-prettier \
  ~/.vim/pack/plugins/start/vim-prettier

Auto-format sur save, ou commande :Prettier.

Intégrez Prettier à votre workflow

Prettier unifie le style de code, réduit les conflits et facilite la collaboration. Configurez un pre-commit Git hook pour un repo toujours impeccable.