Full source code is available on  github.

In this tutorial, I will show you how to create a shareable or reusable prettier configuration that you can use on multiple projects without need to copy-paste your configuration file.

If you use prettier on multiple projects, this tutorial is for you. You will be able to manage prettier configuration for all of your projects in one place and versioning your personal or team-shared config file. This will save a lot of time for you and your teammates.

We will start by reviewing the basic information about prettier first and then we will create a shareable or reusable prettier configuration from scratch and distribute it as npm package.

If you are familiar with prettier, feel free to go straight to the tutorial section.

[Prettier][2] is a tool used by developers to check and fix the format of their code. It is an essential tool that you must use to write readable code with consistent formatting.

Prettier transforms ugly & unredable source code to pretty & readable source code, hence the name Prettier.

Prettier is the most popular code formatter tool and supported by wide-variety of code editors. You can customize the formatting results based on your personal or team preferences via Prettier Options.

Example of Prettier options:

See full available options  here.

You can store the Prettier options in .prettierrc file or package.json on your project. If you work on multiple projects you will find yourself copy-paste your .prettierrc file and need to update the file one-by-one if your code format preferences changes.

So, how to create reusable Prettier configuration across multiple projects?

Let’s create shareable prettier configuration and distribute it as npm package. The full source code is available  here.

First, create new project by running the following command:

# npm
npm init -y

# pnpm
pnpm init

For example:

✦ pnpm init
Wrote to /Users/pyk/github/pyk/prettier-config/package.json

{
  "name": "prettier-config",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Then update the package.json like the following:

{
    "name": "@pyk/prettier-config",
    "version": "1.0.0",
    "description": "pyk's personal prettier config",
    "main": "index.js",
    "license": "MIT",
    "homepage": "https://pyk.sh/create-shareable-prettier-configuration/",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/pyk/prettier-config.git"
    },
    "bugs": {
        "url": "https://github.com/pyk/prettier-config/issues"
    },
    "author": {
        "name": "pyk",
        "email": "[email protected]",
        "url": "https://github.com/pyk"
    },
    "keywords": ["prettier", "prettier-config"],
    "publishConfig": {
        "access": "public"
    },
    "scripts": {
        "prettier:check": "prettier --check ."
    },
    "prettier": "./index.js",
    "devDependencies": {
        "prettier": "2.7.1"
    }
}

Don’t forget to update the name, description, homepage, repository.url, bugs.url and the author. Feel free to skip the devDependencies and scripts fields, it is optional.

You can set your sharebale prettier configuration as private npm package by removing the publishConfig field.

Next step is to create index.js file with the following content:

// index.js
module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: true,
    singleQuote: false,
    proseWrap: "always",
    printWidth: 79,
    useTabs: false,
    bracketSpacing: true,
    overrides: [
        {
            files: ["*.yml", "*.yaml"],
            options: {
                tabWidth: 2
            }
        }
    ]
};

Feel free to customize the options based on your preferences. See full available options  here.

The last step is to publish it to npm using the following command:

# npm
npm publish

# pnpm
pnpm publish

For example:

✦ pnpm publish
npm notice
npm notice 📦  @pyk/[email protected]
npm notice === Tarball Contents ===
npm notice 348B index.js
npm notice 753B package.json
npm notice === Tarball Details ===
npm notice name:          @pyk/prettier-config
npm notice version:       1.0.0
npm notice filename:      @pyk/prettier-config-1.0.0.tgz
npm notice package size:  618 B
npm notice unpacked size: 1.1 kB
npm notice shasum:        c224f4bb7211476dcfc1b130a9022f259e35aba0
npm notice integrity:     sha512-ZdrJfj3ISnGvI[...]99pn3FGGgs1kg==
npm notice total files:   2
npm notice
npm notice Publishing to https://registry.npmjs.org/
+ @pyk/[email protected]
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g [email protected] to update!
npm notice

To use your shareable prettier config:

1. Install your prettier-config as dev dependencies
2. Set "prettier": "your-package-name" in your other package.json project

For example:

# npm
npm install --save-dev --save-exact prettier @pyk/prettier-config

# pnpm
pnpm add --save-dev --save-exact prettier @pyk/prettier-config

Then update the package.json:

{
    "name": "your-project",
    "scripts": {
        "prettier:check": "prettier --check .",
        "prettier:write": "prettier --write ."
    },
    "prettier": "@pyk/prettier-config",
    "devDependencies": {
        "prettier": "2.7.1",
        "@pyk/prettier-config": "1.0.0"
    }
}

Your code editor should be automatically use the prettier configuration. If you have some Continuous Integration pipeline or git hooks, you can use the following command to check and fix your code format:

# npm
npm run prettier:check
npm run prettier:write

# npm
pnpm prettier:check
pnpm prettier:write

Enjoy and happy hacking!