Aller au contenu principal

Partager des configurations

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 →

Si vous gérez plusieurs projets différents, il peut être utile d'avoir une configuration partagée utilisable sur tous vos projets plutôt que de copier-coller la même configuration pour chaque projet.

Cette page explique comment créer, publier et utiliser une configuration partageable.

Créer une configuration partageable​

Les configurations partageables sont simplement des packages npm qui exportent un unique fichier de configuration Prettier.

Avant de commencer, assurez-vous d'avoir :

Commencez par créer un nouveau package. Nous recommandons d'utiliser un package scopé avec le nom @username/prettier-config.

Un package minimal doit contenir au moins deux fichiers : un package.json pour la configuration du package et un index.js contenant l'objet de configuration Prettier partagé :

prettier-config/
├── index.js
└── package.json

Exemple package.json :

{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  }
}

index.js est l'endroit où vous placez la configuration partagée. Ce fichier exporte simplement une configuration Prettier standard avec la même syntaxe et les mêmes options :

const config = {
  trailingComma: "es5",
  tabWidth: 4,
  singleQuote: true,
};

export default config;

Un exemple de dépôt de configuration partagée est disponible ici.

Publier une configuration partageable​

Une fois prêt, vous pouvez publier votre package sur npm :

npm publish

Utiliser une configuration partageable​

Vous devez d'abord installer votre configuration publiée, par exemple :

npm install --save-dev @username/prettier-config

Puis vous pouvez la référencer dans votre package.json :

{
  "name": "my-cool-library",
  "version": "1.0.0",
  "prettier": "@username/prettier-config"
}

Si vous ne souhaitez pas utiliser package.json, vous pouvez utiliser n'importe quelle extension supportée pour exporter une chaîne, par exemple .prettierrc :

"@company/prettier-config"

Étendre une configuration partageable​

Pour étendre la configuration et surcharger certaines propriétés de la configuration partagée, importez le fichier dans un fichier .prettierrc.mjs et exportez les modifications, par exemple :

import usernamePrettierConfig from "@username/prettier-config";

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  ...usernamePrettierConfig,
  semi: false,
};

export default config;

Autres exemples​

Utiliser les annotations de type dans la configuration partagée​

Vous pouvez bénéficier de la sécurité de typage et de l'autocomplétion dans votre configuration partagée en utilisant une annotation de type jsdoc :

/**
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

Pour que cela fonctionne, vous devez installer prettier pour le projet.

Après installation, votre fichier package.json devrait ressembler à ceci :

{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  },
+ "devDependencies": {
+   "prettier": "^3.3.3"
+ }
}

Inclure des plugins dans les configurations partageables​

Si vous souhaitez utiliser des plugins dans votre configuration partagée, vous devez les déclarer dans le tableau plugin du fichier de configuration et comme dependencies dans package.json :

// index.js
const config = {
  singleQuote: true,
  plugins: ["prettier-plugin-xml"],
};

export default config;
// package.json
{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
+  "dependencies": {
+    "prettier-plugin-xml": "3.4.1"
+  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  }
}

Un exemple de dépôt est disponible ici

Note : Vous pouvez utiliser peerDependencies au lieu de dependencies. Pour comprendre leurs différences, vous pouvez lire cet article de blog de Domenic Denicola sur les dépendances peer