Aller au contenu principal

Installation

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Commencez par installer Prettier localement :

npm install --save-dev --save-exact prettier@%PRETTIER_VERSION%

Ensuite, créez un fichier de configuration vide pour indiquer aux éditeurs et autres outils que vous utilisez Prettier :

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Puis, créez un fichier .prettierignore pour indiquer à la CLI Prettier et aux éditeurs quels fichiers ne pas formater. Voici un exemple :

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
astuce

Prettier respectera les règles spécifiées dans .gitignore s'il existe dans le même répertoire d'exécution. Vous pouvez aussi baser votre .prettierignore sur .eslintignore (si vous en avez un).

Autre conseil

Si votre projet n'est pas prêt à formater certains fichiers comme les HTML, ajoutez *.html.

Maintenant, formatez tous les fichiers avec Prettier :

npx prettier . --write
information

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

avertissement

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

prettier --write . est idéal pour tout formater, mais sur un gros projet cela peut prendre du temps. Vous pouvez exécuter prettier --write app/ pour formater un répertoire spécifique, ou prettier --write app/components/Button.js pour un fichier particulier. Ou utilisez un glob comme prettier --write "app/**/*.test.js" pour formater tous les tests d'un répertoire (voir fast-glob pour la syntaxe des globs supportée).

Si vous avez une CI configurée, exécutez ceci pour vous assurer que tout le monde utilise Prettier. Cela évite les conflits de fusion et autres problèmes de collaboration !

npx prettier . --check

--check fonctionne comme --write mais vérifie seulement si les fichiers sont déjà formatés, sans les réécrire. prettier --write et prettier --check sont les méthodes les plus courantes pour exécuter Prettier.

Configurer votre éditeur​

Le formatage en ligne de commande est un bon point de départ, mais vous profiterez pleinement de Prettier en l'exécutant depuis votre éditeur, via un raccourci clavier ou automatiquement à chaque sauvegarde. Quand une ligne de code devient trop longue pour votre écran, appuyez sur une touche et voyez-la se découper magiquement en plusieurs lignes ! Ou quand vous collez du code mal indenté, laissez Prettier le corriger sans quitter votre éditeur.

Voir Intégration éditeur pour configurer votre éditeur. Si votre éditeur ne supporte pas Prettier, vous pouvez l'exécuter avec un observateur de fichiers.

remarque

Ne zappez pas l'installation locale ! Les plugins d'éditeur utiliseront votre version locale de Prettier, garantissant la bonne version pour chaque projet. (Vous ne voudriez pas que votre éditeur cause des changements massifs en utilisant une version plus récente que celle de votre projet !)

Pouvoir exécuter Prettier en ligne de commande reste un bon plan B, indispensable pour les CI.

ESLint (et autres linters)​

Si vous utilisez ESLint, installez eslint-config-prettier pour faire collaborer ESLint et Prettier. Cela désactive les règles ESLint superflues ou conflictuelles avec Prettier. Une configuration similaire existe pour Stylelint : stylelint-config-prettier

(Voir Prettier vs. Linters pour comparer formatage et linting, Intégration avec les linters pour configurer vos linters, et Projets associés pour d'autres possibilités d'intégration.)

Git hooks​

En plus d'exécuter Prettier en ligne de commande (prettier --write), de vérifier le formatage en CI et de lancer Prettier depuis votre éditeur, beaucoup de développeurs aiment aussi l'utiliser comme hook pre-commit. Cela garantit que tous vos commits sont formatés sans attendre la fin du build CI.

Par exemple, voici comment faire pour exécuter Prettier avant chaque commit :

  1. Installez husky et lint-staged :
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. Ajoutez ceci à votre package.json :
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
remarque

Si vous utilisez ESLint, assurez-vous que lint-staged l'exécute avant Prettier, et non après.

Consultez Pre-commit Hook pour plus d'informations.

Récapitulatif​

Pour résumer, nous avons appris à :

  • Installer une version exacte de Prettier localement dans votre projet. Cela garantit que tous les membres utilisent la même version. Même une mise à jour correctrice peut modifier légèrement le formatage, il est donc crucial d'éviter que différentes versions ne réformatent continuellement le code des autres.

  • Ajouter un .prettierrc pour indiquer à votre éditeur que vous utilisez Prettier.

  • Créer un .prettierignore pour spécifier les fichiers à ne pas modifier, et pouvoir exécuter prettier --write . sur l'ensemble du projet (sans altérer les fichiers indésirables ni échouer sur des fichiers générés).

  • Exécuter prettier --check . en CI pour maintenir le projet correctement formaté.

  • Lancer Prettier depuis votre éditeur pour une expérience optimale.

  • Utiliser eslint-config-prettier pour harmoniser Prettier et ESLint.

  • Configurer un hook pre-commit pour formater systématiquement chaque commit.