@kjanat/prettier-config

@kjanat/prettier-config

Shareable Prettier configuration with plugin support.

Features

• 🎯 Consistent formatting across projects
• 🚀 Bun and Node.js 18+ support
• 🎨 Tailwind CSS class sorting
• 📦 Optional plugins for XML, SVG, package.json, shell scripts, and more
• 🔧 Full TypeScript definitions

Installation

Basic

# Bun
bun add -d @kjanat/prettier-config prettier
bun pm pkg set prettier="@kjanat/prettier-config"

Other package managers

# npm
npm install --save-dev @kjanat/prettier-config prettier
npm pkg set prettier="@kjanat/prettier-config"

# pnpm
pnpm add --save-dev @kjanat/prettier-config prettier​
pnpm config set --location=prettier "@kjanat/prettier-config"​

# yarn
yarn add @kjanat/prettier-config prettier --dev
yarn config set prettier "@kjanat/prettier-config"​

Usage

Basic

Add to package.json:

{ "prettier": "@kjanat/prettier-config" }

Or create .prettierrc:

"@kjanat/prettier-config"

Extending

Create prettier.config.mjs:

import prettierConfig from "@kjanat/prettier-config";

/** @satisfies {Config} */
export default { ...prettierConfig, semi: false, printWidth: 100 };

Or with TypeScript (prettier.config.ts):

import type { Config } from "prettier";
import prettierConfig from "@kjanat/prettier-config";

export default { ...prettierConfig, semi: false } satisfies Config;

Configuration

Supported Plugins

• @prettier/plugin-xml: XML and SVG formatting
• prettier-plugin-go-template: Go templates
• prettier-plugin-nginx: Nginx configs
• prettier-plugin-pkg: Sorts package.json
• prettier-plugin-prisma: Prisma schemas
• prettier-plugin-sh: Shell scripts
• prettier-plugin-tailwindcss: Sorts Tailwind classes
• prettier-plugin-toml: TOML files

Key Settings

• CSS, HTML, XML use tabs
• SVG uses HTML parser for better whitespace handling
• Markdown wraps at printWidth
• XML:
  • Sort attributes by key
  • Single attribute per line

{
  objectWrap: "preserve",
  experimentalTernaries: true,
  overrides: [
    // CSS, HTML, XML use tabs
    { files: ["*.css"], options: { useTabs: true } },
    { files: ["*.html"], options: { useTabs: true } },

    // SVG uses HTML parser for better whitespace handling
    {
      files: ["*.svg"],
      options: {
        parser: "html",
        useTabs: true,
        htmlWhitespaceSensitivity:"ignore",
      }
    },

    // Markdown wraps at printWidth
    { files: ["*.md"], options: { proseWrap: "always" } },

    // XML formatting
    {
      files: ["*.xml"],
      options: {
        parser: "xml",
        useTabs: true,
        singleAttributePerLine: true,
        xmlSortAttributesByKey: true
      }
    }
  ]
}

Notable:

• SVG files: Use HTML parser instead of XML for better inline SVG handling
• Markdown: Prose wraps at printWidth (override with proseWrap: "preserve" if needed)

Tailwind CSS

Configure custom utility functions:

import type { PluginOptions } from "prettier-plugin-tailwindcss";
import prettierConfig from "@kjanat/prettier-config";

/**
 * @satisfies {PluginOptions}
 * @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss
 */
const tailwindOptions = {
  tailwindFunctions: ["cn", "clsx", "tw"],
};

/** @satisfies {Config} */
export default {
  ...prettierConfig,
  ...tailwindOptions
};

Compatibility

Environment	Version	Support
Bun	≥1.0.0	✅
Node.js	≥18.0.0	✅

Module System: ESM only

Scripts

bun run build  # Build package
bun typecheck  # Type checking
bun run format # Format code

Troubleshooting

Plugin Not Working

Plugins are peer dependencies. Install required plugins:

bun add -d @prettier/plugin-xml prettier-plugin-tailwindcss

Module Resolution

This package is ESM-only (no CommonJS build).

• ESM: Add "type": "module" to package.json
• CommonJS projects: require() won't work; use a dynamic import() in your config, e.g. module.exports = import("@kjanat/prettier-config").then((m) => ({ ...m.default }))
• TypeScript: Set moduleResolution to "bundler" or "node16"

Contributing

Contributions welcome! Submit a PR:

• Fork repository
• Create feature branch
• Commit changes
• Push and open PR

License

MIT © kjanat