Using Prettier with VS Code and Create React App
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:
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.