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​

Sharable 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:

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

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