Configuration

Configure ESLint for your project with flexible presets and custom rules.

Overview

The @nobears-front-end/eslint package provides a flexible configuration system for ESLint that combines Antfu ESLint settings with custom presets and user-defined configurations. This allows you to quickly set up consistent linting across your projects while maintaining the flexibility to customize rules as needed.

Basic Configuration

The simplest configuration uses the default settings:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory();

Preset Configurations

The package provides three preset configurations optimized for different project types:

Nuxt Application (`nuxt-app`)

Optimized for full Nuxt applications with Vue components, TypeScript, and Nuxt-specific features:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory({
  preset: "nuxt-app",
});

Includes:

Vue 3 component rules
TypeScript support
Nuxt-specific optimizations
Import/export rules
Stylistic rules

Nuxt Module (`nuxt-module`)

Designed for Nuxt modules and packages:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory({
  preset: "nuxt-module",
});

Includes:

Module-specific rules
Package.json validation
Export/import optimizations
TypeScript declarations

TypeScript Library (`ts-lib`)

Optimized for standalone TypeScript libraries:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory({
  preset: "ts-lib",
});

Includes:

TypeScript strict rules
Library export rules

Custom Antfu Configuration

For the full list of options for the antfu property, see the Antfu ESLint Config documentation.

You can customize the underlying Antfu ESLint configuration by passing options to the antfu property:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory({
  preset: "nuxt-app",
  antfu: {
    ignores: ["dist", "node_modules", "*.yaml", "*.yml", "workflows/ci.yml", ".gitlab-ci.yml", ".release-it.ts", "*.md"],
    stylistic: {
      indent: 4,
      quotes: "double",
      semi: true,
    },
    rules: {
      "no-console": "warn",
      "vue/multi-word-component-names": "off",
    },
  },
});

Adding Custom Configurations

You can extend the base configuration with additional ESLint configurations:

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory(
  {
    preset: "nuxt-app",
    antfu: {
      ignores: ["dist", "node_modules", "*.yaml", "*.yml", "workflows/ci.yml", ".gitlab-ci.yml", ".release-it.ts", "*.md"],
    },
  },
  // Custom configuration for test files
  {
    files: ["**/*.test.ts", "**/*.spec.ts"],
    rules: {
      "no-console": "off",
      "test/prefer-lowercase-title": ["error", {
        ignore: ["describe"],
      }],
    },
  },
  // Custom configuration for markdown files
  {
    files: ["**/*.md"],
    ignores: ["**/*.md"],
  },
);

Advanced Configuration Examples

With Vue I18n Plugin

eslint.config.js

import vueI18n from "@intlify/eslint-plugin-vue-i18n";
import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory(
  {
    preset: "nuxt-app",
    antfu: {
      ignores: ["dist", "node_modules", "*.yaml", "*.yml", "workflows/ci.yml", ".gitlab-ci.yml", ".release-it.ts", "*.md"],
    },
  },
  ...vueI18n.configs.recommended,
  {
    rules: {},
    settings: {
      "vue-i18n": {
        localeDir: "./src/i18n/messages/*.{ts}",
      },
      "messageSyntaxVersion": "^11.0.0",
    },
  },
);

With Custom TypeScript Rules

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory(
  {
    preset: "nuxt-app",
    antfu: {
      rules: {
        "ts/no-explicit-any": "warn",
        "ts/no-unused-vars": ["error", { 
          vars: "all", 
          args: "none", 
          ignoreRestSiblings: true 
        }],
        "ts/consistent-type-definitions": "off",
      },
    },
  },
  {
    files: ["**/*.d.ts"],
    rules: {
      "ts/no-explicit-any": "off",
    },
  },
);

With Custom Import Rules

eslint.config.js

import { eslintFactory } from "@nobears-front-end/eslint";

export default eslintFactory(
  {
    preset: "nuxt-app",
    antfu: {
      rules: {
        "import/order": ["error", {
          "groups": [
            "builtin",
            "external",
            "internal",
            "parent",
            "sibling",
            "index"
          ],
          "newlines-between": "always",
          "alphabetize": {
            "order": "asc",
            "caseInsensitive": true
          }
        }],
        "import/no-duplicates": "error",
      },
    },
  },
);

Nuxt Integration

When using with Nuxt, you can configure ESLint in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  eslint: {
    config: {
      stylistic: {
        indent: 4,
        quotes: "double",
        semi: true,
      },
      standalone: false,
      autoInit: false,
    },
  },
});

Installation

Get started with eslint.

Usage

Learn how to use the eslint package.