DEV Community

Cover image for Formatting Node.js codebase with Prettier
Željko Šević
Željko Šević

Posted on Originally published at sevic.dev on

Formatting Node.js codebase with Prettier

#javascript #node #typescript #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.

// eslint.config.js
// ...
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  // ...
  eslintConfigPrettier,
];
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.

Need help with your project?

Get personalized advice on your architecture, code, or career in a 45-minute 1-on-1 consultation.

→ Book a consultation

Top comments (0)