@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