Configure Prettier in your Node JS project

In short, Prettier is a code formatter that supports many languages and can be integrated with most of editors. Also you can integrated with you automated process such as CI; that way, nobody will be able to merge in you 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 that you will place in you project’s root.

Let’s install it 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

Optionally you might integrate it with Gulp

npm install gulp-prettier -save-dev
gulp.task("prettier", () => {
    return gulp
        .src("./**/*.js")
        .pipe(prettier(".prettierrc"))
        .pipe(gulp.dest("./"));
});

PHP Storm 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. https://prettier.io/docs/en/webstorm.html. The plugin will take the rules from you .prettierrc file

Configure a File Watcher in PHP Storm 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"
}

Photo by Shahadat Shemul on Unsplash

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s