{"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,"search_vec":"'0.3.0':26 '20':64 '2026':29 '3.0.0':61 'angular':45 'astro':47 'attribut':50,68 'automat':8 'bootstrap':3,10,81 'class':12,58,83,86 'class-ord':85 'clsx':54 'compon':20 'configur':36 'css':11,82 'current':22 'custom':49 'differenti':34 'duplic':73 'engin':41 'follow':13 'formatt':88 'framework':15 'function':52 'handl':74 'html':42 'javascript':78 'jsx/tsx':43 'key':33 'layout':19 'like':53 'match':69 'may':28 'multipl':39 'node':63 'offer':65 'option':66 'order':18,87 'plugin':2,6,80 'preserv':56,72 'prettier':1,5,60,79 'recommend':17 'regex':70 'regular':31 'releas':27,32 'requir':59 'sort':9,84 'stabl':23 'support':48 'svelt':46 'target':77 'templat':40 'typescript':89 'unknown':57 'util':21 'version':24,76 'vue':44 'whitespac':71 'work':37 'zero':35","created_at":"2026-05-09T05:53:30.516011+00:00","updated_at":"2026-05-09T05:53:30.516011+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/pierluigilenoci/prettier-plugin-bootstrap","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/prettier-plugin-bootstrap","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-09","next_check":"2026-08-07","install_tag":null}}