CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@nuxt/eslint

@nuxt/eslint is an all-in-one ESLint integration for Nuxt applications that generates project-aware ESLint flat configuration files. It automatically detects Nuxt project settings and creates appropriate ESLint configurations, with optional development server integration for real-time linting. The module serves as a bridge between Nuxt's development environment and ESLint's code quality checks, offering seamless integration that adapts to the specific requirements of each Nuxt project.

Package Information

  • Package Name: @nuxt/eslint
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @nuxt/eslint

Core Imports

import { defineNuxtConfig } from "@nuxt/nuxt/config";

Basic Usage

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    config: {
      autoInit: true,
      configFile: '.nuxt/eslint.config.mjs'
    },
    checker: {
      lintOnStart: true,
      emitWarning: true,
      emitError: true
    }
  }
})

Architecture

@nuxt/eslint is built around several key components:

  • Module Registration: Nuxt module that integrates with the Nuxt build system
  • Config Generation: Automatic generation of ESLint flat configs based on project structure
  • Development Server Integration: Optional real-time linting during development
  • DevTools Integration: ESLint config inspector integration with Nuxt DevTools
  • Hook System: Extensible addon system for custom ESLint configurations

Capabilities

Module Configuration

Core module options and setup for integrating ESLint with Nuxt applications.

interface ModuleOptions {
  /** Options for ESLint flat config generation (.nuxt/eslint.config.mjs) */
  config?: ConfigGenOptions | boolean;
  /** Enable ESLint checker align with dev server or build process */
  checker?: CheckerOptions | boolean;
}

Module Configuration

Config Generation

Automatic ESLint configuration generation based on Nuxt project structure and settings.

interface ConfigGenOptions extends NuxtESLintFeaturesOptions {
  /** File path to the generated ESLint config */
  configFile?: string;
  /** Create `eslint.config.mjs` file automatically if not exists */
  autoInit?: boolean;
  /** Override rootDir for the generated ESLint config */
  rootDir?: string;
  /** Options for DevTools integration */
  devtools?: DevToolsOptions;
}

interface DevToolsOptions {
  /** Enable ESLint config inspector in DevTools */
  enabled?: boolean | 'lazy';
  /** Port for the ESLint config inspector */
  port?: number;
}

Config Generation

Development Server Integration

Real-time ESLint checking during development with Vite or Webpack integration.

interface CheckerOptions {
  /** Use ESLint cache to improve performance */
  cache?: boolean;
  /** ESLint config type */
  configType?: 'flat' | 'eslintrc';
  /** Files to include for linting */
  include?: string[];
  /** Files to exclude from linting */
  exclude?: string[];
  /** ESLint formatter for the output */
  formatter?: string;
  /** Path to the ESLint module */
  eslintPath?: string;
  /** Lint on start */
  lintOnStart?: boolean;
  /** The warnings found will printed */
  emitWarning?: boolean;
  /** The errors found will printed */
  emitError?: boolean;
  /** Run ESLint fix */
  fix?: boolean;
  /** Vite specific options */
  vite?: ViteCheckerOptions;
  /** Webpack specific options */
  webpack?: WebpackCheckerOptions;
}

Development Server Integration

Extensibility

Hook system and addon support for extending ESLint configuration.

interface ESLintConfigGenAddon {
  name: string;
  getConfigs: () => Awaitable<ESLintConfigGenAddonResult | undefined>;
}

interface ESLintConfigGenAddonResult {
  /** Imports statements to add to the generated ESLint config */
  imports?: Import[];
  /** Flat config items, should be stringified lines */
  configs?: string[];
}

type Awaitable<T> = T | Promise<T>;

Extensibility

Types

type Awaitable<T> = T | Promise<T>;

interface Import {
  from: string;
  name: string;
  as?: string;
}

// External types from dependencies
interface NuxtESLintFeaturesOptions {
  /** Setup basic JavaScript, TypeScript and Vue plugins and rules */
  standalone?: boolean;
  /** Enable rules for Nuxt module authors or library authors */
  tooling?: boolean | ToolingOptions;
  /** Enable the import plugin */
  import?: boolean | ImportPluginOptions;
  /** Enable stylistic ESLint rules for formatting and code style check */
  stylistic?: boolean | StylisticCustomizeOptions;
  /** Enable formatters to handling formatting for different file types */
  formatters?: boolean | OptionsFormatters;
  /** Options for Nuxt specific rules */
  nuxt?: NuxtSpecificOptions;
  /** Enable TypeScript support */
  typescript?: boolean | {
    strict?: boolean;
    tsconfigPath?: string;
  };
}

interface ViteCheckerOptions {
  /** Run linting in a worker thread */
  lintInWorker?: boolean;
  [key: string]: any;
}

interface WebpackCheckerOptions {
  /** Context directory for linting */
  context?: string;
  /** Files pattern to lint */
  files?: string[];
  /** Only lint changed files */
  lintDirtyModulesOnly?: boolean;
  [key: string]: any;
}

interface FlatConfigComposer {
  /** Clone the composer */
  clone(): FlatConfigComposer;
  /** Append configurations */
  append(...configs: any[]): FlatConfigComposer;
  /** Execute callback when resolved */
  onResolved(callback: (configs: any[]) => void): FlatConfigComposer;
}

interface NuxtESLintConfigOptionsResolved {
  features: any;
  dirs: any;
}

// Configuration option types from @nuxt/eslint-config/flat
interface ToolingOptions {
  [key: string]: any;
}

interface ImportPluginOptions {
  [key: string]: any;
}

interface StylisticCustomizeOptions {
  [key: string]: any;
}

interface OptionsFormatters {
  [key: string]: any;
}

interface NuxtSpecificOptions {
  [key: string]: any;
}

docs

config-generation.md

dev-server-integration.md

extensibility.md

index.md

module-configuration.md

tile.json