tessl/npm-eslint-plugin-perfectionist

ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

JSX Variable Rules

Name: tessl/npm-eslint-plugin-perfectionist
Author: tessl

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: