@xats/eslint-config
v1.2.1
Published
[![npm](https://img.shields.io/npm/v/@xats/eslint-config?color=444&label=)](https://npmjs.com/package/@xats/eslint-config) ![code style](https://antfu.me/badge-code-style.svg)
Downloads
732
Readme
@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
,html
- Work with React, Astro
- 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 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)
{
// 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": "@stylistic/*", "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",
"json",
"jsonc",
"yaml",
"toml",
"html",
"astro",
]
}
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
Style
- UnoCSS:
unocss
- TailwindCSS:
tailwindcss
Devtool
- TypeScript:
typescript
All Plugins
⚡️: Auto detect
👍🏻: Enabled default
🔧: Default disabled, need turn on manually.
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
Style
Devtools
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,
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: {},
},
)
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.