prettier-plugin-classnames

<div align="right"> <details> <summary >🌐 Language</summary> <div> <div align="center"> <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=en">English</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=zh-CN">简体中文</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=zh-TW">繁體中文</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=ja">日本語</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=ko">한국어</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=hi">हिन्दी</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=th">ไทย</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=fr">Français</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=de">Deutsch</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=es">Español</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=it">Italiano</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=ru">Русский</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=pt">Português</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=nl">Nederlands</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=pl">Polski</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=ar">العربية</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=fa">فارسی</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=tr">Türkçe</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=vi">Tiếng Việt</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=id">Bahasa Indonesia</a> | <a href="https://openaitx.github.io/view.html?user=ony3000&project=prettier-plugin-classnames&lang=as">অসমীয়া</ </div> </div> </details> </div> # prettier-plugin-classnames A Prettier plugin that wraps verbose class name based on the `printWidth` option. ![A use case for this plugin.](.github/banner.png) ## Installation[^1] ```sh npm install -D prettier prettier-plugin-classnames ``` [^1]: If your version of `prettier-plugin-classnames` is less than `0.4.0`, you will also need to install `@prettier/sync`. ## Configuration JSON example: ```json { "plugins": ["prettier-plugin-classnames"] } ``` JS example (CommonJS module): ```javascript module.exports = { plugins: ['prettier-plugin-classnames'], customAttributes: ['myClassProp'], customFunctions: ['clsx'], }; ``` JS example (ES module): ```javascript export default { plugins: ['prettier-plugin-classnames'], endingPosition: 'absolute', }; ``` ## Options ### Custom Attributes List of attributes that enclosing class names.<br> The `class` and `className` attributes are always supported, even if no options are specified.  Default | CLI Override | API Override --- | --- | --- `[]` | `--custom-attributes <string>` | `customAttributes: ["<string>"]` ### Custom Functions List of functions that enclosing class names.<br> The `classNames` function is always supported, even if no options are specified.  Default | CLI Override | API Override --- | --- | --- `[]` | `--custom-functions <string>` | `customFunctions: ["<string>"]` ### Ending Position First available in v0.5.0.<br> `absolute-with-indent` was added in v0.6.0.<br> `absolute-with-indent` was removed in v0.8.0, but you can get the same output with `absolute`.<br> Default value changed from `relative` to `absolute` in v0.8.0. This is the criterion for ending the class name on each line when replacing the original class name with a multi-line class name. - `absolute` example: ``` --------------------------------------------------| printWidth=50 export function Callout({ children }) { return ( <div className="bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl" > {children} </div> ); } ``` - `relative` example: ``` --------------------------------------------------| printWidth=50 export function Callout({ children }) { return ( <div |--------------------------------------------------| className="bg-gray-100/50 border border-zinc-400/30 |--------------------------------------------------| dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl" > {children} </div> ); } ```  Default | CLI Override | API Override --- | --- | --- `"absolute"` | `--ending-position <absolute\|relative>` | `endingPosition: "<absolute\|relative>"` ### Syntax Transformation First available in v0.7.7. If a line wrapping occurs in a class name written in non-expression syntax, it is transformed into expression syntax. This transformation does not support reversible formatting.  Default | CLI Override | API Override --- | --- | --- `false` | `--syntax-transformation` | `syntaxTransformation: <boolean>` ## Version correlation with sibling plugins Starting with `0.6.0`, when there is a minor release on one side, I plan to reflect that change on the other side as well if possible. ![Version correlation.](.github/correlation.png) ## Compatibility with other Prettier plugins If more than one Prettier plugin can handle the text you want to format, Prettier will only use the last of those plugins. In this case, you can configure it as follows by adding [prettier-plugin-merge](https://github.com/ony3000/prettier-plugin-merge) to apply those plugins sequentially. JSON example:  ```json { "plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-merge" ] } ```