adding prettier to a project

2020-04-01

 | 

~2 min read

 | 

358 words

The steps to adding Prettier to a project are very simple:

  1. Install Prettier (npm i --save-dev prettier)
  2. Create a .prettierrc file in the root directory
  3. Add an empty object {} to the .prettierrc file -> this imports the default prettier configurations

Helpful scripts

Within the package.json, I tend to add the following scripts:

package.json
{
    "scripts": {
        "lint": "prettier --check src/**/*",
        "lint:fix": "yarn lint --write"
    },
}

The latter can be used if the editor is not configured to format on save. When run, Prettier will look at every file in the src directory and every one of the src directory’s subdirectories and run prettier on all files. This can be made more precise with a more nuanced pattern match.

The --write makes sure that Prettier actually modifies the files, instead of simply writing the formatted version to the shell.

Integrating the lint script with a CI tool like Travis / CircleCI can be useful to alert if code is trying to be committed that doesn’t match the formatting style.

(Another way to manage this, however, would be to not allow unformatted code to be committed in the first place using a git hooks)

Preferred Setup In VSCode

In VSCode open up settings.json - the JSON file that stores all of your custom settings for VSCode

Make sure the following two lines are present:

/Library/Application/Support/Code/User/settings.json"
"prettier.requireConfig": true,
"editor.formatOnSave": true,

The former simply requires that there is a .prettierrc file in the application’s root directory. This is particularly useful in making sure that you don’t accidentally modify a project that doesn’t have a Prettier configuration set up and change every line in every file.

The latter is a preference of mine to apply prettier on save - rather than waiting for a git commit or to run the format script (or with git hooks).

Alternative Formats

While I prefer to use just a .prettierrc file which can be written in YAML or JSON, it’s also possible to use .toml or .js.

The Prettier site has a helpful page for how to set these other formats up.1

Footnotes


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!