A Comprehensive Guide to ESLint v9, @antfu/eslint-config, and Husky Hooks

Preface

On December 7, the 7th FEDAY conference in Xiamen featured Anthony Fu, who presented an ESLint universal configuration guide. The author notes that many projects still avoid ESLint, but ESLint v9 has been released and v8.x support ends on 2024‑10‑05.

ESLint v9

ESLint v9 introduces several breaking changes, including the default flat configuration, removal of formatters, and dropping support for Node.js < v18.18.0 and v19. The flat config searches for eslint.config.(js|cjs|mjs) instead of .eslintrc.* , and you can revert by setting the ESLINT_USE_FLAT_CONFIG environment variable to false .

Flat Config

Flat configuration becomes the default in v9. Example of traditional .eslintrc.json versus flat eslint.config.js is shown.

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "vue",
    "n"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "off"
  },
  "overrides": []
}

import typescript from '@eslint-typescript/eslint-plugin'
import eslint from '@eslint/js'
import n from 'eslint-plugin-n'
import vue from 'eslint-plugin-vue'

export default [
  eslint.configs.recommended,
  ...typescript.configs.recommended,
  {
    plugins: { vue, node: n },
    rules: { '@typescript-eslint/no-unused-vars': 'off' }
  }
]

Remove formatters

Most built‑in formatters are removed from the core to reduce package size; external plugins are required for formatting.

Drop support for older Node.js versions

Support for Node.js versions earlier than 18.18.0 and version 19 is removed.

@antfu/eslint-config

The author introduces the @antfu/eslint-config preset, which provides automatic formatting, sensible defaults, and support for TypeScript, JSX, Vue, JSON, YAML, Toml, Markdown, and optional frameworks.

Features

Auto‑fix without Prettier.

Reasonable defaults, one‑line config.

Out‑of‑the‑box support for many file types.

Highly customizable.

Flat config support.

Optional React, Svelte, UnoCSS, Astro, Solid support.

Style principles: minimal reads, stable diff, consistency.

Enforces .gitignore.

Requires ESLint v9.5.0+.

Installation

npm dlx @antfu/eslint-config@latest

npm i -D eslint @antfu/eslint-config

Usage

Create eslint.config.mjs in the project root:

import antfu from '@antfu/eslint-config'

export default antfu()

Add scripts to package.json :

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

Run npm run lint for checking and npm run lint:fix for automatic fixing.

Husky Hooks

Husky can run scripts on Git hooks, e.g., linting with ESLint before a commit.

Installation

npm i -D husky lint-staged

Initialization

npx husky install

After initialization, a .husky/pre-commit script runs npx lint-staged . Add to package.json :

"scripts": {
  "prepare": "husky install"
},
"lint-staged": {
  "*": "eslint --fix"
}

Summary

ESLint remains essential in the frontend ecosystem, and @antfu/eslint-config saves configuration time, though it may need customization or forking for specific needs.