Shared prettier configuration

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

The package currrntly exports as single default config with plugins for:

• .astro file support
• tailwindcss support

Opinionated settings include:

• single quotes true
• print width 72
• tab width 2
• semi-colon true
• trailingComma es5

Setup

Add workspace reference to @binz/config-prettier and its peer dependencies:

pnpm add -w @binz/config-prettier \
  prettier prettier-plugin-astro \
  prettier-plugin-tailwindcss

Add prettier configuration file:

// .prettierrc.js

module.exports = require('@binz/config-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

Integrate prettier with vscode for automatic formatting:

Install vs code prettier plugin by using Quick Open (Ctrl + P) and running the following command:

ext install esbenp.vscode-prettier

Configure vs code prettier plugin, by adding following settings:

// .vscode/settings.json

{
  ...
  "files.eol": "\n", // for consistent line ending across different systems.

  "prettier.requireConfig": true,
  ...
}

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 .