Package Exports

prettier-plugin-ocd
prettier-plugin-ocd/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prettier-plugin-ocd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Parses the JSX using Babel
Identifies all JSX attributes
Calculates the length of each attribute
Sorts them in ascending order
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.