adding prettier to a project

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

   Alternatively, if you’d like to configure prettier, you can use their interactive playground to see how the rules affect your code. There’s a convenient Copy Config JSON button which can be used to copy/paste the config directly into the .prettierrc file.

Helpful scripts

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

{
    "scripts": {
        "prettier": "prettier \"src/**/*\"",
        "lint": "npm run prettier -- --check",
        "lint:fix": "npm run prettier -- --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.

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

Specifying File Types

Prettier also accepts file globs to understand which files to check. In the above example, I looked at all files.

Two common filters to apply to Prettier are directory specific and type specific.

For example - if the project has a build or dist directory that is generated through a build step like babel transpilation, we likely do not want to lint those files. Fortunately, these files are often already identified in the .gitignore though, you could also use a .prettierignore file.

Similarly, we may want to focus only on certain file types. In that case, we can use a file glob:

{
    "scripts": {
        "lint": "prettier --write --ignore-path .gitignore \"**/*.+(js|json)\""
    },
}

Preferred Setup In VS Code

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

Make sure the following two lines are present:

"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.¹

Footnotes

• ¹ Prettier