Josh Amore Blog

VS Code Prettier Configuration (Node.js projects)

March 30, 2020

Prettier is awesome. It formats your code and cleans up any extra (or missing) spaces, tabs, etc.

I have to Google this every time I create a Node project and piece together 2 blog posts and the Prettier docs. Here’s my basic setup (enjoy, future Josh).

Extension Installation/Configuration Steps

1. Install and Enable the Prettier Extension

It’s the one by Esben Peterson with over 5 million installs (it should be first when you search for Prettier):

Install prettier

2. Tick Require Config

Go to VS Code settings (Command + ,) and search for Require Config. Tick the box:

require config switch

This will make sure Prettier only runs on projects with a Prettier config file (and not every file you open in VS Code).

3. Tick Format On Save

Go to VS Code settings (Command + ,) and search for Format On Save. Tick the box:

Format on save switch

This is the setting that triggers Prettier to format your code when you save the file.

Add Prettier to a Node.js Project

1. Install Prettier as a Dependency

Run the below command from the main project directory to install Prettier as a dev dependency:

npm i -D prettier

2. Create a Prettier Config File

Create a new file in the main directory called .prettierrc:

prettierrc example

This file will contain your Prettier config settings. Below is my current config preference:

    "useTabs": true

Save a file to see the wonders of Prettier.

Written by Josh Amore who lives and works in Melbourne, Australia. You should follow him on Twitter.