Sharing configurations

import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem";

In case you have many different projects, it can be helpful to have a shared configuration which can be used in all of them, instead of copy-pasting the same config for every project.

This page explains how to create, publish and consume a shareable config.

Creating a Shareable Config

Sharable configs are just npm packages that export a single prettier config file.

Before we start, make sure you have:

• An account for npmjs.com to publish the package
• Basic understating about how to create a Node.js module

First, create a new package. We recommend creating a scoped package with the name @username/prettier-config.

A minimal package should have at least two files. A package.json for the package configuration and an index.js which holds the shared prettier configuration object:

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

Example 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 is where you put the shared configuration. This file just exports a regular prettier configuration with the same syntax and same options:

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

export default config;

An example shared configuration repository is available here.

Publishing a Shareable Config

Once you are ready, you can publish your package to npm:

npm publish

Using a Shareable Config

You first need to install your published configuration, for example:

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

yarn add --dev @username/prettier-config

pnpm add --save-dev @username/prettier-config

bun add --dev @username/prettier-config

Then, you can reference it in your package.json:

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

If you don’t want to use package.json, you can use any of the supported extensions to export a string, e.g. .prettierrc:

"@company/prettier-config"

Extending a Sharable Config

To extend the configuration to overwrite some properties from the shared configuration, import the file in a .prettierrc.mjs file and export the modifications, e.g:

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

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

export default config;

Other examples

Using Type Annotation in the Shared Config

You can get type safety and autocomplete support in your shared configuration by using a jsdoc type annotation:

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

export default config;

In order to make this work, you have to install prettier for the project.

After that, your package.json file should look like this:

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

Include Plugins in Shareable Configurations

In case you want to use plugins in your shared configuration, you need to declare those plugins in the config file's plugin array and as 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"
  }
}

An example repository can be found here

Note: You can use peerDependencies instead of dependencies. To learn about their differences, you can read this blog post from Domenic Denicola about peer dependencies