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

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.