Prettier

Prerequisites:

pnpm i -D @kurocado-studio/styleguide

Install Prettier

pnpm i -D prettier

Configure Prettier

Create a prettier.config.mjs (or .prettierrc.mjs) at the repository root:

export { prettierConfig as default } from '@kurocado-studio/styleguide';

Options

The preset is exported as prettierConfig and is meant to be used as-is, then overridden selectively.

Option	Default	Why it exists
`printWidth`	`80`	Keep diffs readable by default.
`singleQuote`	`true`	Consistent JS/TS quoting.
`jsxSingleQuote`	`true`	Consistent JSX quoting.
`semi`	`true`	Avoid ASI edge cases in mixed toolchains.
`trailingComma`	`"all"`	Cleaner diffs when adding/removing lines.
`endOfLine`	`"lf"`	Stable output across OSes/CI.
`tabWidth`	`2`	Matches our JS/TS conventions.
`importOrder`	array	Enforce stable import grouping + sorting.
`plugins`	array	Import sorting, `package.json` ordering, Tailwind ordering.
`overrides`	array	Per-file parser + Markdown `printWidth: 100`.

Add scripts

{
  "scripts": {
    "format:check": "prettier --check . --ignore-path .prettierignore",
    "format:fix": "prettier --write . --ignore-path .prettierignore"
  }
}

Troubleshooting

Import sorting doesn’t work: ensure you have the peer dependency @trivago/prettier-plugin-sort-imports installed (same for prettier-plugin-packagejson and prettier-plugin-tailwindcss).
Markdown wraps differently than code: Markdown files use an override with printWidth: 100 and proseWrap: "always".

Last modified: 18 December 2025