Base on Antfu's ESLint config preset
Inspired by Hyoban's ESLint config preset
All in One ESLint config.
- 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+
- 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 aeslint.config.mjs
// eslint.config.js
// or eslint.config.mjs
import { xat } from '@xats/eslint-config'
export default xat()
- Add scripts for
package.json
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
- 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"
]
}
See package.json
's dependencies list
This config will look up your package.json
, and auto enable related config rules
- Astro:
astro
- React:
react
- Vue: one of
vue
,nuxt
,vitepress
,@slidev/cli
- Svelte:
svelte
- SolidJS:
solid
- UnoCSS:
unocss
- TailwindCSS:
tailwindcss
- TypeScript:
typescript
⚡️: Auto detect
👍🏻: Enabled default
🔧: Default disabled, need turn on manually.
That's all plugins and its status
- eslint-plugin-n
- eslint-plugin-jsdoc
- eslint-plugin-import-x
- eslint-plugin-unused-imports
- eslint-plugin-perfectionist
- eslint-config-flat-gitignore
- eslint-plugin-astro - ⚡️
- eslint-plugin-svelte - ⚡️
- eslint-plugin-solid - ⚡️
- eslint-plugin-vue - ⚡️
- @typescript-eslint/eslint-plugin - ⚡️
-
eslint-plugin-no-only-tests - 🔧
test
-
@vitest/eslint-plugin - 🔧
test
-
eslint-plugin-jsonc - 👍🏻
jsonc
-
eslint-plugin-toml - 👍🏻
toml
-
eslint-plugin-yml - 👍🏻
yaml
-
@stylistic/eslint-plugin - 👍🏻
stylistic
-
eslint-plugin-regexp - 👍🏻
regexp
-
eslint-plugin-unicorn - 👍🏻
unicorn
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/eslint-config@3.5.0
, So you can reference it's Customization section.