zayne() factory accepts an options object with four main feature flags, each supporting boolean or detailed configuration.
Base Options
Opinionated base Prettier configuration with refined defaults.When Pass a
true, applies these defaults:{
experimentalOperatorPosition: "start",
experimentalTernaries: true,
jsxSingleQuote: false,
printWidth: 107,
singleQuote: false,
tabWidth: 3,
trailingComma: "es5",
useTabs: true,
}
Config object to override specific values:zayne({
base: {
printWidth: 120,
useTabs: false,
},
});
Sort Imports Options
Enables
@ianvs/prettier-plugin-sort-imports with distance-based import organization.Show OptionsSortImports properties
Show OptionsSortImports properties
Regex patterns to control import grouping and order. Supports special keywords:Example:
<BUILTIN_MODULES>: Node.js built-ins<THIRD_PARTY_MODULES>: npm packages<TYPES>: Type-only imports
"") to add blank lines between groups.Default:[
"^https?://", // URLs
"<BUILTIN_MODULES>", // node:fs, etc.
"^(bun|jsr|npm):", // Protocol imports
"<THIRD_PARTY_MODULES>",// react, lodash, etc.
"^(@@?/|[#$%~])", // Aliases
"^(?!.*[.]css$)[./].*$",// Relative paths (no CSS)
".css$" // CSS files last
]
zayne({
sortImports: {
importOrder: [
"^@company/core",
"^@company/",
"<THIRD_PARTY_MODULES>",
],
},
});
Enable case-sensitive sorting within import groups.
zayne({
sortImports: {
importOrderCaseSensitive: true,
},
});
Babel parser plugins to understand file syntax. Pass plugin options as JSON strings.
zayne({
sortImports: {
importOrderParserPlugins: [
"typescript",
"jsx",
"decorators",
'{"decoratorsBeforeExport": true}',
],
},
});
Regex patterns for side-effect imports that are safe to reorder. By default, side-effect imports stay in place.
zayne({
sortImports: {
importOrderSafeSideEffects: [".css$", ".scss$", "^polyfills"],
},
});
TypeScript version to enable modern syntax features like mixed type/value imports.
Additional plugins to include alongside
@ianvs/prettier-plugin-sort-imports.Tailwind CSS Options
Enables Tailwind CSS class sorting via merged plugins. Requires:
prettier-plugin-tailwindcssprettier-plugin-classnamesprettier-plugin-merge
Show OptionsTailwindCss properties
Show OptionsTailwindCss properties
Additional attributes to sort classes in (beyond
class and className).Default: ["className", "classNames", "classes"]zayne({
tailwindcss: {
customAttributes: ["containerClass", "wrapperClass"],
},
});
Functions or tagged templates to sort classes in.Default:
["cnMerge", "cnJoin", "cn", "tv", "tw"]zayne({
tailwindcss: {
customFunctions: ["clsx", "cva"],
},
});
Criterion for ending class names on each line when wrapping to multi-line.
Transforms non-expression class names into expression syntax if line wrapping occurs.
This transformation is not reversible.
Attributes to sort classes in. Supports regex patterns.Default:
["className", "classNames", "classes"]zayne({
tailwindcss: {
tailwindAttributes: ["class", "className", ".*Class.*"],
},
});
Path to Tailwind config file (v3).
zayne({
tailwindcss: {
tailwindConfig: "./tailwind.config.js",
},
});
Functions or tagged templates to sort classes in. Supports regex patterns.Default:
["cnMerge", "cnJoin", "cn", "tv", "tw"]zayne({
tailwindcss: {
tailwindFunctions: ["cn", "cva", ".*Classes"],
},
});
Prevent automatic removal of duplicate classes.
Prevent automatic removal of unnecessary whitespace.
Path to CSS entry point (Tailwind CSS v4+).
zayne({
tailwindcss: {
tailwindStylesheet: "./src/styles/tailwind.css",
},
});
Custom plugins to include. The merge plugin is always added last automatically.
Astro Options
Enables
prettier-plugin-astro for formatting .astro files.Show OptionsAstro properties
Show OptionsAstro properties
Enable automatic formatting of attributes to shorthand form.Example transformation:
zayne({
astro: {
astroAllowShorthand: true,
},
});
<!-- Before -->
<Component name={name} />
<!-- After -->
<Component {name} />
Skip formatting of JavaScript frontmatter in
.astro files.zayne({
astro: {
astroSkipFrontmatter: true,
},
});
Parser overrides for specific file patterns. The
*.astro override is automatically included.zayne({
astro: {
overrides: [
{
files: "*.astro",
options: { parser: "astro" },
},
],
},
});
Additional plugins to include alongside
prettier-plugin-astro.Complete Example
import { zayne } from "@zayne-labs/prettier-config";
export default zayne(
{
base: {
printWidth: 100,
useTabs: false,
},
sortImports: {
importOrder: [
"^@company/core",
"^@company/",
"<THIRD_PARTY_MODULES>",
"^@/",
"^[./]",
],
importOrderCaseSensitive: true,
},
tailwindcss: {
tailwindStylesheet: "./src/styles/globals.css",
customFunctions: ["cn", "clsx", "cva"],
customAttributes: ["containerClass"],
},
astro: {
astroAllowShorthand: true,
},
},
{
// Additional custom config
semi: false,
}
);