Registry / web-framework / prettier-plugin-classnames

prettier-plugin-classnames

library0.10.1jsnpmunverified

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.

web-framework

npm install prettier-plugin-classnames

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-CL

prettier-plugin-classnames

web-frameworkjavascriptv0.10.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

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)

✓ module.exports = { plugins: ['prettier-plugin-classnames'] }

✗ const plugin = require('prettier-plugin-classnames'); module.exports = { plugins: [plugin] }

The plugin string 'prettier-plugin-classnames' is resolved by Prettier; requiring the module directly may cause issues with resolved plugins.

import (ESM config)

✓ export default { plugins: ['prettier-plugin-classnames'] }

✗ import plugin from 'prettier-plugin-classnames'; export default { plugins: [plugin] }

Using the string name is the recommended way; importing the module may not work if the plugin does not export a Prettier plugin object.

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 }

Debug

Known issues

breakingMinimum Node.js version raised to 18 in v0.8.0

fix

Upgrade Node.js to v18 or later.

affects: >=0.8.0

breakingDropped support for Prettier v2 in v0.8.0

fix

Upgrade Prettier to v3 or later.

affects: >=0.8.0

breakingexperimentalOptimization option removed and enabled by default in v0.8.0

fix

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

affects: >=0.8.0

breakingendingPosition 'absolute-with-indent' option removed in v0.8.0

fix

Use 'absolute' or 'relative' instead.

affects: >=0.8.0

gotchaMarkdown 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.

affects: >=0.8.0

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules.

fix

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

Error: Cannot resolve plugin prettier-plugin-classnames

Prettier cannot find the plugin in the config.

fix

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

TypeError: prettier-plugin-classnames is not a plugin

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'] }

Upgrade

Version history

0.10.1latest on npm

Audit

Dependencies

prettierrequiredpeer dependency: required to use the plugin

@prettier/plugin-oxcoptionaloptional peer for oxc parser support (since v0.9.0)

prettier-plugin-astrooptionaloptional peer for Astro file support

prettier-plugin-svelteoptionaloptional peer for Svelte file support

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ony3000/prettier-plugin-classnames ↗

packagehttps://www.npmjs.com/package/prettier-plugin-classnames ↗