@king-3/eslint-config

king3's ESLint config preset.

English | 中文

Features

• 🚀 Flat config, compose easily
• ✨ Auto-detect TypeScript, Vue, React support
• 🎨 Works seamlessly with Prettier
• 📦 Optional configs for UnoCSS, React, and more
• 🔧 Reasonable defaults, easy to customize

Installation

Quick Setup

pnpm add -D eslint @king-3/eslint-config

Create eslint.config.mjs in your project root:

// eslint.config.mjs
import king3 from '@king-3/eslint-config'

export default king3()

Add Scripts

Add the following scripts to your package.json:

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Customization

Basic Configuration

You can configure each integration individually:

// eslint.config.js
import king3 from '@king-3/eslint-config'

export default king3(
  {
    // TypeScript and Vue are auto-detected, you can also explicitly enable them:
    typescript: true,
    vue: true,

    // Disable jsonc and yaml support
    jsonc: false,
    yaml: false,

    // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
    ignores: [
      '**/fixtures',
      '**/dist'
      // ...globs
    ]
  },
  // From the second arguments they are ESLint Flat Configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {
      // Your custom rules
    }
  }
)

Optional Configs

We provide some optional configs for specific use cases. Dependencies are not included by default and need to be installed manually.

React

To enable React support:

// eslint.config.js
import king3 from '@king-3/eslint-config'

export default king3({
  react: true
})

Install required dependencies:

pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks

UnoCSS

To enable UnoCSS support:

// eslint.config.js
import king3 from '@king-3/eslint-config'

export default king3({
  unocss: true
})

Install required dependencies:

pnpm add -D @unocss/eslint-plugin

IDE Support

VS Code

Install the ESLint extension.

Add the following to your .vscode/settings.json:

{
  // Enable auto-fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  }
}

Working with Prettier

Install Prettier extension.

For the best experience with Prettier, use the following settings:

{
  /* Editor - General */
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  /* Editor - Code Actions */
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  /* Prettier */
  "prettier.enable": true,
  // Optional: specify your custom Prettier config file path
  "prettier.configPath": "./prettier.config.js"
}

Recommended Prettier Config

You can use @king-3/prettier-config for a consistent code style that works well with this ESLint config:

pnpm add -D @king-3/prettier-config

Create .prettierrc.js (or ./prettier.config.js) in your project root:

import { king3 } from '@king-3/prettier-config'

export default king3({
  // Optional: customize your config
  printWidth: 120
})

Comparison with @antfu/eslint-config

Most rules are the same, but with some key differences:

• ✨ Uses Prettier instead of ESLint Stylistic
• 🎯 First-class support for Vue, React, Nuxt, Next, etc.
• 📏 Stricter and more opinionated defaults
• 🔧 Simpler configuration API

License

MIT License © 2025-PRESENT king3