@element-public/prettier-config

element-prettier

A mostly reasonable shared prettier configuration for Element

npm i --save-dev @element/prettier-config

Choose your own adventure with prettier

Adoption of this common config for prettier can be achieved two ways:

• use element-prettier by adding module reference to prettier in package.json
• extend element-prettier by importing into local .prettierrc.js
• copy boilerplate configuration into a local prettier config file

Learn more about shared prettier configurations on the prettier website.

Use element-prettier config

Sharing a Prettier configuration is simple: just publish a module that exports a configuration object, say @element/prettier-config, and reference it in your package.json:

{
    "name": "my-cool-library",
    "version": "9000.0.1",
    "prettier": "@element/prettier-config/.prettierrc.json"
}

Note: This method does not offer a way to extend the configuration to overwrite some properties from the shared configuration.

Extend element-prettier config

If you need to [extend the configuration], import the file in a .prettierrc.js file and export the modifications, e.g:

module.exports = {
    ...require('@element/prettier-config'),
    semi: false
};

Note: see an example of extending prettier config in this very repo!

Helpful package.json scripts

A prettier "check" can be a handy quality-assurance step added to tests. Likewise a prettier "write" can become part of an automated lint fix process.

  "scripts": {
    "prettier:check": "prettier --check '**/*'",
    "prettier:write": "prettier --write '**/*'",
    "lint": "npm run prettier:write",
    "test": "npm run prettier:check"
  }

Ignoring Files

To have prettier ignore files include a .prettierignore file in the root of the repo and use ignore file syntax like with .gitignore. An example file is included with the @element/prettier-config bundle hosted on npm and can be copied as a good starting place.

Note: there is currently no good way to extend "ignore file" patterns with prettier or the ignore file pattern type syntax.

About prettier

Prettier is an opinionated code formatter.

Why use prettier?

It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.

What value does prettier provide?

What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With Prettier editor integration, you can just press that magic key binding and poof, the code is formatted.

Prettier is great at handling "formatting rules". It is incapable of catching or correcting "code-quality rules", which is why prettier is used along side various code linters for total code-style enforcement.

The Prettier website has information on editor integration as well as directions for how to use the prettier CLI.