Skip to content

README.md

Latest commit

 

History

History
130 lines (97 loc) · 2.92 KB

README.md

File metadata and controls

130 lines (97 loc) · 2.92 KB

prettier-plugin-jsx-attr-sort

A Prettier plugin that automatically sorts JSX attributes for improved code consistency and readability.

Features

  • ✅ Sorts JSX attributes alphabetically
  • ✅ Keeps special attributes (key, ref) at the beginning
  • ✅ Preserves spread attributes in their original position
  • ✅ Works with TypeScript and JavaScript
  • ✅ Seamlessly integrates with your existing Prettier configuration

Installation

npm install --save-dev prettier-plugin-jsx-attr-sort

or with yarn:

yarn add --dev prettier-plugin-jsx-attr-sort

or with pnpm:

pnpm add --save-dev prettier-plugin-jsx-attr-sort

Usage

Once installed, the plugin will automatically be used by Prettier when formatting JSX/TSX files. No additional configuration is required.

Before

<Button
  onClick={handleClick}
  disabled={isDisabled}
  className="btn-primary"
  type="button"
  ref={buttonRef}
  key="submit-btn"
  aria-label="Submit form"
  data-testid="submit-button"
>
  Submit
</Button>

After

<Button
  key="submit-btn"
  ref={buttonRef}
  aria-label="Submit form"
  className="btn-primary"
  data-testid="submit-button"
  disabled={isDisabled}
  type="button"
  onClick={handleClick}
>
  Submit
</Button>

Configuration

This plugin works with your existing Prettier configuration. You can add it to your .prettierrc file:

{
  "plugins": ["prettier-plugin-jsx-attr-sort"]
}

How it works

The plugin follows these sorting rules:

  1. Special attributes first: key and ref attributes are always placed at the beginning
  2. Alphabetical sorting: All other attributes are sorted alphabetically
  3. Spread preservation: Spread attributes ({...props}) remain in their original position and don't interfere with sorting of regular attributes

Example with spread attributes

// Before
<Component
  onClick={handleClick}
  {...commonProps}
  className="example"
  disabled={true}
  {...moreProps}
  aria-label="Example"
  key="example"
/>

// After
<Component
  key="example"
  onClick={handleClick}
  {...commonProps}
  aria-label="Example"
  className="example"
  disabled={true}
  {...moreProps}
/>

Requirements

  • Node.js >= 18.0.0
  • Prettier >= 3.0.0

Tailwind CSS Compatibility

I've opened a Pull Request to add support for plugin composition, which would allow you to use both prettier-plugin-jsx-attr-sort and prettier-plugin-tailwindcss together seamlessly.

👍 Please upvote and support the PR: prettier-plugin-tailwindcss#383

Contributing

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

Note: This plugin modifies the AST during the preprocessing step to ensure attributes are sorted before Prettier formats the code. This approach ensures consistent formatting while maintaining compatibility with Prettier's formatting rules.
⚡