@xats/eslint-config NPM

@xats/eslint-config

Base on Antfu's ESLint config preset
Inspired by Hyoban's ESLint config preset

All in One ESLint config.

Icons

Features

Double quotes, Tab indent, Trailing comma, No semicolon, etc.
Auto detect your codebase and enable needed rules
Out of box level's support toml, yaml, json, html
Work with React, TypeScript, TailwindCSS
ESLint Flat config, compose easily!
Using ESLint Stylistic
Respects .gitignore by default
Requires ESLint v9.5.0+

Usage

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

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

Add scripts for package.json

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

VS Code - Auto fix on save (Optional)

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.rules.customizations": [
    { "rule": "@stylistic/*", "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 }
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "json5",
    "jsonc",
    "yaml",
    "toml",
    "html",
    "astro"
  ]
}

Auto-detect

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

React: react
TailwindCSS: tailwindcss
TypeScript: typescript

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,
  typescript: false,
  tailwind: 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: {},
  },
)

By the way, this config is based on @antfu/eslint-config@3.5.0, So you can reference it's Customization section.