@xats/eslint-config

Base on Antfu's ESLint config preset

Inspired by Hyoban's ESLint config preset

All in One ESLint config.

Features

• Auto fix for formatting (without Prettier)
• Auto detect your codebase and enable needed rules
• Out of box level's support toml, yaml, json
• Work with React, Vue 3, Svelte, Solid, Astro
• ESLint Flat config, compose easily!
• Using ESLint Stylistic
• Respects .gitignore by default
• Requires ESLint v9.5.0+

Usage

1. Install by your package manager

npm install -D eslint @xats/eslint-config

pnpm add -D eslint @xats/eslint-config

yarn add -D eslint @xats/eslint-config

bun add -D eslint @xats/eslint-config

2. Create a eslint.config.js if your package.json set "type": "module", otherwise create a eslint.config.mjs

// eslint.config.js 
// or eslint.config.mjs

import { xat } from '@xats/eslint-config'

export default xat()

3. Add scripts for package.json

For example:

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

4. VS Code - Auto fix on save (Optional)

Copied from antfu

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

All Plugins

See package.json's dependencies list

Auto-detect

This config will look up your package.json, and auto enable related config rules

UI

• Astro: astro
• React: react
• Vue: one of vue, nuxt, vitepress, @slidev/cli
• Svelte: svelte
• SolidJS: solid

Style

• UnoCSS: unocss
• TailwindCSS: tailwindcss

Devtool

• TypeScript: typescript

All Plugins

⚡️: Auto detect

👍🏻: Enabled default

🔧: Default disabled, need turn on manually.

That's all plugins and its status

Base - you can not disable this configs, but you can still disable individual rule

• eslint-plugin-n
• eslint-plugin-jsdoc
• eslint-plugin-import-x
• eslint-plugin-unused-imports
• eslint-plugin-perfectionist
• eslint-config-flat-gitignore

Astro

• eslint-plugin-astro - ⚡️

React

• @eslint-react/eslint-plugin - ⚡️
• eslint-plugin-react-hooks - ⚡️
• eslint-plugin-react-refresh - ⚡️

Svelte

• eslint-plugin-svelte - ⚡️

SolidJS

• eslint-plugin-solid - ⚡️

Vue

• eslint-plugin-vue - ⚡️

Style

• eslint-plugin-tailwindcss - ⚡️
• @unocss/eslint-plugin - ⚡️

Devtools

• @typescript-eslint/eslint-plugin - ⚡️
• eslint-plugin-no-only-tests - 🔧 test
• @vitest/eslint-plugin - 🔧 test

Document

• eslint-plugin-jsonc - 👍🏻 jsonc
• eslint-plugin-toml - 👍🏻 toml
• eslint-plugin-yml - 👍🏻 yaml

Miscs

• @stylistic/eslint-plugin - 👍🏻 stylistic
• eslint-plugin-regexp - 👍🏻 regexp
• eslint-plugin-unicorn - 👍🏻 unicorn

Customization

ESLint Flat config give us power to customize config.

Normally you only need to import the xat preset:

// eslint.config.js
import { xat } from '@xats/eslint-config'

export default xat()

And that's it! Or you can configure each integration individually, this is an all options example:

// eslint.config.js
import { xat } from '@xats/eslint-config'

export default xat({
  // Type of the project.
  // set to 'lib' will enable stricter rules
  // @default: 'app'
  type: 'lib', // 'app' | 'lib'
  
  // Enable stylistic formatting rules
  // Or customize the stylistic rules by give an object
  // @default: 'true'
  stylistic: {
    indent: 2, // 4, or 'tab'
    quotes: 'single', // or 'double'
  },

  // Disable some items
  jsonc: false,
  yaml: false,
  toml: false,
  unicorn: false,
  
  // You can also disable some autodetected configs
  react: false,
  astro: false,
  vue: false,
  solid: false,
  svelte: false,
  typescript: false,
  tailwind: false,
  unocss: false,

  // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
  ignores: [
    '**/fixtures',
    // ...globs
  ]
})

The antfu... sorry, I mean xat factory function also accepts any number of arbitrary custom config overrides:

// eslint.config.js
import { xat } from '@antfu/eslint-config'

export default xat(
  {
    // Configures for xat's config
  },

  // From the second arguments they are ESLint Flat Configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {},
  },
  {
    rules: {},
  },
)

Going more advanced, you can also import fine-grained configs and compose them as you wish:

Advanced Example

We wouldn't recommend using this style in general unless you know exactly what they are doing, as there are shared options between configs and might need extra care to make them consistent.

So Let's make a config only for Astro and Vue:

// eslint.config.js
import {
  combine,
  astro, // Astro
  disable, // Disable some rules by default
  ignore, // ignore files in `.gitignore`
  javascript, // lol, u may need it
  typescript, // u may also need this one
  vue, // Vue
} from '@xats/eslint-config'

export default combine(
  astro(/* Options */),
  disable(/* Options */),
  ignores(/* Options */),
  javascript(/* Options */),
  typescript(/* Options */),
  vue(/* Options */),
  {
    files: ['**/*.ts'],
    rules: {},
  },
)

Yep, you can also make this to your personal config preset.

Check out the configs and factory for more details.

By the way, this config is based on @antfu/[email protected], So you can reference it's Customization section.

License

MIT License © 2024-PRESENT Xat