How to Configure Prettier to Automate Code Formatting

Code formatting is not a new concept, but based on my experience with professional software development, it's a problem that many companies and projects still struggle with. Prettier is a tool that attempts to simplify and automate the process of keeping code formatting consistent within a project.

What is Code Formatting?

Code formatting, also known as code styling, style formatting, programming style, is what I like to consider the grammar of software development. Quality grammar can make a written body of work more appealing to read, and easier to digest, and code formatting can do the same for a project's source code. Well placed tabs, brackets, and newlines can make it much easier for a developer to read and understand code. Perhaps more importantly, consistent formatting across a collaborative codebase can make the development experience less frustrating as the developer knows what to expect of their own contributions.

Why Prettier?

Prettier describes itself as an opinionated code formatter. In this case, "opinionated" means that Prettier has a prescribed way of formatting code, with only a handful of options that you can configure. I have used code formatting tools that have well over 100 options, while Prettier only has about 16. I have also been on teams in the past that attempted to adopt code formatting guidelines, but the endless debates over which options were better prevented us from ever making a final decision.

Prettier Playground

The Prettier team offers a useful tool on their website called Prettier Playground. This allows you to experiment with JavaScript and see how Prettier would format the code in real-time, and if you find a set of options that you prefer, then you can copy the proper config to your clipboard.

Configuration File

To customize the Prettier configuration, you can add a .prettierrc to the root of your project. You can add single configurations to this file, such as { "singleQuote": true }, or you can paste the configuration from Prettier Playground. If you don't provide a config file, then Prettier will use the default Prettier options.

VSCode Extension

The easiest way to get started using Prettier is to install the Prettier VSCode extension by Esben Petersen. To manually format a single file, simply use the Format Document shortcut (on macOS the default is shift+option+f). If you would like to automatically format a document when you save then you can open the VSCode settings and enable the Format On Save option. You can also enable the VSCode setting Prettier: Require Config to avoid formatting files in projects that do not use Prettier.

Pre-commit Hook

The VSCode extension is a convenient way to experiment with Prettier, but it can be difficult to enforce on teams. You can automate code formatting using a couple of dependencies and a modification to your package.json.

npm install --save-dev prettier husky pretty-quick

or

yarn add --dev prettier husky pretty-quick

• prettier is the main CLI that will be formatting the code
• husky enables hooks into several different steps of the Git commit lifecyle
• pretty-quick runs Prettier on staged or changed files

Once these dependencies are installed, add this to your package.json.

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged --pattern 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md,html}'"
  }
}

This will automatically run Prettier against your staged files that are within the src/ folder that match one of the extensions js, jsx, ts, tsx, json, css, scss, md, or html. I think that this is a well-rounded solution for most projects, but if you would like to change the files that get formatted, you can adjust the --pattern parameter by following the minipatch pattern.

Resources

Prettier: https://prettier.io

Playground: https://prettier.io/playground/

CLI: https://prettier.io/docs/en/cli.html

Configuration: https://prettier.io/docs/en/configuration.html

Ignoring files: https://prettier.io/docs/en/ignore.html

Pre-commit hooks: https://prettier.io/docs/en/precommit.html