Skip to main content

Sharing configurations

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​

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

Before we start, make sure you have:

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:

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"
  },
  "devDependencies": {
    "prettier": "3.9.9"
  }
}

index.js is where you put the shared configuration. This file just exports a regular prettier configuration with the same syntax and same options:

index.js
/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
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

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

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:

.prettierrc
"@company/prettier-config"

Extending a Shareable Config​

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

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

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

export default config;

Other examples​

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
import * as prettierPluginOxc from "@prettier/plugin-oxc";

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  singleQuote: true,
  plugins: [prettierPluginOxc],
};

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-oxc": "0.1.2"
+  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  },
  "devDependencies": {
    "prettier": "3.9.9"
  }
}

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