Using Prettier with VS Code and Create React App

All code should be this pretty

Having consistent code formatting and style is an important part of reducing cognitive load when working with others or when jumping around between projects. A frequent scenario seems to be that a developer meeting is held to come up with a company coding standard. It starts off with good intentions and good progress is initially made, but then a roadblock is encountered trying to come to an agreement on a private field prefix or to use spaces instead of tabs. The meeting ends up being a wash, people are frustrated and “Frank” ends up getting a special pass to prefix his private fields with my_ and use tabs while everyone else uses _ and spaces.

Thankfully human beings are incredibly adaptive and will quickly “get used” to using a new style of tool if they don’t have a choice. For example I used to think that JSX was an abomination, but I quickly came to realise that it is actually a thing of beauty. This is where Prettier comes in.

Prettier is an “opinionated code formatter” which has some very sensible defaults and can be used to ensure that all committed code looks the same. By using an automated and opinionated tool everyone’s personal opinion is taken out of the equation and developers can just get on with developing and no longer have to waste time formatting their code.

Getting setup in Visual Studio Code

This tutorial assumes that you are using Create React App, Yarn and Visual Studio Code. The instructions shouldn’t be too different if you are using NPM or another React/JavaScript environment.

Please note that Create React App will not show any Prettier errors in the browser console or terminal output. The errors will only be shown in Visual Studio Code.

Step 1: Install Prettier and the ESLint Plugin

Note: You will need to install ESLint if you are not using Create React App

You will need to install the Prettier package and then the ESLint Prettier plugin. The plugin allows Prettier violations to be reported as ESLint errors.

yarn add --dev --exact prettier
yarn add --dev eslint-plugin-prettier

Step 2: Install the Prettier and ESLint VS Code Extensions

Install the following Visual Studio Code Extensions:

1. ESLint
2. Prettier

Step 3: Create the Prettier and ESLint Configuration files

Create an .eslintrc file with the following contents:

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

If you are not happy with the default Prettier configuration then you can create a .prettierrc file with your own options, for example:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Step 4: Apply Prettier Formatting on Save (Optional)

You most likely want to apply the Prettier formatting whenever you save your files. To do so, add the following to your Visual Studio Code Workspace Settings:

"editor.formatOnSave": true

Step 5: Prevent Prettier Violations from being Committed (Optional)

To prevent unformatted code from being committed to Git you can add a pre-commit hook. There are a few ways to do this, I will show the steps using pretty-quick and husky setup (option 2). I have gone with this option as pretty-quick respects the .prettierrc file.

Note: Your Git repository must already be initialised, otherwise the precommit hooks will not be installed by husky.

Install the packages:

yarn add --dev pretty-quick husky

Then add the husky section to your package.json file:

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
 }

Conclusion

Automated code formatting against sane settings saves a lot of grief and time. It works well and is very easy to setup, so it should be considered a must in any project. Prettier isn’t the first or only tool for the job, so if it is not suitable for you, then there is bound to be another one to suit your environment or team.