DEV Community

loading...

Sharing Prettier configuration files

matthias profile image Matthias 🤖 Updated on ・2 min read

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
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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"
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

pic
Editor guide
Collapse
thematchless profile image
Matthias Meyer

We had Prettier in some of our projects for a long time. Recently we asked ourselfs the same question. Is there a possebillity to share the configuration file. We looked into the documentation and did the same what you ment above and it works like charm.

This small but nifty tool is even better if you trigger the reformat when you save your file or just before you commit to your repo.

Collapse
rolandisimo profile image
Rolands Jegorovs

How do you share prettierignore?