CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt--eslint-config

ESLint config for Nuxt projects with flat config support and extensive customization options

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

core-configuration.mddocs/

Core Configuration

Primary function for creating Nuxt-optimized ESLint configurations with extensive customization options and automatic feature detection.

Capabilities

Create Configuration for Nuxt

Creates an array of ESLint flat configs for Nuxt 3 projects with intelligent defaults and extensive customization options.

/**
 * Create an array of ESLint flat configs for Nuxt 3, based on the given options.
 * Accepts appending user configs as rest arguments from the second argument.
 * 
 * For Nuxt apps, it's recommended to use @nuxt/eslint module instead.
 * @param options - Configuration options for features and directories
 * @param userConfigs - Additional user-provided configurations to append
 * @returns FlatConfigComposer for further configuration chaining
 */
function createConfigForNuxt(
  options?: NuxtESLintConfigOptions,
  ...userConfigs: ResolvableFlatConfig[]
): FlatConfigComposer;

interface NuxtESLintConfigOptions {
  /** Feature configuration options */
  features?: NuxtESLintFeaturesOptions;
  /** Directory structure configuration */
  dirs?: DirectoriesConfig;
}

Usage Examples:

import { createConfigForNuxt } from "@nuxt/eslint-config";

// Minimal configuration with all defaults
export default createConfigForNuxt();

// Enable TypeScript with strict rules
export default createConfigForNuxt({
  features: {
    typescript: {
      strict: true,
      tsconfigPath: "./tsconfig.json"
    }
  }
});

// Full-featured configuration
export default createConfigForNuxt({
  features: {
    standalone: true,
    typescript: true,
    stylistic: {
      indent: 2,
      quotes: "single",
      semi: false
    },
    tooling: {
      jsdoc: true,
      unicorn: true,
      regexp: true
    },
    formatters: {
      css: "prettier",
      html: "prettier",
      markdown: "dprint"
    },
    import: {
      package: "eslint-plugin-import-x"
    }
  },
  dirs: {
    src: ["./src", "./app"],
    components: ["./src/components", "./components"],
    pages: ["./src/pages", "./pages"]
  }
},
// Additional custom rules
{
  rules: {
    "no-console": "warn",
    "prefer-const": "error"
  }
});

Feature Configuration Options

Comprehensive configuration interface for enabling/disabling and customizing various ESLint features.

interface NuxtESLintFeaturesOptions {
  /**
   * Setup basic JavaScript, TypeScript and Vue plugins and rules.
   * You might want to disable it when using other ESLint config that handles basic setup.
   * @default true
   */
  standalone?: boolean;

  /**
   * Enable rules for Nuxt module authors or library authors.
   * @experimental Changes might not follow semver
   * @default false
   */
  tooling?: boolean | ToolingOptions;

  /**
   * Enable the import plugin
   * @default true
   */
  import?: boolean | ImportPluginOptions;

  /**
   * Enable stylistic ESLint rules for formatting and code style check
   * @see https://eslint.style/guide/config-presets
   * @default false
   */
  stylistic?: boolean | StylisticCustomizeOptions;

  /**
   * Enable formatters to handle formatting for different file types.
   * Requires eslint-plugin-format to be installed.
   * @default false
   */
  formatters?: boolean | OptionsFormatters;

  /**
   * Options for Nuxt specific rules
   */
  nuxt?: NuxtSpecificOptions;

  /**
   * Enable TypeScript support. Can also be an object to config the options.
   * By default it enables automatically when typescript is installed in the project.
   */
  typescript?: boolean | TypeScriptOptions;
}

interface ToolingOptions {
  /**
   * Enable RegExp rules
   * @see https://github.com/ota-meshi/eslint-plugin-regexp
   * @default true
   */
  regexp?: boolean;
  
  /**
   * Enable Unicorn rules
   * @see https://github.com/sindresorhus/eslint-plugin-unicorn
   * @default true
   */
  unicorn?: boolean;
  
  /**
   * Enable jsdoc rules
   * @default true
   */
  jsdoc?: boolean;
}

interface TypeScriptOptions {
  /**
   * Enable strict rules
   * @see https://typescript-eslint.io/users/configs#strict
   * @default true
   */
  strict?: boolean;
  
  /**
   * Path to the tsconfig file, when this is provided, type-aware rules will be enabled.
   */
  tsconfigPath?: string;
}

Directory Configuration

Configure directory structure for Nuxt project organization and rule application.

interface DirectoriesConfig {
  /** Nuxt source directory */
  src?: string[];
  /** Root directory for nuxt project */
  root?: string[];
  /** Directory for pages */
  pages?: string[];
  /** Directory for layouts */
  layouts?: string[];
  /** Directory for components */
  components?: string[];
  /** Directory for components with prefix (ignores vue/multi-word-component-names) */
  componentsPrefixed?: string[];
  /** Directory for composables */
  composables?: string[];
  /** Directory for plugins */
  plugins?: string[];
  /** Directory for modules */
  modules?: string[];
  /** Directory for middleware */
  middleware?: string[];
  /** Directory for server */
  servers?: string[];
}

Usage Examples:

// Custom directory structure
export default createConfigForNuxt({
  dirs: {
    root: ["."],
    src: ["./src"],
    pages: ["./src/pages"],
    components: ["./src/components", "./src/ui"],
    composables: ["./src/composables", "./src/utils"],
    plugins: ["./src/plugins"],
    middleware: ["./src/middleware"],
    servers: ["./src/server"]
  }
});

// Multi-app setup
export default createConfigForNuxt({
  dirs: {
    root: ["./apps/web", "./apps/admin"],
    src: ["./apps/web/src", "./apps/admin/src"],
    components: ["./shared/components", "./apps/*/components"]
  }
});

Nuxt-Specific Options

Configuration options specific to Nuxt projects and development patterns.

interface NuxtSpecificOptions {
  /**
   * Sort keys in nuxt.config to maintain a consistent order
   * @default true when features.stylistic is enabled
   */
  sortConfigKeys?: boolean;
}

Import Plugin Options

Configuration for the import/export linting plugin with support for different implementations.

interface ImportPluginOptions {
  /**
   * The import plugin to use
   * @default 'eslint-plugin-import-x'
   */
  package?: 'eslint-plugin-import-lite' | 'eslint-plugin-import-x';
}

Install with Tessl CLI

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

docs

configuration-options.md

core-configuration.md

flat-config-utilities.md

index.md

utility-functions.md

tile.json