# @eslint-sets/eslint-config

[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]

English | [简体中文](./README_CN.md)

Modern ESLint config with flat config support for Vue, React, Svelte, TypeScript, Next.js, Nuxt, Astro, Angular, UnoCSS and more.

## Quick Try

Try it online with StackBlitz:

| Framework | Link |
| --------- | ---- |
| Vue 3 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/vue3) |
| Vue 2 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/vue2) |
| React | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/react) |
| TypeScript | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/typescript) |
| Svelte | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/svelte) |
| Next.js | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/nextjs) |
| Nuxt | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/nuxt) |
| Astro | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/astro) |
| Angular | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/angular) |
| UnoCSS | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/eslint-sets/tree/master/examples/unocss) |

## Features

- 🚀 **ESLint v9 Flat Config** - Uses the modern flat config format
- 🔗 **FlatConfigComposer Chaining** - Chain `.append()`/`.prepend()`/`.renamePlugins()` directly on the config (v7.0.0+)
- 🎨 **@stylistic Integration** - Default formatting with `@stylistic/eslint-plugin` (no Prettier needed)
- 📝 **TypeScript TypeGen** - Auto-generated types for all rules with full IntelliSense support
- ✨ **Prettier Support** - Optional Prettier integration for those who prefer it
- 📦 **Auto-detection** - Automatically detects installed frameworks
- 🔧 **Highly Configurable** - Fine-grained control over enabled features
- 🙈 **Git Ignore Support** - Automatically read `.gitignore` patterns (default: on)
- 🛠️ **Disables Support** - Automatically disable strict rules in config files and script directories (`scripts/`, `tasks/`, `tools/`, `cli/`, `bin/`)
- 🖥️ **Command Support** - Relaxed rules for command-line scripts
- 🏷️ **Project Types** - Support for `app` and `lib` project types
- ♿ **Accessibility** - Optional a11y rules for Vue and React
- 📝 **Auto-sort** - Automatically sort package.json and tsconfig.json
- 🔍 **Editor Detection** - Automatically detect editor environment; CI and git hooks keep rules strict
- 🔎 **Config Inspector** - Visual tool for inspecting your ESLint config
- 📊 **Perfectionist Sorting** - Import/export sorting with natural ordering
- 🚀 **ESM-only** - Modern ESM package for optimal compatibility

- 🧪 **Comprehensive Testing** - Monorepo, E2E, and performance testing framework
- 🌐 **Monorepo Support** - First-class support for pnpm-workspace, Turborepo, and NX
- ⚙️ **languageOptions** - Custom ESLint language options support
- 📊 **Test Coverage Reports** - Automated coverage analysis with framework matrix and recommendations
- ⚡ **Performance Monitoring** - Comprehensive benchmarks for small/medium/large projects
- 🔍 **Rule Update Detection** - Automatic deprecated rule detection with migration suggestions
## Supported Frameworks

| Framework  | Auto-detect | Notes                                           |
| ---------- | :---------: | ----------------------------------------------- |
| TypeScript |     ✅      | Default enabled                                 |
| Vue        |     ✅      | Vue 2 & 3 support, with a11y option             |
| React      |     ❌      | Opt-in (v6.6.0+); `react: true` or `'auto'`; hooks, refresh, React Compiler |
| Svelte     |     ❌      | Opt-in (v6.6.0+); `svelte: true` or `'auto'`; Svelte 5 runes |
| Solid      |     ❌      |                                                 |
| Next.js    |     ✅      | Requires `@next/eslint-plugin-next`             |
| Nuxt       |     ✅      |                                                 |
| Astro      |     ✅      | Requires `eslint-plugin-astro`                  |
| Angular    |     ✅      | Requires `@angular-eslint/eslint-plugin`        |
| UnoCSS     |     ✅      | Requires `@unocss/eslint-plugin`                |

> [!NOTE]
> Since v6.6.0, only `vue` auto-detects. `react`/`svelte`/`solid` default to `false` (opt-in) to prevent Vue and React from both activating in hoisted monorepos, which caused false positives such as `react-refresh/only-export-components` firing on Vue projects' `.ts` files. Set `react: true` / `svelte: true` / `solid: true` to enable, or `'auto'` to restore detection.

## Installation

```shell
# use pnpm
pnpm install -D @eslint-sets/eslint-config eslint

# use npm
npm install -D @eslint-sets/eslint-config eslint

# use bun
bun add -D @eslint-sets/eslint-config eslint
```

> **Note for pnpm users**: ESLint 9.x requires `jiti` for TypeScript config files. If you use `eslint.config.ts`, ensure peer dependencies are installed:
> ```shell
> # Option 1: Add to .npmrc
> echo "auto-install-peers=true" >> .npmrc
>
> # Option 2: Install jiti manually
> pnpm add -D jiti
> ```

## Requirements

- **Node.js**: `^18.18.0` or `^20.9.0` or `>=21.1.0`
- **ESLint**: `^9.10.0` or `^9.22.0`
- **Config file**: Must use ESM format (`eslint.config.ts` or `eslint.config.mjs`)

> **Note**: This package is ESM-only. CommonJS config files (`eslint.config.cjs`, `eslint.config.js` without `"type": "module"`) are not supported. This is required because core dependencies like `@stylistic/eslint-plugin` are ESM-only.

> Note: `eslint-plugin-toml` requires Node.js `^20.19.0 || ^22.13.0 || >=24`. If you need TOML support on Node.js 18, consider downgrading to `eslint-plugin-toml@0.13.1`.
>
> Note: `eslint-plugin-jsdoc` is pinned to `~50.8.0`. Versions `51.0.0+` use the ES2024 `v` (unicodeSets) regex flag and require Node.js `>=20.11.0`; the pin keeps JSDoc rules working on Node.js 18.

## Quick Start

### Using CLI (Recommended)

Run the interactive CLI to set up your project:

```shell
# use pnpm
pnpm dlx @eslint-sets/eslint-config

# use npm
npx @eslint-sets/eslint-config

# use bun
bunx @eslint-sets/eslint-config
```

The CLI will guide you through:

- Project type selection (Application/Library)
- TypeScript support
- Framework selection (Vue, React, Svelte, Solid, Next.js, Nuxt, Astro, Angular, UnoCSS)
- Accessibility options
- Formatter choice (Prettier/Stylistic)
- Additional options (.gitignore, auto-sort, etc.)

### Manual Setup

Create an `eslint.config.ts` file in your project root:

```typescript
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig()
```

## Usage

### Chaining (v7.0.0+)

`eslintConfig()` returns a `FlatConfigComposer` (extends `Promise<Linter.Config[]>`), so you can chain methods directly:

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({ vue: true })
  .append({ name: 'my-overrides', rules: { 'no-console': 'off' } })
  .prepend({ rules: { 'no-debugger': 'error' } })
  .renamePlugins({ 'import-lite': 'import' })
```

`export default eslintConfig(...)` still works unchanged — ESLint awaits the composer to a config array at load time. Available methods: `.append()`, `.prepend()`, `.insert()`, `.replace()`, `.renamePlugins()`.

### With Options

```typescript
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	// Angular support (default: 'auto' - auto-detect)
	angular: true,

	// Astro support (default: 'auto' - auto-detect)
	astro: true,

	// Relax rules for scripts (default: true)
	// Applies to: scripts/**, bin/**, cli/**, tasks/**, tools/**
	// Allows: console, process.exit, process.env, shebang, require, etc.
	command: true,
	// Disable rules in config files (default: true)
	disables: true,

	// ESLint directive comments rules (default: true)
	comments: true,

	// JSDoc rules (default: true)
	jsdoc: true,

	// External formatters (default: false)
	formatters: {
		css: 'prettier',
		graphql: 'prettier',
		html: 'prettier',
		markdown: 'prettier',
		svg: 'prettier',
		xml: 'prettier',
	},

	// Auto-read .gitignore (default: true)
	// (parseGitignore/findGitignore/getGitignorePatterns are deprecated v6.6.0, removed v7.0.0; use this option instead)
	gitignore: true,

	// Files to ignore
	ignores: ['**/dist/**', '**/node_modules/**'],

	// Or modify defaults:
	ignores: (defaults) => [...defaults, '**/custom/**'],

	// Import rules (default: true)
	imports: true,

	// JSON/JSONC support (default: true)
	jsonc: true,

	// JSX support with optional a11y (default: false)
	jsx: true,
	// Or with a11y:
	// jsx: { a11y: true },

	// Markdown support (default: true)
	markdown: true,

	// Next.js support (default: 'auto' - auto-detect)
	nextjs: true,
	// Node.js rules (default: true)
	node: true,

	// Nuxt support (default: 'auto' - auto-detect)
	nuxt: true,

	// Perfectionist sorting (default: true)
	perfectionist: true,

	// pnpm workspace support (default: false)
	pnpm: true,

	// Prettier integration (default: false)
	// Note: Must set stylistic: false to use prettier
	prettier: false,

	// React support (default: false - opt-in, v6.6.0+; use 'auto' to auto-detect)
	react: true,

	// Or with options:
	react: {
		reactCompiler: true, // React Compiler support
		rsc: true, // RSC (React Server Components) rules (default: true)
	},

	// Regexp rules (default: true)
	regexp: true,

	// Custom rule overrides
	rules: {
		'no-console': 'off',
	},

	// Solid support (default: false - opt-in, v6.6.0+; use 'auto' to auto-detect)
	solid: true,

	// Auto-sort package.json (default: true)
	sortPackageJson: true,

	// Auto-sort tsconfig.json (default: true)
	sortTsconfig: true,

	// Stylistic formatting (default: true)
	// Uses @stylistic/eslint-plugin for code formatting
	stylistic: true,

	// Or with custom options:
	stylistic: {
		arrowParens: false, // true (always) | false (avoid) - default: false
		braceStyle: '1tbs', // '1tbs' | 'stroustrup' | 'allman' - default: '1tbs'
		bracketSpacing: true, // boolean - default: true
		indent: 2, // 'tab' | number - default: 2
		jsxQuotes: 'prefer-double', // 'prefer-double' | 'prefer-single' - default: 'prefer-double'
		quoteProps: 'as-needed', // 'always' | 'as-needed' | 'consistent' | 'consistent-as-needed' - default: 'as-needed'
		quotes: 'single', // 'single' | 'double' - default: 'single'
		semi: false, // boolean - default: false
		trailingComma: 'always-multiline', // 'none' | 'always' | 'never' | 'only-multiline' | 'always-multiline' - default: 'always-multiline'
	},

	// Svelte support (default: false - opt-in, v6.6.0+; use 'auto' to auto-detect)
	svelte: true,

	// Test file support (default: true)
	test: true,

	// Project type: 'app' (default) or 'lib'
	type: 'lib',

	// TypeScript support (default: true)
	typescript: true,

	// Unicorn rules (default: true)
	unicorn: true,

	// UnoCSS support (default: 'auto' - auto-detect)
	unocss: true,

	// Vue support (default: 'auto' - auto-detect)
	vue: true,
	// Or with options:
	vue: {
		a11y: true, // Enable accessibility rules
		vueVersion: 3,
	},

	// YAML support (default: true)
	yaml: true,

	// Custom language options (ESLint languageOptions)
	// Useful for adding framework-specific globals
	languageOptions: {
		globals: {
			// Example: Taro framework globals
			defineAppConfig: 'readonly',
			definePageConfig: 'readonly',
			// Custom global variables
			myGlobal: 'writable',
			},
		parserOptions: {
			ecmaVersion: 2024,
			sourceType: 'module',
			},
		},
})
```

### Project Types

```typescript
// Application project (default)
export default eslintConfig({
	type: 'app',
})

// Library project - stricter rules
export default eslintConfig({
	type: 'lib',
})
```


### Custom Language Options

Add custom globals and parser options for framework-specific scenarios:

```typescript
export default eslintConfig({
  vue: true,
  typescript: true,
  languageOptions: {
    globals: {
      // Taro framework globals
      defineAppConfig: 'readonly',
      definePageConfig: 'readonly',
      // Custom global variables
      myGlobal: 'writable',
    },
    parserOptions: {
      ecmaVersion: 2024,
      sourceType: 'module',
    },
  },
})
```

**Key Features**:
- **Smart Merging**: Custom `globals` are intelligently merged into all relevant configurations (javascript, vue, react, etc.)
- **Framework Globals**: Perfect for adding framework-specific globals like Taro's `definePageConfig`
- **Full Control**: Supports all ESLint `languageOptions` properties

**Common Use Cases**:
- Taro: `defineAppConfig`, `definePageConfig`
- Uni-app: `uni`, `plus`
- WeChat miniprogram: `wx`, `App`, `Page`
- Custom environment variables

### Stylistic vs Prettier

This config supports two formatting approaches:

1. **Stylistic** (default): Uses `@stylistic/eslint-plugin` for pure ESLint-based formatting - no additional tool needed.
2. **Prettier**: Uses `eslint-plugin-prettier` to integrate Prettier with ESLint.

```typescript
// Use Stylistic (default)
export default eslintConfig({
	stylistic: true, // or just use defaults
})

// Use Stylistic with custom options
export default eslintConfig({
	stylistic: {
		arrowParens: false, // true (always) | false (avoid)
		braceStyle: '1tbs', // '1tbs' | 'stroustrup' | 'allman'
		bracketSpacing: true, // boolean
		indent: 2, // 'tab' | number
		jsxQuotes: 'prefer-double', // 'prefer-double' | 'prefer-single'
		quoteProps: 'as-needed', // 'always' | 'as-needed' | 'consistent' | 'consistent-as-needed'
		quotes: 'single', // 'single' | 'double'
		semi: false, // boolean
		trailingComma: 'always-multiline', // 'none' | 'always' | 'never' | 'only-multiline' | 'always-multiline'
	},
})

// Use Prettier instead (must disable stylistic)
export default eslintConfig({
	prettier: true,
	stylistic: false,
})

// Use Prettier with custom options
export default eslintConfig({
	prettier: {
		printWidth: 100,
		semi: false,
		singleQuote: true,
		tabWidth: 2,
		trailingComma: 'all',
		useTabs: false,
	},
	stylistic: false,
})
```

**Note**: Stylistic and Prettier are mutually exclusive. When `stylistic` is enabled (default), Prettier is automatically disabled.

### Default Rule Behaviors

This config follows modern best practices with sensible defaults:

- **No line length limit**: `@stylistic/max-len` is not configured by default, allowing flexible line lengths
- **Use global Buffer/process**: `n/prefer-global/buffer` and `n/prefer-global/process` are set to `'always'`, allowing direct use of global variables
- **Flexible unused expressions**: `ts/no-unused-expressions` allows short-circuit evaluation, ternary expressions, and tagged templates
- **Mixed operators grouping**: `@stylistic/no-mixed-operators` groups operators by category (comparison, logical, in/instanceof) for clearer code

You can override these defaults in your config:

```typescript
export default eslintConfig({
	rules: {
		// Add line length limit if needed
		'@stylistic/max-len': ['error', { code: 100 }],

		// Prefer imports over globals
		'n/prefer-global/buffer': ['error', 'never'],
		'n/prefer-global/process': ['error', 'never'],
	},
})
```

### Accessibility Rules

```typescript
// Vue accessibility
export default eslintConfig({
	vue: {
		a11y: true,
	},
})

// JSX accessibility
export default eslintConfig({
	jsx: {
		a11y: true,
	},
})
```

### Auto-Detection

By default, the config auto-detects installed frameworks (only `vue` since v6.6.0; `react`/`svelte`/`solid` are opt-in) and enables the appropriate rules:

```typescript
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	autoDetect: true, // Enable auto-detection (default: true)
})
```

### TypeScript Advanced Options

```typescript
// Type-aware rules (requires tsconfig.json)
export default eslintConfig({
	typescript: {
		typeAware: true,
		tsconfigPath: './tsconfig.json',
		overridesTypeAware: {
			'ts/no-floating-promises': 'warn',
		},
	},
})

// Library project with explicit return types
export default eslintConfig({
	type: 'lib', // Enables ts/explicit-function-return-type
	typescript: true,
})

// Erasable syntax only (for libraries that want type-only constructs)
export default eslintConfig({
	typescript: {
		erasableOnly: true, // Requires eslint-plugin-erasable-syntax-only
	},
})
```

### Disabling Stylistic Rules per Config

You can disable stylistic rules for specific configs:

```typescript
// Disable stylistic rules for JSON files
export default eslintConfig({
	jsonc: { stylistic: false },
	yaml: { stylistic: false },
	toml: { stylistic: false },
	vue: { stylistic: false },
})
```

### Framework-Specific Configurations

#### Vue Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	type: 'lib',
	typescript: true,
	vue: {
		a11y: true,
		vueVersion: 3,
	},
})
```

#### React Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	react: {
		reactCompiler: true,
		rsc: true, // RSC rules for React Server Components
	},
	typescript: true,
})
```

#### Next.js Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	nextjs: true,
	react: true,
	typescript: true,
})
```

#### Nuxt Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	nuxt: true,
	typescript: true,
	vue: true,
})
```

#### Angular Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	angular: true,
	typescript: true,
})
```

#### Svelte Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	svelte: true,
	typescript: true,
})
```

#### Astro Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	astro: true,
	typescript: true,
})
```

#### UnoCSS Project

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	unocss: true,
})
```

### Extending the Config

```typescript
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	extends: [
		// Additional flat configs
	],
	rules: {
		// Override rules
	},
})
```

## TypeScript Support

This package provides full TypeScript support with auto-generated types:

```typescript
import type { TypedFlatConfigItem, Rules, RuleOptions, ConfigNames } from '@eslint-sets/eslint-config'

// TypedFlatConfigItem - Full type checking for config objects
const myConfig: TypedFlatConfigItem = {
	name: 'my-config',
	rules: {
		'no-console': 'off',
		'@stylistic/semi': ['error', 'always'], // IDE shows available options
	},
}

// Rules - All available rule names with type checking
const myRules: Rules = {
	'no-console': 'off',
}

// ConfigNames - All available config names
type MyConfigs = ConfigNames // 'eslint-sets/javascript' | 'eslint-sets/vue' | ...
```

### Regenerating Types

If you're contributing to this package, regenerate types after adding new plugins:

```shell
pnpm run gen
```

This generates `src/typegen.d.ts` with all rule types.

## Config Inspector

Visualize and debug your ESLint configuration using the built-in Config Inspector:

```shell
# Run the inspector
npx @eslint/config-inspector

# Or using pnpm
pnpm inspector
```

Visit http://localhost:7777/ to view and interact with your ESLint config. The inspector shows:

- All configured rules and their sources
- File patterns and their matching configs
- Plugin information
- Rule configurations

You can also build a static version for sharing:

```shell
npx @eslint/config-inspector build
```

## Individual Configs

You can also import individual configurations:

```typescript
import {
	javascript,
	typescript,
	vue,
	react,
	svelte,
	solid,
	jsonc,
	yaml,
	markdown,
	toml,
	imports,
	unicorn,
	perfectionist,
	regexp,
	test,
	node,
	prettier,
	stylistic,
	disables,
	command,
	comments,
	jsdoc,
	jsx,
	nextjs,
	nuxt,
	astro,
	angular,
	unocss,
	pnpm,
	formatters,
	sortPackageJson,
	sortTsconfig,
} from '@eslint-sets/eslint-config'
```

## Peer Dependencies

| Package    | Version                                     |
| ---------- | ------------------------------------------- |
| eslint     | ^9.10.0 or ^9.22.0                          |
| prettier   | ^3.5.3 (optional, for Prettier integration) |
| typescript | >=5.0.0 (optional, for TypeScript support)  |

> **Note**: ESLint 9.x requires `jiti` for loading TypeScript config files. It's automatically installed as ESLint's peer dependency with npm/yarn, but pnpm users may need to enable `auto-install-peers` or use `--shamefully-hoist`.

## System Requirements

| Requirement | Version                                  |
| ----------- | ---------------------------------------- |
| Node.js     | ^18.18.0 or ^20.9.0 or >=21.1.0          |
| ESLint      | ^9.10.0 or ^9.22.0                       |

## Optional Dependencies

The following packages are optional and will be used if installed:

### React

- `@eslint-react/eslint-plugin` - Modern React linting (includes core, dom, web-api, hooks-extra, naming-convention, debug)
- `eslint-plugin-react-refresh` - React Refresh support

### Vue

- `eslint-plugin-vuejs-accessibility` - Vue accessibility rules

### Svelte

- `eslint-plugin-svelte` - Svelte support
- `svelte` - Svelte parser
- `svelte-eslint-parser` - Svelte ESLint parser

### Next.js

- `@next/eslint-plugin-next` - Next.js specific rules

### Astro

- `eslint-plugin-astro` - Astro support
- `astro-eslint-parser` - Astro ESLint parser

### Angular

- `@angular-eslint/eslint-plugin` - Angular support
- `@angular-eslint/eslint-plugin-template` - Angular template rules
- `@angular-eslint/template-parser` - Angular template parser

### UnoCSS

- `@unocss/eslint-plugin` - UnoCSS rules

### Accessibility

- `eslint-plugin-jsx-a11y` - JSX accessibility rules

### Workspace

- `eslint-plugin-pnpm` - pnpm workspace rules

### Formatters

- `eslint-plugin-format` - External formatters for CSS, HTML, etc.

### Markdown

- `@eslint/markdown` - Markdown linting

## Migration from v5

If you're migrating from the old `@eslint-sets/eslint-config-*` packages, all sub-packages have been merged into a single package `@eslint-sets/eslint-config`.

### Migration Map

| Old Package (v5) | New Config (v6) |
| ---------------- | --------------- |
| `@eslint-sets/eslint-config-basic` | `eslintConfig()` (default) |
| `@eslint-sets/eslint-config-ts` | `eslintConfig({ typescript: true })` |
| `@eslint-sets/eslint-config-vue` | `eslintConfig({ vue: true })` |
| `@eslint-sets/eslint-config-vue3` | `eslintConfig({ vue: { vueVersion: 3 } })` |
| `@eslint-sets/eslint-config-react` | `eslintConfig({ react: true })` |
| `@eslint-sets/eslint-config-svelte` | `eslintConfig({ svelte: true })` |
| `@eslint-sets/eslint-config-nuxt` | `eslintConfig({ nuxt: true, vue: true })` |
| `@eslint-sets/eslint-config-egg` | `eslintConfig({ node: true, typescript: true })` |

### Basic

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-basic',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig()
```

### TypeScript

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-ts',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	typescript: true,
})
```

### Vue 2

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-vue',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	vue: {
		vueVersion: 2,
	},
})
```

### Vue 3

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-vue3',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	vue: {
		vueVersion: 3,
	},
})
```

### React

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-react',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	react: true,
})
```

### Svelte

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-svelte',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	svelte: true,
})
```

### Nuxt

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-nuxt',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	nuxt: true,
	vue: true,
})
```

### Egg (Node.js)

```javascript
// Before (v5)
// .eslintrc.js
module.exports = {
	extends: '@eslint-sets/eslint-config-egg',
}

// After (v6)
// eslint.config.ts
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig({
	node: true,
	typescript: true,
})
```

### Key Changes in v6

1. **Flat Config**: v6 uses ESLint's new flat config format (`eslint.config.ts` instead of `.eslintrc.js`)
2. **ESM-only**: Package is now pure ESM, requires `eslint.config.ts` or `eslint.config.mjs`
3. **Single Package**: All sub-packages merged into one package
4. **Auto-detection**: Frameworks are auto-detected by default (since v6.6.0, only `vue` auto-detects; `react`/`svelte`/`solid` are opt-in)
5. **Stylistic**: Default formatting uses `@stylistic/eslint-plugin` instead of Prettier
6. **TypeScript Types**: Auto-generated types for all rules

## VS Code Integration

Add to your `.vscode/settings.json`:

```json
{
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	"eslint.experimental.useFlatConfig": true,
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"typescript",
		"typescriptreact",
		"vue",
		"html",
		"markdown",
		"json",
		"jsonc",
		"yaml",
		"toml",
		"astro",
		"svelte"
	]
}
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md) for release history.

## License

[MIT](LICENSE)

## Issues & Support

Please open an issue [here](https://github.com/saqqdy/eslint-sets/issues).

[npm-image]: https://img.shields.io/npm/v/@eslint-sets/eslint-config.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@eslint-sets/eslint-config
[license-image]: https://img.shields.io/badge/License-MIT-blue.svg
[license-url]: LICENSE