@eslint-sets/eslint-config

English | 简体中文

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 | | | Vue 2 | | | React | | | TypeScript | | | Svelte | | | Next.js | | | Nuxt | | | Astro | | | Angular | | | UnoCSS | |

Features

• 🚀 ESLint v9 Flat Config - Uses the modern flat config format
• 🎨 @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
• 🔎 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

Supported Frameworks

| Framework | Auto-detect | Notes | | ---------- | :---------: | ----------------------------------------------- | | TypeScript | ✅ | Default enabled | | Vue | ✅ | Vue 2 & 3 support, with a11y option | | React | ✅ | With hooks, refresh, and React Compiler support | | Svelte | ✅ | Svelte 5 runes support in .svelte and TS files | | 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 |

Installation

# 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:

# 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 [email protected].

Quick Start

Using CLI (Recommended)

Run the interactive CLI to set up your project:

# 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:

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

export default eslintConfig()

Usage

With Options

// 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)
	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: 'auto' - 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: 'auto' - 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: 'auto' - 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,
})

Project Types

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

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

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.

// 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:

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

// 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 and enables the appropriate rules:

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

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

TypeScript Advanced Options

// 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:

// 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

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

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

React Project

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

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

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

Nuxt Project

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

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

Angular Project

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

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

Svelte Project

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

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

Astro Project

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

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

UnoCSS Project

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

export default eslintConfig({
	unocss: true,
})

Extending the Config

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:

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:

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:

# 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:

npx @eslint/config-inspector build

Individual Configs

You can also import individual configurations:

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

// 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

// 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

// 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

// 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

// 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

// 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

// 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)

// 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
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:

{
	"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 for release history.

License

MIT

Issues & Support

Please open an issue here.