{"id":28058,"library":"prettier-plugin-bootstrap","title":"Prettier Plugin Bootstrap","description":"A Prettier plugin that automatically sorts Bootstrap CSS classes following the framework's recommended order (layout → components → utilities). Current stable version is 0.3.0, released May 2026, with regular releases. Key differentiators: zero configuration, works with multiple template engines (HTML, JSX/TSX, Vue, Angular, Svelte, Astro), supports custom attributes and functions like clsx, and preserves unknown classes. Requires Prettier ^3.0.0 and Node >=20. Offers options for attribute matching (regex), whitespace preservation, duplicate handling, and version targeting.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/pierluigilenoci/prettier-plugin-bootstrap","tags":["javascript","prettier","plugin","bootstrap","css","class","sorting","class-order","formatter","typescript"],"install":[{"cmd":"npm install prettier-plugin-bootstrap","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-bootstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-bootstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires Prettier ^3.0.0","package":"prettier","optional":false}],"imports":[{"note":"Plugin is ESM-only. For CJS, use dynamic import().","wrong":"const prettierPluginBootstrap = require('prettier-plugin-bootstrap')","symbol":"default","correct":"import prettierPluginBootstrap from 'prettier-plugin-bootstrap'"},{"note":"Configure in .prettierrc or prettier.config.js. Options are NOT importable symbols.","wrong":null,"symbol":"options","correct":"{\n  \"plugins\": [\"prettier-plugin-bootstrap\"],\n  \"bootstrapFunctions\": [\"clsx\"]\n}"},{"note":"TypeScript types are shipped; the default export is typed as Plugin.","wrong":null,"symbol":"Plugin","correct":"import { type Plugin } from 'prettier';\nimport bootstrapPlugin from 'prettier-plugin-bootstrap';\nconst plugin: Plugin = bootstrapPlugin;"}],"quickstart":{"code":"// Install: npm install -D prettier prettier-plugin-bootstrap\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-bootstrap\"],\n  \"bootstrapFunctions\": [\"clsx\", \"cn\"],\n  \"bootstrapAttributes\": [\"/^data-class/\"],\n  \"bootstrapPreserveDuplicates\": false\n}\n\n// Input file (test.html)\n<div class=\"text-center p-3 container bg-primary text-white mb-4 rounded\"></div>\n\n// Run: npx prettier --write test.html\n// Output:\n<div class=\"container bg-primary text-center text-white mb-4 p-3 rounded\"></div>","lang":"typescript","description":"Shows installation, configuration with options, and the sorting result on an HTML file."},"warnings":[{"fix":"Use dynamic import(): const plugin = await import('prettier-plugin-bootstrap'); or set type: module.","message":"Version 0.3.0 changed plugin export to ESM-only; CJS require() will fail.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Set bootstrapPreserveWhitespace: true if original spacing is important.","message":"bootstrapPreserveWhitespace: false normalizes whitespace, which may affect formatting in JSX/TSX if you rely on whitespace for readability.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Set bootstrapVersion: 5 for now.","message":"bootstrapVersion option currently only accepts 5; future versions may support 4.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Upgrade to Prettier 3.x: npm install -D prettier@^3.0.0","message":"Plugin requires Prettier ^3.0.0; will not work with Prettier 2.x.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use full pattern like /^data-class/ or an exact string.","message":"Regex in bootstrapAttributes must match the entire attribute name, not partial.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Set bootstrapPreserveDuplicates: false to remove duplicates.","message":"Duplicate classes are kept by default (bootstrapPreserveDuplicates: true). This may cause unexpected results if duplicates are unintentional.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run: npm install -D prettier-plugin-bootstrap","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'prettier-plugin-bootstrap'"},{"fix":"Use dynamic import: const plugin = await import('prettier-plugin-bootstrap'); or set \"type\": \"module\" in package.json.","cause":"Using CommonJS require() with an ESM-only plugin (v0.3.0+).","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-bootstrap/..."},{"fix":"Upgrade to Prettier 3.x: npm install -D prettier@^3","cause":"Using Prettier 2.x API; plugin requires Prettier 3.x.","error":"TypeError: prettier.resolveConfig.sync is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}