Configure Prettier in your Node JS project

Reading Time: 2 minutes

Prettier is a great tool for making your Node.js code look clean and consistent. It is an easy way to eliminate some of the frustrations associated with coding, such as redundant and messy code formatting. With a few simple steps, you can set up Prettier and get your code looking beautiful.


Prettier is a code formatter that supports many languages and can be integrated with most of the editors.

Also, you can integrate it with your CI/CD.

That way nobody will be able to merge to the master branch if the code is not well-formatted.

With Prettier you will be able to define your own rules, however default rules are enough at the beginning.

Your rules will be defined in a file called .prettierrc placed in your project’s root.

Let’s see how to install Prettier and then make some configurations.

npm install prettier --save-dev

Example of Prettier config file

  "trailingComma": "es5",
  "tabWidth": 4,
  "printWidth": 120,
  "semi": true,
  "singleQuote": false,
  "useTabs": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "endOfLine": "lf"

See more options for the .prettierrc file

Gulp integration

npm install gulp-prettier -save-dev
gulp.task("prettier", () => {
  return gulp

PhpStorm IDE integration

If you are using PHP Storm, it’s highly recommended that you configure your IDE to auto-format your code every time you save a .js file
The plugin will take the rules from you .prettierrc file

Configure a File Watcher in PhpStorm to auto-format the code on save.

Visual Studio Code

You can install the extension as any other and then you can use these configurations in you settings.js with the prefix “prettier”

  "prettier.useTabs": false,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 4,
  "prettier.printWidth": 120,
  "prettier.semi": true,
  "prettier.singleQuote": false,
  "prettier.quoteProps": "as-needed",
  "prettier.jsxSingleQuote": false,
  "prettier.bracketSpacing": false,
  "prettier.jsxBracketSameLine": true,
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.endOfLine": "lf"

About the author

Andrés Canavesi
Andrés Canavesi

Software Engineer with 15+ experience in software development, specialized in Salesforce, Java and Node.js.

Related posts

Leave a Reply

%d bloggers like this: