DEV Community

Željko Šević
Željko Šević

Posted on • Originally published at sevic.dev on

Formatting Node.js codebase with Prettier

Formatting helps to stay consistent with code style throughout the whole codebase. Include format script in pre-hooks (pre-commit or pre-push). This post covers Prettier setup with JavaScript and TypeScript code.

Start by installing the prettier package as a dev dependency.

npm i prettier -D
Enter fullscreen mode Exit fullscreen mode

Specify rules inside the .prettierrc config file.

{
  "singleQuote": true,
  "trailingComma": "all"
}
Enter fullscreen mode Exit fullscreen mode

Add format script in the package.json file.

{
  "scripts": {
    // ...
    "format": "prettier --write \"{src,test}/**/*.{js,ts}\""
  }
}
Enter fullscreen mode Exit fullscreen mode

Notes

If you use Eslint, install the eslint-config-prettier package as a dev dependency and update the Eslint configuration to use the Prettier config.

{
  // ...
  "extends": [
    // ...
    "prettier"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Using Visual Studio Code, you can install a prettier-vscode extension and activate formatting when file changes are saved.

Boilerplate

Here is the link to the boilerplate I use for the development.

Top comments (0)