{"id":20343,"library":"prettier-plugin-classnames","title":"prettier-plugin-classnames","description":"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.","status":"active","version":"0.10.1","language":"javascript","source_language":"en","source_url":"https://github.com/ony3000/prettier-plugin-classnames","tags":["javascript","prettier","plugin","classnames","wrap","verbose","class","tailwindcss"],"install":[{"cmd":"npm install prettier-plugin-classnames","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-classnames","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-classnames","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: required to use the plugin","package":"prettier","optional":false},{"reason":"optional peer for oxc parser support (since v0.9.0)","package":"@prettier/plugin-oxc","optional":true},{"reason":"optional peer for Astro file support","package":"prettier-plugin-astro","optional":true},{"reason":"optional peer for Svelte file support","package":"prettier-plugin-svelte","optional":true}],"imports":[{"note":"The plugin does not have a direct JS import for end users; it's loaded by Prettier's plugin system.","symbol":"default export","correct":"In Prettier config, add 'prettier-plugin-classnames' to plugins array (e.g., { plugins: ['prettier-plugin-classnames'] })"},{"note":"The plugin string 'prettier-plugin-classnames' is resolved by Prettier; requiring the module directly may cause issues with resolved plugins.","wrong":"const plugin = require('prettier-plugin-classnames'); module.exports = { plugins: [plugin] }","symbol":"require (CommonJS config)","correct":"module.exports = { plugins: ['prettier-plugin-classnames'] }"},{"note":"Using the string name is the recommended way; importing the module may not work if the plugin does not export a Prettier plugin object.","wrong":"import plugin from 'prettier-plugin-classnames'; export default { plugins: [plugin] }","symbol":"import (ESM config)","correct":"export default { plugins: ['prettier-plugin-classnames'] }"}],"quickstart":{"code":"npm install -D prettier prettier-plugin-classnames\n\n// .prettierrc.json\n{\n  \"plugins\": [\"prettier-plugin-classnames\"],\n  \"printWidth\": 80\n}","lang":"json","description":"Installs the package and configures Prettier to use the plugin. After running prettier, long class name strings will be wrapped."},"warnings":[{"fix":"Upgrade Node.js to v18 or later.","message":"Minimum Node.js version raised to 18 in v0.8.0","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Upgrade Prettier to v3 or later.","message":"Dropped support for Prettier v2 in v0.8.0","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Remove the option from your config; it is now always on.","message":"experimentalOptimization option removed and enabled by default in v0.8.0","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Use 'absolute' or 'relative' instead.","message":"endingPosition 'absolute-with-indent' option removed in v0.8.0","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Use Prettier's overrides to exclude .md and .mdx files from plugin processing.","message":"Markdown and MDX files are not supported; the plugin may inadvertently format code blocks inside them.","severity":"gotcha","affected_versions":">=0.8.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D prettier-plugin-classnames'","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'prettier-plugin-classnames'"},{"fix":"Ensure the package is installed and listed in the 'plugins' array as a string.","cause":"Prettier cannot find the plugin in the config.","error":"Error: Cannot resolve plugin prettier-plugin-classnames"},{"fix":"Use the string 'prettier-plugin-classnames' in the plugins array, e.g., { plugins: ['prettier-plugin-classnames'] }","cause":"Using import/require of the module instead of the string name in Prettier config.","error":"TypeError: prettier-plugin-classnames is not a plugin"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}