@alvarosabu/eslint-config

Opinionated but flexibel ESlint config, based on @antfu/eslint-config with personal preferences. Also includes optional rulesets for Nuxt.

Release Notes

Features

This is my personal ESlint configuration, based on the excellent @antfu/eslint-config. It only deviates for some minor tweaks and personal preferences, since I agree almost completely with Anthony's style choices.

My config also adds some additional and optional rulesets for Nuxt.

Some of the main features, inherited directly from @antfu/eslint-config:

Single quotes, no semi
Auto fix for formatting (aimed to be used standalone without Prettier)
Sorted imports, dangling commas
Reasonable defaults, best practices, only one line of config
Designed to work with TypeScript, JSX, Vue out-of-box
Lints also for json, yaml, toml, markdown
Opinionated, but very customizable
ESLint Flat config, compose easily!
Using ESLint Stylistic
Respects .gitignore by default
Optional React, Svelte, UnoCSS, Astro support
Optional formatters support for CSS, HTML, etc.
Style principle: Minimal for reading, stable for diff, consistent

My own customizations and preferences:

(Vue) Set maximum allowed attributes per line on HTML elements (10 for singleline, 1 for multiline)
(General) Force use of curly braces on control statements
(General) Disable antfu/top-level-function to allow arrow syntax on top level functions
(Nuxt - Optional) Set some specific Nuxt rules if not already covered by Antfu's config (sourced from @nuxt/eslint-config)
... and some other minor tweaks

🛠️ Setup

Installation

pnpm i -D eslint @alvarosabu/eslint-config

Configuration

With "type": "module" in package.json (recommended):

Basic use

Using the default config without arguments uses the following @antfu/eslint-config options as defaults:

autodetects Vue
autodetects Typescript
enables ESlint Stylistic

// eslint.config.js
import { alvarosabu } from '@alvarosabu/eslint-config'

export default alvarosabu()

Setting options and using custom rules

It is possible to add custom rules with the following configuration.

The first item must contain options to be passed to @antfu/eslint-config (read more on its docs for possible options). It must always be present even if left empty.
From the second item going on, you can add as many custom ESlint flat config objects as you need.

// eslint.config.js
import { alvarosabu } from '@alvarosabu/eslint-config'

export default alvarosabu(
  // @antfu/eslint-config options, must be the first argument
  {
    stylistic: false,
  },
  // Addtionals flat configs start from here
  {
    rules: {
      curly: 'off',
    },
  },
)

Using optional Nuxt

This package also provides optional configuration for Nuxt. To use it, simply add the nuxt config to the list of configs.

// eslint.config.js
import { alvarosabu, nuxt } from '@alvarosabu/eslint-config'

export default alvarosabu(
  {}, // @antfu/eslint-config options, must always be present as first item even if empty
  nuxt,
  {
    // ESlint Flat config rule object
  },
)

📝 VS Code Support

If you use VS Code, you should manually enable support for ESLint flat config.

Install VS Code ESLint extension.

Add the following settings to your .vscode/settings.json:

{
  // Enable the ESLint flat config support
  "eslint.experimental.useFlatConfig": true
}

For more settings, check the "VS Code support" section in antfu/eslint-config

📝 License

MIT