Zum Hauptinhalt springen

Geteilte Konfigurationen

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Falls Sie viele verschiedene Projekte haben, kann es hilfreich sein, eine geteilte Konfiguration zu verwenden, die in allen Projekten genutzt werden kann, statt dieselbe Konfiguration jedes Mal neu zu kopieren.

Diese Seite erklärt, wie Sie eine teilbare Konfiguration erstellen, veröffentlichen und nutzen können.

Erstellen einer teilbaren Konfiguration​

Teilbare Konfigurationen sind einfach npm-Pakete, die eine einzelne Prettier-Konfigurationsdatei exportieren.

Stellen Sie vor Beginn sicher, dass Sie folgendes haben:

Erstellen Sie zunächst ein neues Paket. Wir empfehlen ein Scoped Package mit dem Namen @username/prettier-config.

Ein minimales Paket benötigt mindestens zwei Dateien: Eine package.json für die Paketkonfiguration und eine index.js, die das geteilte Prettier-Konfigurationsobjekt enthält:

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

Beispiel 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"
  }
}

In index.js platzieren Sie die geteilte Konfiguration. Diese Datei exportiert einfach eine reguläre Prettier-Konfiguration mit identischer Syntax und denselben Optionen:

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

export default config;

Ein Beispielrepository für geteilte Konfigurationen finden Sie hier.

Veröffentlichen einer teilbaren Konfiguration​

Wenn Sie bereit sind, können Sie Ihr Paket auf npm veröffentlichen:

npm publish

Verwenden einer teilbaren Konfiguration​

Installieren Sie zunächst Ihre veröffentlichte Konfiguration, beispielsweise:

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

Dann können Sie sie in Ihrer package.json referenzieren:

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

Falls Sie package.json nicht nutzen möchten, können Sie beliebige unterstützte Dateierweiterungen verwenden, um einen String zu exportieren, z.B. .prettierrc:

"@company/prettier-config"

Erweitern einer teilbaren Konfiguration​

Um die Konfiguration zu erweitern und Eigenschaften der geteilten Konfiguration zu überschreiben, importieren Sie die Datei in .prettierrc.mjs und exportieren Sie die Änderungen:

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

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

export default config;

Weitere Beispiele​

Typ-Annotationen in der geteilten Konfiguration​

Sie erhalten Typsicherheit und Autovervollständigung für Ihre geteilte Konfiguration durch eine jsdoc-Typ-Annotation:

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

export default config;

Damit dies funktioniert, müssen Sie prettier installieren für das Projekt.

Danach sollte Ihre package.json so aussehen:

{
  "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"
+ }
}

Plugins in teilbare Konfigurationen einbinden​

Falls Sie Plugins in Ihrer geteilten Konfiguration nutzen möchten, deklarieren Sie diese im plugin-Array der Konfigurationsdatei und als dependencies in 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"
  }
}

Ein Beispielrepository finden Sie hier

Hinweis: Sie können peerDependencies statt dependencies verwenden. Die Unterschiede erklärt dieser Blogpost von Domenic Denicola zu Peer Dependencies