prettier-plugin-classnames

0.10.1 verified Sat Apr 25 auth: no javascript

Prettier plugin (v0.10.1, active) that wraps long class name strings to fit within printWidth, supporting JSX, Vue, Angular, Svelte, Astro, CSS, SCSS, Less, and template literals. Requires Prettier ^3, Node >=18. Offers options like customAttributes, customFunctions, endingPosition, and a dedicated classnamesPrintWidth. Differentiates by handling class names across many languages and frameworks, with experimental optimizations and support for oxc and babel-ts parsers.

Common errors

error Error: Cannot find module 'prettier-plugin-classnames' ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install -D prettier-plugin-classnames'

error Error: Cannot resolve plugin prettier-plugin-classnames ↓

cause Prettier cannot find the plugin in the config.

fix

Ensure the package is installed and listed in the 'plugins' array as a string.

error TypeError: prettier-plugin-classnames is not a plugin ↓

cause Using import/require of the module instead of the string name in Prettier config.

fix

Use the string 'prettier-plugin-classnames' in the plugins array, e.g., { plugins: ['prettier-plugin-classnames'] }

Warnings

breaking Minimum Node.js version raised to 18 in v0.8.0 ↓

fix Upgrade Node.js to v18 or later.

breaking Dropped support for Prettier v2 in v0.8.0 ↓

fix Upgrade Prettier to v3 or later.

breaking experimentalOptimization option removed and enabled by default in v0.8.0 ↓

fix Remove the option from your config; it is now always on.

breaking endingPosition 'absolute-with-indent' option removed in v0.8.0 ↓

fix Use 'absolute' or 'relative' instead.

gotcha Markdown and MDX files are not supported; the plugin may inadvertently format code blocks inside them. ↓

fix Use Prettier's overrides to exclude .md and .mdx files from plugin processing.

Install

npm install prettier-plugin-classnames

yarn add prettier-plugin-classnames

pnpm add prettier-plugin-classnames

Imports

default export

In Prettier config, add 'prettier-plugin-classnames' to plugins array (e.g., { plugins: ['prettier-plugin-classnames'] })

The plugin does not have a direct JS import for end users; it's loaded by Prettier's plugin system.

require (CommonJS config)
wrong
```
const plugin = require('prettier-plugin-classnames'); module.exports = { plugins: [plugin] }
```
correct
```
module.exports = { plugins: ['prettier-plugin-classnames'] }
```
The plugin string 'prettier-plugin-classnames' is resolved by Prettier; requiring the module directly may cause issues with resolved plugins.
import (ESM config)
wrong
```
import plugin from 'prettier-plugin-classnames'; export default { plugins: [plugin] }
```
correct
```
export default { plugins: ['prettier-plugin-classnames'] }
```
Using the string name is the recommended way; importing the module may not work if the plugin does not export a Prettier plugin object.

Quickstart

Installs the package and configures Prettier to use the plugin. After running prettier, long class name strings will be wrapped.

npm install -D prettier prettier-plugin-classnames

// .prettierrc.json
{
  "plugins": ["prettier-plugin-classnames"],
  "printWidth": 80
}