or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

alphabet-utility.mdclass-module-rules.mdcollection-rules.mdimport-export-rules.mdindex.mdjsx-variable-rules.mdobject-rules.mdplugin-configuration.mdtypescript-rules.md
tile.json

jsx-variable-rules.mddocs/

JSX Variable Rules

Rules for JSX props and variable declarations.

Capabilities

Sort JSX Props

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"
  }]
}

Sort Variable Declarations

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
  }]
}

Types

JSX and Variable Sorting Types

/**
 * 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:

JSX Props Sorting

  • Applies to React JSX elements and similar JSX-like syntax
  • Supports both regular props and shorthand props (e.g., {loading})
  • Maintains prop functionality while improving readability
  • Works with TypeScript JSX components

Variable Declarations Sorting

  • Sorts multiple variable declarations within single statements
  • Examples: const a = 1, b = 2, c = 3; → sorted by variable name
  • Preserves initialization values and maintains proper scoping
  • Supports const, let, and var declarations

Best Practices:

  • Use type: "alphabetical" for consistent ordering
  • Consider type: "line-length" for JSX props to improve readability
  • Use custom groups to prioritize important props (e.g., key, id)
  • Enable partitionByComment for logical grouping of variables