@jimmy.codes/prettier-config

💄 My personal prettier config

🐣 Features

• Supports tailwindcss through prettier-plugin-tailwindcss
• Supports astro through prettier-plugin-astro
• Sorts package.json properties through prettier-plugin-packagejson
• Ignores pnpm-lock.yaml
• Uses prettier's defaults except for quoteProps which is set as "consistent"
• TypeScript prettier config file support

[!WARNING]
TypeScript prettier config file is only supported in the VS Code Prettier extension w/ node version v22.18.0 — see discussion.
You can use a non-.ts extension (e.g. .cjs / .mjs / .js) to allow Prettier to pick up your config.

🛠️ Usage

First you need to install @jimmy.codes/prettier-config, for example with pnpm:

pnpm add -D @jimmy.codes/prettier-config

Then you can add the prettier key to your package.json, like so:

{
  "prettier": "@jimmy.codes/prettier-config"
}

Or you can create a custom Prettier prettier.config.ts file:

import type { Config } from "prettier";
import base from "@jimmy.codes/prettier-config";

const config = {
  ...base,
} satisfies Config;

export default config;

Tailwind CSS v4

Tailwind v4 requires telling the Prettier plugin where your Tailwind stylesheet is. Because this path is project-specific, create a local Prettier config that extends this preset:

// prettier.config.ts
import type { Config } from "prettier";

import base from "@jimmy.codes/prettier-config";

const config = {
  ...base,
  tailwindStylesheet: "./src/styles/global.css",
} satisfies Config;

export default config;