How to Install Prettier in Your Codebase and VSCode

Prettier

Prettier is an opinionated code formatter with support for multiple languages.

Since I started using Prettier, I don't want to work code without it anymore. Despite having some concerns in the beginning (the forced line width for example), I fell in love with default settings.

Install and Configure Prettier

Installing Prettier is easy, here are the steps in a nutshell. You can also follow the official installation guide.

First you need to install the exact version of prettier locally. This ensures that everyone will use the exact same version for formating code in the project.

npm install --save-dev --save-exact prettier

Next you need to create the Prettier configuration file .prettierrc and .prettierignore (optional) in the root of your project.

You can run this command to create the default configuration file with an empty object:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

The .prettierignore file works in the same way as a .gitignore file. In fact, Prettier already follows the rules set out in your .gitignore, so you might not even need one:

📖 By default prettier ignores files in version control systems directories (".git", ".sl", ".svn" and ".hg") and node_modules (unless the --with-node-modules CLI option is specified). Prettier will also follow rules specified in the ".gitignore" file if it exists in the same directory from which it is run.

Here is an example .prettierignore to skip all HTML files:

# Ignore all HTML files:
**/*.html

Format all existing code

Before continuing with formating the whole codebase, commit your changes. I also recommend merging all open pull requests, as a lot of files will be affected.

Now run this command in the root folder of your project to format all files:

npx prettier . --write

ℹ️ using npx here ensures that the locally installed version of Prettier is executed. This is important if you also have prettier installed globally.

Now all your project files should be nicely formated. 🧹✨

Install the Prettier VSCode Extension

Next you can setup a Prettier plugin for your IDE. I use Visual Studio Code, but there are also plugins for many other editors.

For VSCode, install this extension: esbenp.prettier-vscode

Having done that you can navigate to the VSCode settings and search for "formatter". Here you could set Default Formatter to esbenp.prettier-vscode.

However, if, like me, you work on many different projects and not all of them have Prettier, you will probably leave it at the default setting (None).

Instead you can set the default formatter in the local VSCode settings file (.vscode/settings.json) of the projects you use prettier.

To be sure any language specific global VSCode settings are overriden by the local config, you might need to specify defaultFormatter for each language individually.

Here is an example .vscode/settings.json for reference:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}