@kjanat/prettier-config

@kjanat/prettier-config

A comprehensive, shareable Prettier configuration with built-in support for XML, Tailwind CSS, and package.json formatting. Works seamlessly with Bun, Node.js, CommonJS, ES Modules, and TypeScript projects.

Features

• 🎯 Universal Compatibility: Works with ESM, CommonJS, and TypeScript
• 🚀 Runtime Support: Optimized for Bun, Node.js 18+, and modern bundlers
• 🎨 Tailwind CSS: Built-in support with custom function names
• 📦 Package.json: Automatic formatting and sorting
• 📄 XML/SVG: Comprehensive XML and SVG formatting
• 🔧 TypeScript: Full type definitions included
• 📊 Multiple Output Formats: ESM (.mjs), CommonJS (.cjs), and dual-mode
• 🗺️ Source Maps: Included for debugging

Installation

Using Bun (Recommended)

bun add -D @kjanat/prettier-config prettier

Using npm

npm install --save-dev @kjanat/prettier-config prettier

Using yarn

yarn add --dev @kjanat/prettier-config prettier

Using pnpm

pnpm add -D @kjanat/prettier-config prettier

Usage

Basic Usage

Add to your package.json:

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

Or create a .prettierrc file:

"@kjanat/prettier-config"

Extending the Configuration

ES Modules (.prettierrc.mjs or prettier.config.mjs)

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

/**
 * @type {import("prettier").Config}
 */
const config = {
  ...prettierConfig,
  // Your overrides here
  semi: false,
  printWidth: 100,
};

export default config;

CommonJS (.prettierrc.cjs or prettier.config.cjs)

const prettierConfig = require("@kjanat/prettier-config");

/**
 * @type {import("prettier").Config}
 */
module.exports = {
  ...prettierConfig,
  // Your overrides here
  semi: false,
  printWidth: 100,
};

TypeScript (.prettierrc.ts or prettier.config.ts)

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

const config: Config = {
  ...prettierConfig,
  // Your overrides here with full type safety
  semi: false,
  printWidth: 100,
} satisfies Config;

export default config;

JSON with Comments (.prettierrc.json or .prettierrc)

{
  // Extend the base configuration
  "prettier": "@kjanat/prettier-config",
  // Add your overrides
  "semi": false,
  "printWidth": 100,
}

Configuration Details

Included Plugins

This configuration includes the following Prettier plugins:

• @prettier/plugin-xml: XML and SVG formatting
• prettier-plugin-packagejson: Sorts and formats package.json files
• prettier-plugin-tailwindcss: Sorts Tailwind CSS classes

Default Settings

{
  // Tailwind CSS functions
  tailwindFunctions: ["cn", "clsx", "tw"],

  // Object formatting
  objectWrap: "collapse",

  // Experimental features
  experimentalTernaries: true,

  // File-specific overrides
  overrides: [
    // CSS files use tabs
    { files: ["*.css"], options: { useTabs: true } },

    // JSON with comments
    { files: ["*.jsonc"], options: { parser: "json", trailingComma: "none", useTabs: true } },

    // YAML files
    { files: ["*.yaml", "*.yml"], options: { singleQuote: false } },

    // XML and SVG files
    {
      files: ["*.xml", "*.svg"],
      options: {
        parser: "xml",
        useTabs: true,
        bracketSameLine: false,
        singleAttributePerLine: true,
        xmlSortAttributesByKey: true
      }
    },

    // HTML files
    { files: ["*.html"], options: { useTabs: true, xmlWhitespaceSensitivity: "ignore" } }
  ]
}

Tailwind CSS Configuration

The configuration includes support for common Tailwind CSS utility functions:

• cn() - Common className utility
• clsx() - Conditional classes
• tw() - Tagged template literals

To add more functions, extend the configuration:

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

export default {
  ...prettierConfig,
  tailwindFunctions: [...prettierConfig.tailwindFunctions, "myCustomFunction"],
};

Module Support

ES Modules (Recommended for modern projects)

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

// Dynamic import
const prettierConfig = await import("@kjanat/prettier-config");

CommonJS (Legacy Node.js projects)

// CommonJS require
const prettierConfig = require("@kjanat/prettier-config");

TypeScript

// Full type safety with TypeScript
import type { Config } from "prettier";
import prettierConfig from "@kjanat/prettier-config";

// Config is fully typed
const myConfig: Config = prettierConfig;

Bundler Support

Works out of the box with:

• ✅ Vite
• ✅ Webpack
• ✅ Rollup
• ✅ esbuild
• ✅ Parcel
• ✅ Turbopack
• ✅ Bun bundler

Compatibility Matrix

Environment	Version	Support
Bun	≥1.0.0	✅ Full
Node.js	≥18.0.0	✅ Full
Node.js	16.x	⚠️ Works but not tested
Deno	Latest	✅ Via npm: specifier
Browser	Modern	✅ Via bundler

Module System	File Extension	Support
ES Modules	.mjs, .js	✅ Full
CommonJS	.cjs, .js	✅ Full
TypeScript	.ts, .mts, .cts	✅ Full with types

Scripts

# Build the package
bun run build

# Run type checking
bun run lint

# Format code
bun run format

# Check formatting
bun run format:check

# Clean build artifacts
bun run clean

# Run tests
bun test

# Check package exports
bun run test:exports

# Full build with validation
bun run build:check

Migration Guide

From Custom Configuration

• Install the package:

  bun add -D @kjanat/prettier-config
  

• Replace your .prettierrc content:

  - {
  -   "semi": true,
  -   "singleQuote": false,
  -   // ... other options
  - }
  + "@kjanat/prettier-config"
  

• If you need to keep some custom settings, extend instead:

  // .prettierrc.mjs
  import prettierConfig from "@kjanat/prettier-config";
  
  export default {
    ...prettierConfig,
    // Keep your custom settings
    semi: false,
  };
  

From prettier-config-* packages

Most shareable configs follow the same pattern. Simply:

• Uninstall the old config
• Install this one
• Update the reference in your configuration

Troubleshooting

Module Resolution Issues

If you encounter module resolution issues:

• ESM Projects: Ensure your package.json has "type": "module"
• CommonJS Projects: Use the .cjs extension for your config file
• TypeScript: Make sure moduleResolution is set to "bundler" or "node16" in tsconfig.json

Plugin Not Working

Ensure all peer dependencies are installed:

bun add -D prettier @prettier/plugin-xml prettier-plugin-packagejson prettier-plugin-tailwindcss

Type Definitions Not Found

For TypeScript projects, ensure you have:

bun add -D @types/node typescript

Development

Building from Source

# Clone the repository
git clone https://github.com/kjanat/prettier-config.git
cd prettier-config

# Install dependencies
bun install

# Build the package
bun run build

# Run tests
bun test

Project Structure

prettier-config/
├── src/              # Source files
│   └── index.ts      # Main configuration
├── dist/             # Built output (git-ignored)
│   ├── index.js      # Default ESM export
│   ├── index.mjs     # Explicit ESM
│   ├── index.cjs     # Explicit CommonJS
│   ├── index.d.ts    # TypeScript definitions
│   ├── index.d.mts   # ESM TypeScript definitions
│   └── index.d.cts   # CommonJS TypeScript definitions
├── scripts/          # Build scripts
├── build.ts          # Build configuration
├── package.json      # Package manifest
└── tsconfig.json     # TypeScript config

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

MIT © kjanat

Made with ❤️ using Bun