Prettier Plugin OCD :)

A Prettier plugin that automatically formats JSX attributes in ascending length order (creating a left triangle pattern), making React components more visually organized and consistent.

Features

• Automatically sorts JSX attributes by length (shortest to longest)
• Creates a visually appealing left triangle pattern
• Preserves non-JSX content
• Handles multiple JSX elements in the same file
• Full TypeScript support
• Maintains Prettier's high standards for code formatting

Installation

Using npm:

npm install --save-dev prettier-plugin-ocd

Using yarn:

yarn add -D prettier-plugin-ocd

Usage

The plugin will be automatically picked up by Prettier. No additional configuration is needed.

Before:

const Button = () => (
  <button
    className="primary-button"
    onClick={handleClick}
    id="submit"
    disabled={isLoading}
  >
    Submit
  </button>
);

After:

const Button = () => (
  <button
    id="submit"
    onClick={handleClick}
    disabled={isLoading}
    className="primary-button"
  >
    Submit
  </button>
);

Configuration

This plugin works out of the box with Prettier's default configuration. No additional settings are required.

How It Works

The plugin uses a sophisticated attribute processing system that:

1. Parses the JSX using Babel
2. Identifies all JSX attributes
3. Calculates the length of each attribute
4. Sorts them in ascending order
5. Generates the formatted code while preserving all other formatting

License

MIT

Credits

Created by Nikos Rentas

FAQ

Q: Will this affect my code's functionality?

A: No, the plugin only changes the order of JSX attributes, which doesn't affect functionality.

Q: Does it work with all JSX/TSX files?

A: Yes, the plugin supports both JSX and TSX files.

Q: What happens if there's an error?

A: The plugin gracefully handles errors by returning the original code unchanged.

Requirements

• Node.js >= 14
• Prettier >= 2.0.0

Known Issues

None at the moment. If you find any issues, please report them in the GitHub issue tracker.