Overview
@zayne-labs/prettier-config provides a modular Prettier configuration with automatic plugin detection, smart import sorting, and Tailwind CSS v4 support.
Key Features
- Modular factory system with toggleable features
- Smart import sorting with distance-based logic
- Tailwind CSS v4 ready with advanced class sorting
- Auto-installation prompts for missing plugins
- Deduplicated configuration merging
Installation
pnpm add -D @zayne-labs/prettier-config
Basic Setup
Create a prettier.config.js file in your project root:
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
base: true, // Enabled by default
sortImports: true, // Enabled by default
});
The configuration uses a factory function that combines different config segments based on your needs.
Configuration Options
The zayne factory accepts an options object with the following properties:
base
boolean | Config
default:true
Opinionated base defaults for Prettier formatting.
sortImports
boolean | OptionsSortImports
default:true
Enables @ianvs/prettier-plugin-sort-imports for smart import organization.
tailwindcss
boolean | OptionsTailwindCss
default:false
Enables Tailwind CSS and ClassNames plugins for class sorting.
astro
boolean | OptionsAstro
default:false
Enables prettier-plugin-astro for Astro component formatting.
Import Sorting
When sortImports is enabled (default), imports are automatically organized by “distance” from the current file.
Sorting Order
User patterns
Custom patterns you pass via importOrder are prioritized at the top.
URLs
Remote modules (e.g., https://esm.sh/...).
Protocols
Built-ins and protocol imports (node:, bun:, jsr:, npm:).
Packages
Third-party modules (e.g., react, lodash).
Aliases
Local aliases like @/, #, ~, $, %.
Paths
Relative and absolute file paths (excluding CSS).
CSS
Style files are always pushed to the absolute bottom.
Custom Import Order
Override the default import order:
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
sortImports: {
importOrder: [
"^@core/(.*)$", // Core modules first
"^@app/(.*)$", // App modules
"^[./]", // Relative imports
],
},
});
Disable Import Sorting
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
sortImports: false,
});
Tailwind CSS Support
The Tailwind integration combines three plugins for optimal class handling:
prettier-plugin-tailwindcss: Sorts classesprettier-plugin-classnames: Multi-line formatting & attribute supportprettier-plugin-merge: Ensures plugins work together
Enable Tailwind support
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: true,
});
Install plugins
When you run prettier --write ., you’ll be prompted to install missing plugins:pnpm i -D prettier-plugin-tailwindcss prettier-plugin-classnames prettier-plugin-merge
Tailwind CSS v4
For Tailwind CSS v4 projects, specify your CSS entry point:
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: {
tailwindStylesheet: "./src/styles/tailwind.css",
},
});
Advanced Tailwind Options
Custom Attributes
Custom Functions
End Position
Syntax Transformation
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: {
customAttributes: ["classNames", "classes", "styled"],
},
});
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: {
customFunctions: ["cn", "tv", "tw", "clsx"],
},
});
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: {
endPosition: "absolute", // or 'relative'
},
});
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
tailwindcss: {
syntaxTransformation: true,
},
});
Astro Support
Enable Prettier formatting for Astro components:
Enable Astro support
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
astro: true,
});
Install plugin
pnpm i -D prettier-plugin-astro
Extending Configurations
The factory accepts any number of extra configuration objects as subsequent arguments:
import { zayne } from "@zayne-labs/prettier-config";
export default zayne(
{
tailwindcss: true,
sortImports: true,
},
// Extra config objects to merge
{
printWidth: 120,
semi: true,
singleQuote: false,
tabWidth: 4,
},
// Another config object
{
overrides: [
{
files: "*.md",
options: {
printWidth: 80,
},
},
],
}
);
Plugin Auto-Installation
This config won’t bloat your node_modules with unused plugins. When you enable a feature, it checks if the required plugins are installed.
If plugins are missing, you’ll be prompted to auto-install them when you run prettier --write .
Example Configurations
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
base: true,
sortImports: true,
tailwindcss: {
customFunctions: ["cn", "clsx"],
},
});
Next.js with Custom Import Order
import { zayne } from "@zayne-labs/prettier-config";
export default zayne(
{
sortImports: {
importOrder: [
"^@/lib/(.*)$",
"^@/components/(.*)$",
"^@/app/(.*)$",
"^[./]",
],
},
tailwindcss: true,
},
{
printWidth: 100,
}
);
import { zayne } from "@zayne-labs/prettier-config";
export default zayne({
astro: true,
tailwindcss: {
tailwindStylesheet: "./src/styles/tailwind.css",
},
});
import { zayne } from "@zayne-labs/prettier-config";
export default zayne(
{
sortImports: false, // Disable import sorting
},
{
semi: false,
singleQuote: true,
}
);
Package Scripts
Add these scripts to your package.json:
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
IDE Integration
Install the Prettier extension and add to .vscode/settings.json:{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
Use conform.nvim or none-ls:require("conform").setup({
formatters_by_ft = {
javascript = { "prettier" },
typescript = { "prettier" },
javascriptreact = { "prettier" },
typescriptreact = { "prettier" },
},
})
Next Steps
ESLint Setup
Configure ESLint for comprehensive code quality
API Reference
View complete API documentation
