Shared prettier configuration

The purpose of the prettier is formatting many language formats (js, ts, tsx, md, json, yaml).

Contents

• Setup
• Automation
• Usage

Setup

• Add workspace reference to @clabnet/configs-prettier and its peer dependencies:

  pnpm add -w @clabnet/configs-prettier prettier

• Add prettier configuration file:

  // .prettierrc.js
  
  module.exports = require('@clabnet/configs-prettier')

• Add prettier ignore patterns file:

  # .prettierignore
  
  node_modules/
  pnpm-lock.yaml
  
  # Next ignore patterns
  .next/
  .build/
  .coverage/
  
  # Custom ignore patterns
  ...

• Add prettier scripts:

  // package.json
  
  "scripts": {
    ...
    "format": "prettier",
    "format:check": "pnpm format --check --debug-check",
    "format:fix": "pnpm format --write"
    ...
  }

Automation

• Setup ➡ prettier vscode plugin to integrate prettier with vscode environment.

Usage

• Automatic format file with prettier on save.

• Automatic format of staged files with prettier on commit.

• Manual usage from command line:

  pnpm format:check .
  pnpm format:fix .

⬅ Back