@binz/config-prettier v1.0.0

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 .