DEV Community

Željko Šević
Željko Šević

Posted on • Originally published at sevic.dev on

3

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.

// 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.

Course

Build your SaaS in 2 weeks - Start Now

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more