Prettier Plugins: Adding Languages and Sorting
Prettier plugins extend it with new parsers or formatting passes, declared in config or on the CLI.
Plugins are how Prettier handles languages it does not ship with and how teams add things like import or class sorting. They must be installed and named correctly.
What it does
A Prettier plugin is an npm package that registers a parser, printer, or options. You list plugins in the config under the "plugins" array or pass them with --plugin on the CLI. From Prettier 3, plugin names in config are resolved relative to the config file, and all plugins must be loaded explicitly (there is no automatic discovery).
Common usage
// .prettierrc.json
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/app.css"
}Options
| Option / flag | What it does |
|---|---|
| "plugins": [..] | Array of plugin package names or paths in config |
| --plugin <name> | Load a plugin from the CLI (repeatable) |
| prettier-plugin-tailwindcss | Sorts Tailwind class names |
| @trivago/prettier-plugin-sort-imports | Sorts and groups import statements |
| @prettier/plugin-php / -xml | Add parsers for PHP, XML, and more |
In CI
Install every plugin as a devDependency so CI resolves the same versions as developers. Because Prettier 3 requires explicit loading, a plugin that worked under Prettier 2 auto-discovery can stop applying after an upgrade; add it to the plugins array. Pin plugin versions too, since a plugin bump can change output and break --check.
Common errors in CI
"[error] Cannot find package 'prettier-plugin-xyz'" or "Cannot find module" means the plugin is not installed in CI; check it is in dependencies and the lockfile. "[warn] Ignored unknown option" on a plugin-specific setting means the plugin did not load. Two plugins that both reorder code (such as a sort-imports plugin plus another) can conflict and produce unstable output.