prettier-plugin-sort-class-names v3.0.1
prettier-plugin-sort-class-names
Per default it will sort your class names alphabetically.
install
Prettier should already be set up for your project (check prettier docs). After that it is enough to install prettier-plugin-sort-class-names in the same project, it will be applied automatically.
npm i prettier-plugin-sort-class-names --save-dev
# or with yarn
yarn add prettier-plugin-sort-class-names --devIf you are using yarn 2 (aka Plug'n'Play/PnP, aka "berry"), check the troubleshooting section at the bottom
prettier-plugin-sort-class-names-order
You can create a file prettier-plugin-sort-class-names-order where every line represents a class name. The higher up a class is in the list, the further forward it is sorted. Example:
flex
block
align-items-centerWith this sorting-file, a node like
<div class="custom-class md:flex align-items-center block"></div>will become
<div class="custom-class / block align-items-center md:flex"></div>existing order-lists
custom prettier options
you can add this options to your prettier config file:
| option | description | default |
|---|---|---|
| sortClassNamesOrderFile | Path to your custom prettier-plugin-sort-class-names-order file, if you not define anything, it will sort the class names alphabetically. | "prettier-plugin-sort-class-names-order" |
| sortClassNamesPrefixes | comma seperated list of your prefixes. Prefixes will be grouped together wenn sorting. | "sm:,md:,lg:,xl:" |
| sortClassNamesUnknownClassesSeparator | When your class list contains known (in your order-file) and unknown class names, it will be separated by this char. You can disable this by providing an empty string as option ("") | "/" |
| sortClassNamesClassAttributes | Comma separated list of JSX attributes to sort tailwind classes in. | "class,className,tw" |
| sortClassNamesSortFunctions | Comma separated list of function names to sort classes in arguments. | "clsx,classNames,cx" |
parser support
Supports
- HTML
- CSS (@apply directive)
- JSX, TSX
- twin.marco
troubleshooting
plugin is not automatically detected with yarn 2
- make sure to use
prettier.config.js(if you are currently using.prettierrcet al you have to change to the js-variant) - add the
pluginssection:
module.exports = {
plugins: [require('prettier-plugin-sort-class-names')],
// ... your other config-keys like:
printWidth: 120,
}check prettier issue #7073 for more information
special thanks
To Acidic9 and his package prettier-plugin-tailwind.
If you want to sort your tailwind class names, you should give this package a shot and come back if you want to extend it with custom class names.