repository·main·Indexed 27 days ago
https://github.com/antfu/eslint-configAn opinionated and highly customizable ESLint configuration designed for modern web technologies including TypeScript, Vue, React, Svelte, and Astro. It focuses on auto-fixing formatting to replace Prettier and provides a stable, consistent coding style. It supports the ESLint Flat config format and includes a factory function for easy configuration, a Config Composer for chaining methods, and integration guides for VS Code, Zed, and Neovim.
This project follows Semantic Versioning, but rule changes are generally not treated as breaking changes.
Breaking Changes include:
Non-breaking Changes include:
To visually inspect which rules are enabled in your project and see which files they apply to, use the @eslint/config-inspector. Run this command from your project root (where your eslint.config.js is located):
npx @eslint/config-inspectorIf you need to use existing configurations from the legacy eslintrc format, use the @eslint/eslintrc package's FlatCompat utility to convert them into the Flat config format within your eslint.config.mjs.
// eslint.config.mjs
import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'
const compat = new FlatCompat()
export default antfu(
{
ignores: [],
},
// Legacy config
...compat.config({
extends: [
'eslint:recommended',
// Other extends...
],
})
// Other flat configs...
)To install the configuration manually, install eslint and @antfu/eslint-config as dev dependencies, then create an eslint.config.mjs file in your project root that exports the antfu function.
pnpm i -D eslint @antfu/eslint-config// eslint.config.mjs
import antfu from '@antfu/eslint-config'
export default antfu()To enable auto-fixing in VS Code, install the ESLint extension and update your .vscode/settings.json. It is recommended to disable Prettier and the default formatter to let ESLint handle all formatting. You should also add eslint.rules.customizations to silence stylistic rules in the IDE while still allowing them to be auto-fixed on save.
{
// 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 your 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"
]
}Because certain rules are scoped to specific file types (e.g., ts/* for .ts files), you must specify the files glob when providing general overrides to avoid applying them to incompatible files (like Markdown).
import antfu from '@antfu/eslint-config'
export default antfu(
{
vue: true,
typescript: true
},
{
files: ['**/*.vue'],
rules: {
'vue/operator-linebreak': ['error', 'before'],
},
},
{
rules: {
'style/semi': ['error', 'never'],
},
}
)Use the provided CLI tool to automatically set up your project or migrate from a legacy ESLint configuration to the new Flat config format.
pnpm dlx @antfu/eslint-config@latestTo use @antfu/eslint-config in Zed, update .zed/settings.json to enable format_on_save, set code_actions_on_format for ESLint, and configure rulesCustomizations to silence stylistic rules in the editor while maintaining auto-fix capabilities.
{
"format_on_save": "on",
// Use ESLint's --fix:
"code_actions_on_format": {
"source.fixAll.eslint": true
},
"formatter": [],
// Enable eslint for all supported languages
"languages": {
"HTML": {
"language_servers": ["...", "eslint"]
},
"Markdown": {
"language_servers": ["...", "eslint"]
},
"Markdown-Inline": {
"language_servers": ["...", "eslint"]
},
"JSON": {
"language_servers": ["...", "eslint"]
},
"JSONC": {
"language_servers": ["...", "eslint"]
},
"YAML": {
"language_servers": ["...", "eslint"]
},
"CSS": {
"language_servers": ["...", "eslint"]
}
// Add other languages as needed
},
"lsp": {
"eslint": {
"settings": {
"workingDirectories": ["./"],
// Silent the stylistic rules in your IDE, but still auto fix them
"rulesCustomizations": [
{ "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 }
]
}
}
}
}To use @antfu/eslint-config in Neovim, configure lspconfig.eslint with the supported filetypes and rulesCustomizations to silence stylistic rules. To enable auto-fixing on save, you can use an autocmd with EslintFixAll or use plugins like conform.nvim, none-ls, or nvim-lint.
local 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 },
}
local lspconfig = require('lspconfig')
-- Enable eslint for all supported languages
lspconfig.eslint.setup(
{
filetypes = {
"javascript",
"javascriptreact",
"javascript.jsx",
"typescript",
"typescriptreact",
"typescript.tsx",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
},
settings = {
-- Silent the stylistic rules in your IDE, but still auto fix them
rulesCustomizations = customizations,
},
}
)
-- Neovim format on save using autocmd
-- lspconfig.eslint.setup({
-- --- ...
-- on_attach = function(client, bufnr)
-- vim.api.nvim_create_autocmd("BufWritePre", {
-- buffer = bufnr,
-- command = "EslintFixAll",
-- })
-- end,
-- })Several frameworks are supported but require explicit activation and manual installation of their respective ESLint plugins.
react: true (requires @eslint-react/eslint-plugin, eslint-plugin-react-refresh)nextjs: true (requires @next/eslint-plugin-next)svelte: true (requires eslint-plugin-svelte)astro: true (requires eslint-plugin-astro)solid: true (requires eslint-plugin-solid)unocss: true (requires @unocss/eslint-plugin)angular: true (requires @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser)To run linting and auto-fix before every commit, configure package.json with simple-git-hooks and lint-staged.
{
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}Then install and activate:
npm i -D lint-staged simple-git-hooks
npx simple-git-hooksThe configuration includes highly opinionated rules (e.g., preferring function declarations over arrow functions for top-level functions). To disable these specific opinions and use a less strict set of rules, pass lessOpinionated: true to the antfu configuration function.
import antfu from '@antfu/eslint-config'
export default antfu({
lessOpinionated: true
})