Documentation Index
Fetch the complete documentation index at: https://mintlify.com/zayne-labs/config/llms.txt
Use this file to discover all available pages before exploring further.
The zayne() factory accepts an options object with four main feature flags, each supporting boolean or detailed configuration.
Base Options
base
boolean | Config
default:"true"
Opinionated base Prettier configuration with refined defaults.When true, applies these defaults:{
experimentalOperatorPosition: "start",
experimentalTernaries: true,
jsxSingleQuote: false,
printWidth: 107,
singleQuote: false,
tabWidth: 3,
trailingComma: "es5",
useTabs: true,
}
Pass a Config object to override specific values:zayne({
base: {
printWidth: 120,
useTabs: false,
},
});
Sort Imports Options
sortImports
boolean | OptionsSortImports
default:"true"
Enables @ianvs/prettier-plugin-sort-imports with distance-based import organization.Show OptionsSortImports properties
Regex patterns to control import grouping and order. Supports special keywords:
<BUILTIN_MODULES>: Node.js built-ins
<THIRD_PARTY_MODULES>: npm packages
<TYPES>: Type-only imports
Use empty strings ("") 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
]
Example:zayne({
sortImports: {
importOrder: [
"^@company/core",
"^@company/",
"<THIRD_PARTY_MODULES>",
],
},
});
Enable case-sensitive sorting within import groups.zayne({
sortImports: {
importOrderCaseSensitive: true,
},
});
importOrderParserPlugins
string[]
default:"[\"typescript\", \"jsx\"]"
Babel parser plugins to understand file syntax. Pass plugin options as JSON strings.zayne({
sortImports: {
importOrderParserPlugins: [
"typescript",
"jsx",
"decorators",
'{"decoratorsBeforeExport": true}',
],
},
});
importOrderSafeSideEffects
string[]
default:"[\".css$\"]"
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"],
},
});
importOrderTypeScriptVersion
string
default:"\"5.9.3\""
TypeScript version to enable modern syntax features like mixed type/value imports.
plugins
Array<string | Plugin | URL>
Additional plugins to include alongside @ianvs/prettier-plugin-sort-imports.
Tailwind CSS Options
tailwindcss
boolean | OptionsTailwindCss
default:"false"
Enables Tailwind CSS class sorting via merged plugins. Requires:
prettier-plugin-tailwindcss
prettier-plugin-classnames
prettier-plugin-merge
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"],
},
});
endPosition
"absolute" | "relative"
default:"\"absolute\""
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"],
},
});
tailwindPreserveDuplicates
Prevent automatic removal of duplicate classes.
tailwindPreserveWhitespace
Prevent automatic removal of unnecessary whitespace.
tailwindStylesheet
string
default:"\"./tailwind.css\""
Path to CSS entry point (Tailwind CSS v4+).zayne({
tailwindcss: {
tailwindStylesheet: "./src/styles/tailwind.css",
},
});
plugins
Array<string | Plugin | URL>
Custom plugins to include. The merge plugin is always added last automatically.
Astro Options
astro
boolean | OptionsAstro
default:"false"
Enables prettier-plugin-astro for formatting .astro files.Show OptionsAstro properties
Enable automatic formatting of attributes to shorthand form.zayne({
astro: {
astroAllowShorthand: true,
},
});
Example transformation:<!-- 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" },
},
],
},
});
plugins
Array<string | Plugin | URL>
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,
}
);