tessl/npm-eslint-config-canonical

Canonical ESLint Shareable Config providing comprehensive code style guide with 1,000+ rules for JavaScript/TypeScript projects

—

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

Framework Configurations

Name: tessl/npm-eslint-config-canonical
Author: tessl

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

Install with Tessl CLI

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

docs

auto-configuration.md

core-configurations.md

framework-configurations.md

index.md

testing-configurations.md

utility-configurations.md

tile.json

tessl/npm-eslint-config-canonical