tessl/npm-nuxt--eslint

Generate ESLint config from current Nuxt settings

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Development Server Integration

Name: tessl/npm-nuxt--eslint
Author: tessl

Real-time ESLint checking during development with Vite or Webpack integration. The module provides seamless integration with your development workflow, showing linting errors and warnings directly in your terminal and browser during development.

Capabilities

Checker Options

Configuration options for ESLint checker integration with the development server.

/**
 * Configuration options for ESLint checker integration
 */
interface CheckerOptions {
  /**
   * Use ESLint cache to improve performance
   * @default true
   */
  cache?: boolean;

  /**
   * ESLint config type
   * Default to `flat` unless env `ESLINT_USE_FLAT_CONFIG` is set to `false`
   * @default 'flat'
   */
  configType?: 'flat' | 'eslintrc';

  /**
   * Files to include for linting
   * @default [`${nuxt.options.srcDir}/**/*.{js,jsx,ts,tsx,vue}`]
   */
  include?: string[];

  /**
   * Files to exclude from linting
   * @default ['**/node_modules/**', nuxt.options.buildDir]
   */
  exclude?: string[];

  /**
   * ESLint formatter for the output
   * @default 'stylish'
   * @see https://eslint.org/docs/user-guide/formatters/
   */
  formatter?: string;

  /**
   * Path to the ESLint module
   * @default 'eslint' or 'eslint/use-at-your-own-risk' based on configType
   */
  eslintPath?: string;

  /**
   * Lint on start
   * @default true
   */
  lintOnStart?: boolean;

  /**
   * The warnings found will printed
   * @default true
   */
  emitWarning?: boolean;

  /**
   * The errors found will printed
   * @default true
   */
  emitError?: boolean;

  /**
   * Run ESLint fix
   * @default false
   */
  fix?: boolean;

  /**
   * Vite specific options
   */
  vite?: ViteCheckerOptions;

  /**
   * Webpack specific options
   * @see https://www.npmjs.com/package/eslint-webpack-plugin
   */
  webpack?: WebpackCheckerOptions;
}

Vite Integration

For projects using Nuxt with Vite, the module integrates with vite-plugin-eslint2.

/**
 * Vite-specific ESLint integration options
 * Extends vite-plugin-eslint2 options
 */
interface ViteCheckerOptions {
  /** Run linting in a worker thread */
  lintInWorker?: boolean;
  /** Additional vite-plugin-eslint2 specific options */
  [key: string]: any;
}

Usage Examples:

// Basic Vite integration
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    checker: {
      vite: {
        lintInWorker: true
      }
    }
  }
})

Webpack Integration

For projects using Nuxt with Webpack, the module integrates with eslint-webpack-plugin.

/**
 * Webpack-specific ESLint integration options
 * Uses eslint-webpack-plugin under the hood
 */
interface WebpackCheckerOptions {
  /** Context directory for linting */
  context?: string;
  /** Files pattern to lint */
  files?: string[];
  /** Only lint changed files */
  lintDirtyModulesOnly?: boolean;
  /** Additional eslint-webpack-plugin options */
  [key: string]: any;
}

Usage Examples:

// Basic Webpack integration  
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    checker: {
      webpack: {
        lintDirtyModulesOnly: true
      }
    }
  }
})

Config Type Detection

The module automatically detects which ESLint config format to use.

/**
 * ESLint configuration format detection
 */
type ConfigType = 'flat' | 'eslintrc';

/**
 * Automatic config type detection based on environment
 * Defaults to 'flat' unless ESLINT_USE_FLAT_CONFIG=false
 */
function detectConfigType(): ConfigType;

File Watching

The module automatically watches ESLint configuration files for changes.

/**
 * ESLint config files that are watched for changes
 */
const watchedConfigFiles: string[] = [
  '.eslintignore',
  '.eslintrc',
  '.eslintrc.js', 
  '.eslintrc.yaml',
  '.eslintrc.yml',
  '.eslintrc.json',
  'eslint.config.js',
  'eslint.config.mjs', 
  'eslint.config.cjs'
];

Usage Examples:

// Enable checker with custom file patterns
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    checker: {
      include: ['src/**/*.{ts,vue}'],
      exclude: ['src/generated/**'],
      formatter: 'unix',
      fix: true
    }
  }
})

// Checker with different config type
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    checker: {
      configType: 'eslintrc',
      eslintPath: 'eslint'
    }
  }
})

// Disable warnings, only show errors
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    checker: {
      emitWarning: false,
      emitError: true,
      lintOnStart: false
    }
  }
})

Integration Process

Builder Detection: Module detects whether Vite or Webpack is being used
Plugin Registration: Appropriate ESLint plugin is registered with the builder
Option Processing: Checker options are processed and validated
File Watching: ESLint config files are added to the watch list
Error Handling: Linting errors and warnings are displayed in development

Development Workflow

The checker integration enhances the development workflow:

Real-time Feedback: ESLint errors appear in terminal and browser
Auto-fixing: Optional automatic fixing of ESLint issues
Performance: Caching and worker threads for better performance
Config Hot-reload: Automatic restart suggestions when config changes

Builder Support

The module automatically detects the build system and integrates appropriately:

Supported Builders

@nuxt/vite-builder: Uses vite-plugin-eslint2 for integration
@nuxt/webpack-builder: Uses eslint-webpack-plugin for integration

Builder Detection

/**
 * Builder detection based on Nuxt configuration
 * Automatically determines which ESLint integration to use
 */
interface BuilderDetection {
  /** Detected builder name */
  builder: '@nuxt/vite-builder' | '@nuxt/webpack-builder' | 'unknown';
  /** Whether ESLint integration is supported */
  supported: boolean;
  /** Integration plugin to use */
  plugin?: 'vite-plugin-eslint2' | 'eslint-webpack-plugin';
}