or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

auto-configuration.md core-configurations.md framework-configurations.md index.md testing-configurations.md utility-configurations.md

tile.json

Framework Configurations

Specialized ESLint configurations for popular JavaScript/TypeScript frameworks and libraries. These configurations provide framework-specific rules, patterns, and best practices.

Capabilities

React Configuration

Comprehensive React configuration with hooks rules, JSX best practices, and modern React patterns.

/**
 * React framework ESLint configuration
 * Includes plugins: @stylistic, react, react-hooks
 * Applies to: React components and JSX files
 */
interface ReactConfiguration {
  recommended: ESLintConfig;
}

declare const react: ReactConfiguration;

Usage Examples:

import * as react from 'eslint-config-canonical/react';
import tseslint from 'typescript-eslint';

export default tseslint.config({
  files: ['**/*.{jsx,tsx}'],
  ...react.recommended,
});

Key Features:

React hooks rules and patterns
JSX syntax and formatting
Component best practices
Modern React patterns enforcement
Performance optimization rules

Next.js Configuration

Configuration optimized for Next.js applications with SSR/SSG considerations and Next.js specific patterns.

/**
 * Next.js framework ESLint configuration
 * Includes plugin: @next/eslint-plugin-next
 * Provides Next.js specific rules and optimizations
 */
interface NextConfiguration {
  recommended: ESLintConfig;
}

declare const next: NextConfiguration;

Usage Examples:

import * as next from 'eslint-config-canonical/next';
import * as react from 'eslint-config-canonical/react';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    files: ['**/*.{jsx,tsx}'],
    ...react.recommended,
  },
  {
    files: ['pages/**/*.{js,ts,jsx,tsx}', 'app/**/*.{js,ts,jsx,tsx}'],
    ...next.recommended,
  }
);

Key Features:

Next.js specific rules and patterns
Image optimization rules
Link component usage
Performance optimizations
SSR/SSG best practices

GraphQL Configuration

Configuration for GraphQL schema and query files with validation and best practices.

/**
 * GraphQL ESLint configuration
 * Includes plugin: @graphql-eslint/eslint-plugin
 * Applies to: **/*.{graphql,gql} files
 */
interface GraphQLConfiguration {
  recommended: ESLintConfig;
}

declare const graphql: GraphQLConfiguration;

Usage Examples:

import * as graphql from 'eslint-config-canonical/graphql';
import tseslint from 'typescript-eslint';

export default tseslint.config({
  files: ['**/*.{graphql,gql}'],
  ...graphql.recommended,
});

Key Features:

GraphQL schema validation
Query and mutation linting
Fragment usage patterns
Schema design best practices
Performance optimization rules

JSX Accessibility Configuration

React accessibility configuration ensuring WCAG compliance and accessible component patterns.

/**
 * JSX accessibility ESLint configuration
 * Includes plugin: jsx-a11y
 * Provides comprehensive accessibility rules for React components
 */
interface JSXAccessibilityConfiguration {
  recommended: ESLintConfig;
}

declare const jsxA11y: JSXAccessibilityConfiguration;

Usage Examples:

import * as react from 'eslint-config-canonical/react';
import * as jsxA11y from 'eslint-config-canonical/jsx-a11y';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    files: ['**/*.{jsx,tsx}'],
    ...react.recommended,
  },
  {
    files: ['**/*.{jsx,tsx}'],
    ...jsxA11y.recommended,
  }
);

Key Features:

ARIA attributes validation
Semantic HTML enforcement
Keyboard navigation rules
Screen reader compatibility
WCAG compliance checks

Integration Patterns

Full React Stack

import * as canonical from 'eslint-config-canonical/canonical';
import * as typescript from 'eslint-config-canonical/typescript';
import * as react from 'eslint-config-canonical/react';
import * as jsxA11y from 'eslint-config-canonical/jsx-a11y';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  // Base configuration
  canonical.recommended,
  
  // TypeScript support
  {
    files: ['**/*.{ts,tsx}'],
    ...typescript.recommended,
  },
  
  // React components
  {
    files: ['**/*.{jsx,tsx}'],
    ...react.recommended,
  },
  
  // Accessibility for components
  {
    files: ['src/components/**/*.{jsx,tsx}'],
    ...jsxA11y.recommended,
  }
);

Next.js with GraphQL

import * as canonical from 'eslint-config-canonical/canonical';
import * as typescript from 'eslint-config-canonical/typescript';
import * as react from 'eslint-config-canonical/react';
import * as next from 'eslint-config-canonical/next';
import * as graphql from 'eslint-config-canonical/graphql';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  canonical.recommended,
  
  // TypeScript files
  {
    files: ['**/*.{ts,tsx}'],
    ...typescript.recommended,
  },
  
  // React components
  {
    files: ['**/*.{jsx,tsx}'],
    ...react.recommended,
  },
  
  // Next.js pages and app directory
  {
    files: ['pages/**/*.{js,ts,jsx,tsx}', 'app/**/*.{js,ts,jsx,tsx}'],
    ...next.recommended,
  },
  
  // GraphQL files
  {
    files: ['**/*.{graphql,gql}'],
    ...graphql.recommended,
  }
);

Framework-Specific Considerations

React Hooks Dependencies

The React configuration automatically enforces proper hook dependencies:

// ✅ Correct - all dependencies included
useEffect(() => {
  fetchData(id, name);
}, [id, name]);

// ❌ Incorrect - missing dependency
useEffect(() => {
  fetchData(id, name);
}, [id]); // Missing 'name' dependency

Next.js Image Optimization

The Next.js configuration enforces proper image usage:

// ✅ Correct - using Next.js Image component
import Image from 'next/image';

<Image src="/photo.jpg" alt="Photo" width={500} height={300} />

// ❌ Incorrect - using regular img tag
<img src="/photo.jpg" alt="Photo" />

GraphQL Operation Naming

The GraphQL configuration enforces consistent naming:

# ✅ Correct - descriptive operation name
query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    name
    email
  }
}

# ❌ Incorrect - anonymous operation
query ($userId: ID!) {
  user(id: $userId) {
    name
    email
  }
}

Version

Tile

Files