Rules for JSX props and variable declarations.
Sorts JSX element props and attributes with support for shorthand props and custom grouping.
/**
* Rule for sorting JSX props and attributes
*/
const sortJsxProps: Rule.RuleModule;
/**
* Configuration options for sort-jsx-props rule
*/
interface SortJsxPropsOptions {
/** Sorting strategy */
type?: "alphabetical" | "line-length" | "natural" | "custom";
/** Sort direction */
order?: "asc" | "desc";
/** Case sensitivity for sorting */
ignoreCase?: boolean;
/** Locale for sorting */
locales?: NonNullable<Intl.LocalesArgument>;
/** Custom alphabet for sorting */
alphabet?: string;
/** How to handle special characters */
specialCharacters?: "remove" | "trim" | "keep";
/** Custom JSX prop groups */
groups?: GroupsOptions<JsxPropGroup>;
/** Custom groups for fine-tuned control */
customGroups?: CustomGroupsOption<JsxPropSingleCustomGroup>;
}
type JsxPropGroup =
| "multiline" | "shorthand" | "unknown" | string;
interface JsxPropSingleCustomGroup {
modifiers?: JsxPropModifier[];
elementNamePattern?: RegexOption;
}
type JsxPropModifier = "multiline" | "shorthand";Usage Examples:
// Basic JSX prop sorting
{
"perfectionist/sort-jsx-props": ["error", {
"type": "alphabetical",
"order": "asc"
}]
}
// Group shorthand props separately
{
"perfectionist/sort-jsx-props": ["error", {
"groups": ["shorthand", "multiline"],
"customGroups": [
{
"groupName": "data-attributes",
"elementNamePattern": "^data-"
},
{
"groupName": "event-handlers",
"elementNamePattern": "^on[A-Z]"
}
]
}]
}
// Sort by line length for better readability
{
"perfectionist/sort-jsx-props": ["error", {
"type": "line-length",
"order": "asc"
}]
}Sorts variable declarations within variable declaration statements.
/**
* Rule for sorting variable declarations
*/
const sortVariableDeclarations: Rule.RuleModule;
/**
* Configuration options for sort-variable-declarations rule
*/
interface SortVariableDeclarationsOptions {
type?: "alphabetical" | "line-length" | "natural" | "custom";
order?: "asc" | "desc";
ignoreCase?: boolean;
locales?: NonNullable<Intl.LocalesArgument>;
alphabet?: string;
specialCharacters?: "remove" | "trim" | "keep";
groups?: GroupsOptions<VariableDeclarationGroup>;
customGroups?: CustomGroupsOption<VariableDeclarationSingleCustomGroup>;
partitionByComment?: PartitionByCommentOption;
partitionByNewLine?: boolean;
}
type VariableDeclarationGroup =
| "const" | "let" | "var" | "unknown" | string;
interface VariableDeclarationSingleCustomGroup {
selector?: VariableDeclarationSelector;
elementNamePattern?: RegexOption;
}
type VariableDeclarationSelector = "const" | "let" | "var";Usage Examples:
// Sort variable declarations alphabetically
{
"perfectionist/sort-variable-declarations": ["error", {
"type": "alphabetical",
"order": "asc"
}]
}
// Group by declaration type
{
"perfectionist/sort-variable-declarations": ["error", {
"groups": ["const", "let", "var"],
"customGroups": [
{
"groupName": "config",
"elementNamePattern": "^(config|options|settings)"
}
]
}]
}
// Sort with partition support
{
"perfectionist/sort-variable-declarations": ["error", {
"partitionByComment": true,
"partitionByNewLine": true
}]
}/**
* Base JSX/Variable sorting configuration
*/
interface JsxVariableSortingOptions {
type?: "alphabetical" | "line-length" | "natural" | "custom";
order?: "asc" | "desc";
ignoreCase?: boolean;
locales?: NonNullable<Intl.LocalesArgument>;
alphabet?: string;
specialCharacters?: "remove" | "trim" | "keep";
}
/**
* Group configuration for JSX/Variable elements
*/
type GroupsOptions<T> = (
| (GroupNewlinesBetweenOption & GroupCommentAboveOption)
| GroupNewlinesBetweenOption
| GroupCommentAboveOption
| T[]
| T
)[];
interface GroupNewlinesBetweenOption {
newlinesBetween: "ignore" | "always" | "never" | number;
}
interface GroupCommentAboveOption {
commentAbove: string;
}
/**
* Custom group configuration for JSX/Variable elements
*/
type CustomGroupsOption<SingleCustomGroup = object> = ({
newlinesInside?: "always" | "never" | number;
fallbackSort?: FallbackSortOption;
order?: "asc" | "desc";
groupName: string;
type?: "alphabetical" | "line-length" | "natural" | "custom";
} & (AnyOfCustomGroup<SingleCustomGroup> | SingleCustomGroup))[];
interface AnyOfCustomGroup<SingleCustomGroup> {
anyOf: SingleCustomGroup[];
}
interface FallbackSortOption {
order?: "asc" | "desc";
type: "alphabetical" | "line-length" | "natural" | "custom";
}
/**
* Regex pattern for matching JSX/Variable elements
*/
type RegexOption = SingleRegexOption[] | SingleRegexOption;
type SingleRegexOption =
| {
pattern: string;
flags?: string;
}
| string;
/**
* Partition by comment configuration
*/
type PartitionByCommentOption =
| {
block?: RegexOption | boolean;
line?: RegexOption | boolean;
}
| RegexOption
| boolean;Usage Notes:
{loading})const a = 1, b = 2, c = 3; → sorted by variable nameconst, let, and var declarationsBest Practices:
type: "alphabetical" for consistent orderingtype: "line-length" for JSX props to improve readabilitykey, id)partitionByComment for logical grouping of variables