CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rushstack--eslint-config

A TypeScript ESLint ruleset designed for large teams and projects

—

Pending
Overview
Eval results
Files

mixins.mddocs/

Mixin Configurations

Mixin configurations provide optional enhancements that can be layered on top of base profiles to add specialized functionality. Mixins must be loaded after the profile in the extends array and are designed to override or extend specific rules without conflicting with the base configuration.

Capabilities

Friendly Locals Mixin

Requires explicit type declarations for local variables to improve code readability and maintainability. This mixin restores TypeScript's explicit typing requirements that were relaxed in the base profiles for easier adoption.

// Legacy format
module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/node",
    "@rushstack/eslint-config/mixins/friendly-locals" // Must come after profile
  ],
  parserOptions: { tsconfigRootDir: __dirname }
};

// Flat format
import nodeProfile from "@rushstack/eslint-config/flat/profile/node";
import friendlyLocalsMixin from "@rushstack/eslint-config/flat/mixins/friendly-locals";
export default [...nodeProfile, ...friendlyLocalsMixin];

Path: @rushstack/eslint-config/mixins/friendly-locals
Flat Path: @rushstack/eslint-config/flat/mixins/friendly-locals
Purpose: Requires explicit type declarations for local variables
Impact: Overrides @typescript-eslint/typedef rule to require variableDeclaration: true

Code Impact Example:

// Without friendly-locals (allowed)
const item = provider.getItem(provider.title);
const index = item.fetchIndex();

// With friendly-locals (required)
const item: ISalesReport = provider.getItem(provider.title);
const index: Map<string, IGeographicData> = item.fetchIndex();

Packlets Mixin

Enables the packlets organization system for structuring source files within a single project. Packlets provide a lightweight alternative to NPM packages for organizing code.

// Legacy format
module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/node",
    "@rushstack/eslint-config/mixins/packlets"
  ],
  parserOptions: { tsconfigRootDir: __dirname }
};

// Flat format
import nodeProfile from "@rushstack/eslint-config/flat/profile/node";
import packletsMixin from "@rushstack/eslint-config/flat/mixins/packlets";
export default [...nodeProfile, ...packletsMixin];

Path: @rushstack/eslint-config/mixins/packlets
Flat Path: @rushstack/eslint-config/flat/mixins/packlets
Plugin: @rushstack/eslint-plugin-packlets
Rules:

  • @rushstack/packlets/mechanics: Enforces packlet import/export rules
  • @rushstack/packlets/circular-deps: Detects circular dependencies between packlets

React Mixin

Adds ESLint rules specifically designed for React projects. Includes validation for JSX patterns, React-specific coding practices, and performance optimizations.

// Legacy format
module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/web-app", // Recommended profile for React
    "@rushstack/eslint-config/mixins/react"
  ],
  parserOptions: { tsconfigRootDir: __dirname },
  settings: {
    react: {
      version: "18.0" // Specify your React version
    }
  }
};

// Flat format
import webAppProfile from "@rushstack/eslint-config/flat/profile/web-app";
import reactMixin from "@rushstack/eslint-config/flat/mixins/react";
export default [
  ...webAppProfile,
  ...reactMixin
];

Path: @rushstack/eslint-config/mixins/react
Flat Path: @rushstack/eslint-config/flat/mixins/react
Plugin: eslint-plugin-react
Required Settings: react.version should be specified to avoid automatic detection overhead

Key React Rules Enabled:

  • react/jsx-key: Requires keys for array elements
  • react/jsx-no-bind: Prevents performance-impacting bind calls in JSX
  • react/jsx-no-comment-textnodes: Prevents common JSX mistakes
  • react/jsx-no-target-blank: Security rule for external links
  • react/jsx-uses-react: Compatibility with React imports
  • react/jsx-uses-vars: Compatibility with JSX variable usage
  • react/no-children-prop: Prevents children prop misuse
  • react/no-danger-with-children: Prevents dangerous DOM manipulation
  • react/no-deprecated: Prevents usage of deprecated React APIs

TSDoc Mixin

Validates TypeScript documentation comments to ensure they follow the TSDoc standard. Essential for projects using API Extractor or other TSDoc-compatible documentation tools.

// Legacy format
module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/node",
    "@rushstack/eslint-config/mixins/tsdoc"
  ],
  parserOptions: { tsconfigRootDir: __dirname }
};

// Flat format
import nodeProfile from "@rushstack/eslint-config/flat/profile/node";
import tsdocMixin from "@rushstack/eslint-config/flat/mixins/tsdoc";
export default [...nodeProfile, ...tsdocMixin];

Path: @rushstack/eslint-config/mixins/tsdoc
Flat Path: @rushstack/eslint-config/flat/mixins/tsdoc
Plugin: eslint-plugin-tsdoc
Rules: tsdoc/syntax: Validates TSDoc comment syntax

TSDoc Example:

/**
 * Calculates the total price including tax
 * @param basePrice - The base price before tax
 * @param taxRate - The tax rate as a decimal (e.g., 0.1 for 10%)
 * @returns The total price including tax
 * @public
 */
function calculateTotal(basePrice: number, taxRate: number): number {
  return basePrice * (1 + taxRate);
}

Mixin Usage Patterns

Single Mixin

// .eslintrc.js
require('@rushstack/eslint-config/patch/modern-module-resolution');

module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/node",
    "@rushstack/eslint-config/mixins/tsdoc"
  ],
  parserOptions: { tsconfigRootDir: __dirname }
};

Multiple Mixins

// .eslintrc.js
require('@rushstack/eslint-config/patch/modern-module-resolution');

module.exports = {
  extends: [
    "@rushstack/eslint-config/profile/web-app",
    "@rushstack/eslint-config/mixins/react",
    "@rushstack/eslint-config/mixins/friendly-locals",
    "@rushstack/eslint-config/mixins/tsdoc"
  ],
  parserOptions: { tsconfigRootDir: __dirname },
  settings: {
    react: {
      version: "18.0"
    }
  }
};

Flat Configuration with Mixins

// eslint.config.js
import nodeProfile from "@rushstack/eslint-config/flat/profile/node";
import tsdocMixin from "@rushstack/eslint-config/flat/mixins/tsdoc";
import friendlyLocalsMixin from "@rushstack/eslint-config/flat/mixins/friendly-locals";

export default [
  ...nodeProfile,
  ...tsdocMixin,
  ...friendlyLocalsMixin
];

Mixin Configuration Structure

// Legacy mixin structure
interface MixinConfig {
  plugins?: string[];
  settings?: {
    react?: {
      version: string;
    };
  };
  overrides: Array<{
    files: string[]; // Typically ['*.ts', '*.tsx']
    rules: Record<string, RuleConfig>;
  }>;
}

// Flat mixin structure
interface FlatMixinConfig extends Array<{
  files?: string[];
  plugins?: Record<string, any>;
  rules: Record<string, RuleConfig>;
  settings?: Record<string, any>;
}> {}

type RuleConfig = 
  | 'off' | 'warn' | 'error'
  | 0 | 1 | 2
  | ['off' | 'warn' | 'error' | 0 | 1 | 2, ...any[]];

Requirements and Compatibility

General Requirements:

  • Must be loaded after a profile in the extends array
  • TypeScript files only (mixins typically target ['*.ts', '*.tsx'])
  • Compatible with all profiles (node, node-trusted-tool, web-app)

React Mixin Requirements:

  • Recommended to use with web-app profile
  • Must specify settings.react.version for optimal performance
  • Requires JSX configuration in tsconfig.json: "jsx": "react"

TSDoc Mixin Requirements:

  • Best used with API Extractor or other TSDoc-compatible tools
  • Requires proper TSDoc syntax in TypeScript comments

Packlets Mixin Requirements:

  • Requires understanding of packlet organization principles
  • See @rushstack/eslint-plugin-packlets documentation for setup details

Install with Tessl CLI

npx tessl i tessl/npm-rushstack--eslint-config

docs

index.md

mixins.md

patches.md

profiles.md

tile.json