prettier-plugin-multiline-class

A Prettier plugin that formats long class and className attributes by expanding them to one class per line when they exceed the printWidth.

Features

• ✨ Multiline formatting: Automatically formats class attributes that exceed printWidth
• 🎯 Tailwind CSS sorting: Built-in Tailwind class sorting (no need for prettier-plugin-tailwindcss!)
• 🔧 Customizable: Control expansion and sorting behavior with options
• 📝 One class per line: Better readability and easier code reviews
• 🚀 Works with HTML and Vue files (JSX/TSX support planned)
• ⚡ Smart skipping: Preserves short class lists and skips dynamic bindings (:class, v-bind:class, etc.)

Installation

npm install --save-dev prettier-plugin-multiline-class

Usage

Add the plugin to your Prettier configuration:

// .prettierrc.js
module.exports = {
    plugins: ['prettier-plugin-multiline-class'],

    // Plugin options
    multilineClass: true,           // Enable plugin (default: true)
    multilineClassSort: true,       // Sort Tailwind classes (default: true)
    multilineClassAlways: false,    // Always expand (default: false)

    // Standard Prettier options
    printWidth: 100,
    tabWidth: 4
};

Options

multilineClass (boolean, default: true)

Enable or disable the plugin.

multilineClassSort (boolean, default: true)

Sort Tailwind CSS classes in recommended order. No need for prettier-plugin-tailwindcss!

{
  multilineClassSort: true   // Classes will be sorted
}

multilineClassAlways (boolean, default: false)

Always expand classes to multiline, regardless of printWidth.

{
  multilineClassAlways: true   // Even short classes will be expanded
}

Example

Before

<div
    class="absolute rounded-full border-2 border-[#0D69A7] bg-white shadow cursor-grab active:cursor-grabbing hover:bg-gray-50 focus:outline-none"
    :style="thumbAStyle"
></div>

After

<div
    class="
        absolute
        rounded-full
        border-2
        border-[#0D69A7]
        bg-white
        shadow
        cursor-grab
        active:cursor-grabbing
        hover:bg-gray-50
        focus:outline-none
    "
    :style="thumbAStyle"
></div>

Rules

• Expands only when the class attribute line exceeds printWidth
• Indentation: attribute indentation + tabWidth spaces
• Supports both class and className attributes
• Skips dynamic bindings (:class, v-bind:class, [class], className={...})
• Skips empty class values
• Skips single-class attributes (no need to expand)
• Works with .vue, .html, .jsx, and .tsx files

Testing

cd prettier-plugin-multiline-class
node test/test.js

License

MIT