@refinist/prettier-config

Prettier config

Features

• 📏 2 spaces (default)
• 🔚 Semicolons
• 🔤 Single quotes
• ❌ No trailing commas
• 🏹 Avoid arrow parentheses
• 🌐 Ignore HTML whitespace sensitivity
• 🚫 Ignore common files (node_modules, dist, pnpm-lock.yaml...)，refer to #4708
• ⚡ Faster JS/TS parsing with Oxc
• 🎨 With Tailwind CSS plugin (optional)

Install

Using pnpm, yarn, or npm

# with pnpm
pnpm add -D @refinist/prettier-config

# with yarn
yarn add -D @refinist/prettier-config

# with npm
npm i -D @refinist/prettier-config

Usage

Basic

// package.json
{
  "prettier": "@refinist/prettier-config"
}

Or in prettier.config.js:

// prettier.config.js
import config from '@refinist/prettier-config';
/** @type {import('prettier').Config} */
export default {
  ...config

  /* your custom config */
};

With Tailwind CSS

If you're using Tailwind CSS, use the variant with the plugin:

// package.json
{
  "prettier": "@refinist/prettier-config/with-tailwindcss"
}

Or in prettier.config.js:

// prettier.config.js
import config from '@refinist/prettier-config/with-tailwindcss';
/** @type {import('prettier').Config & import('@refinist/prettier-config/plugin-tailwindcss').PluginOptions} */
export default {
  ...config

  /* your custom config */
};

For more details about the Tailwind CSS plugin options, see the prettier-plugin-tailwindcss documentation.

Generally, prettier works together with eslint. Check out @refinist/eslint-config for more configuration details.

Inspired by @sxzz

License

MIT

Copyright (c) 2025-present, Zhifeng (Jeff) Wang