Sharing Prettier configuration files

I'm working on several projects where I use Prettier. For those who don't know what Prettier is, it is an opinionated code formatter with support for. Prettier has language support for JavaScript (including ES2017), JSX, Angular, Vue, Flow, TypeScript, CSS (including Less and SCSS), HTML, JSON, GraphQL, Markdown (including GFM and MDX) and YAML.

Prettier only has few options to configure, such as tabs or spaces, print width or quote styles. A complete list of options is available in the Prettier documentation.

As I started to create more projects, I looked for a method to share Prettier configuration files. Fortunately, this feature is already supported by Prettier.

You just need to publish a module which exports your customized Prettier configuration.

Create a new directory and create two files: package.json and index.json. The package.json is your module's manifest, it contains metadata, dependencies, and scripts. It is mandatory if you want to publish your module to NPM. Your Prettier configuration goes into the index.json.

This is the content of my files:

index.json:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100
}

package.json:

{
  "name": "@your-name-here/prettier-config",
  "version": "1.0.1",
  "description": "Prettier Config",
  "main": "index.json",
  "license": "MIT",
  "keywords": [
    "prettier",
    "prettier-config"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name-here/prettier-config"
  },
  "homepage": "https://github.com/your-name-here/prettier-config"
}

You can now run npm publish in your module's directory to make your Prettier configuration available to everyone.

If you want to use your shared Prettier configuration in other projects, you need to reference it in your project's package.json manifest by adding the prettier property:

{
  "name": "my-cool-library",
  // ...
  "prettier": "@your-name-here/prettier-config"
  // ...
}

Additionally, you should delete all other Prettier configurations to avoid that your shared configuration file is overridden.

If you like my content, you might want to follow me on Twitter?! @fullstack_to