@antfu/eslint-config
- Single quotes, no semi
- Auto fix for formatting (aimed to be used standalone without Prettier)
- Designed to work with TypeScript, Vue out-of-box
- Lint also for json, yaml, markdown
- Sorted imports, dangling commas
- Reasonable defaults, best practices, only one-line of config
- ESLint Flat config, compose easily!
- Using ESLint Stylistic
- Style principle: Minimal for reading, stable for diff
Important
The main branch is for v1.0-beta, which rewrites to ESLint Flat config, check #250 for more details.
Usage
Install
pnpm add -D eslint @antfu/eslint-config
Create config file
// eslint.config.js
import antfu from '@antfu/eslint-config'
export default [
...antfu,
{
rules: {
// your overrides
},
},
]
You don't need
.eslintignore
normally as it has been provided by the preset.
Add script for package.json
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
VS Code support (auto fix)
Install VS Code ESLint extension
Add the following settings to your settings.json
:
{
// Enable the flat config support
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "@stylistic/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" }
],
// The following is optional.
// It's better to put under project setting `.vscode/settings.json`
// to avoid conflicts with working with different eslint configs
// that does not support all formats.
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
]
}
Flat Config
Since v1.0, we migrated to ESLint Flat config, provides a much better organization and composition.
You can now compose your own config easily:
// eslint.config.js
import {
presetAuto,
presetJavaScriptCore,
presetLangsExtensions,
presetTypeScript,
} from '@antfu/eslint-config'
export default [
// javascript, node, unicorn, jsdoc, imports, etc.
...presetJavaScriptCore,
// typescript support
...presetTypeScript,
// yaml, markdown, json, support
...presetLangsExtensions,
]
Or even more granular:
// eslint.config.js
import {
comments,
ignores,
imports,
javascript,
javascriptStylistic,
jsdoc,
jsonc,
markdown,
node,
sortPackageJson,
sortTsconfig,
typescript,
typescriptStylistic,
unicorn,
vue,
yml,
} from '@antfu/eslint-config'
export default [
...ignores,
...javascript,
...comments,
...node,
...jsdoc,
...imports,
...unicorn,
...javascriptStylistic,
...typescript,
...typescriptStylistic,
...vue,
...jsonc,
...yml,
...markdown,
]
Check out the presets and configs for more details.
Thanks to sxzz/eslint-config for the inspiration and reference.
Type Aware Rules
You can optionally enable the type aware rules by importing typescriptWithLanguageServer
config:
// eslint.config.js
import { presetAuto, typescriptWithLanguageServer } from '@antfu/eslint-config'
export default [
...presetAuto,
...typescriptWithLanguageServer({
tsconfig: 'tsconfig.json', // path to your tsconfig
}),
{
rules: {
// your overrides
},
},
]
Lint Staged
If you want to apply lint and auto-fix before every commit, you can add the following to your package.json
:
{
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
and then
npm i -D lint-staged simple-git-hooks
Badge
If you enjoy this code style, and would like to mention it in your project, here is the badge you can use:
[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
FAQ
Prettier?
How to lint CSS?
This config does NOT lint CSS. I personally use UnoCSS so I don't write CSS. If you still prefer CSS, you can use stylelint for CSS linting.
I prefer XXX...
Sure, you can override rules locally in your project to fit your needs. Or you can always fork this repo and make your own.
Check Also
- antfu/dotfiles - My dotfiles
- antfu/vscode-settings - My VS Code settings
- antfu/ts-starter - My starter template for TypeScript library
- antfu/vitesse - My starter template for Vue & Vite app
License
MIT License © 2019-PRESENT Anthony Fu