Hoppa till huvudinnehållet

Dela konfigurationer

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Om du har många olika projekt kan det vara praktiskt att ha en gemensam konfiguration som kan användas i alla dem, istället för att kopiera-klistra samma konfig för varje projekt.

Den här sidan förklarar hur du skapar, publicerar och använder en delbar konfiguration.

Skapa en delbar konfiguration​

Delbara konfigurationer är bara npm-paket som exporterar en enda prettier-konfigurationsfil.

Innan vi börjar, se till att du har:

Först, skapa ett nytt paket. Vi rekommenderar att du skapar ett scoped package med namnet @username/prettier-config.

Ett minimalt paket bör ha minst två filer. En package.json för paketkonfigurationen och en index.js som innehåller det delade prettier-konfigurationsobjektet:

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

Exempel på 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 är där du placerar den delade konfigurationen. Den här filen exporterar bara en vanlig prettier-konfiguration med samma syntax och samma alternativ:

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

export default config;

Ett exempel på ett delat konfigurationsarkiv finns här.

Publicera en delbar konfiguration​

När du är redo kan du publicera ditt paket på npm:

npm publish

Använda en delbar konfiguration​

Du måste först installera din publicerade konfiguration, till exempel:

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

Sedan kan du referera till den i din package.json:

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

Om du inte vill använda package.json kan du använda någon av de filändelser som stöds för att exportera en sträng, t.ex. .prettierrc:

"@company/prettier-config"

Utöka en delbar konfiguration​

För att utöka konfigurationen och skriva över vissa egenskaper från den delade konfigurationen, importera filen i en .prettierrc.mjs-fil och exportera ändringarna, t.ex:

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

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

export default config;

Andra exempel​

Använda typannotering i den delade konfigurationen​

Du kan få typsäkerhet och automatisk komplettering i din delade konfiguration genom att använda en jsdoc-typannotation:

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

export default config;

För att detta ska fungera måste du installera prettier för projektet.

Därefter bör din package.json-fil se ut så här:

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

Inkludera plugin i delbara konfigurationer​

Om du vill använda plugins i din delade konfiguration måste du deklarera dessa plugins i konfigurationsfilens plugin-array och som dependencies i 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"
  }
}

Ett exempelarkiv finns här

Obs: Du kan använda peerDependencies istället för dependencies. För att lära dig om deras skillnader kan du läsa denna bloggpost från Domenic Denicola om peer dependencies