@stefanobartoletti/eslint-config

🌟 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.

This config integrates nicely with the Nuxt ESLint module, and also adds optional rules for Tailwind, by using eslint-plugin-tailwindcss

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

• Vue and TypeScript support
• Linting for Json, Yaml, Markdown
• Uses the easily extensible ESLint Flat config
• Includes ESLint Stylistic to format code and enforce a preconfigured style (Prettier not required and not officially supported)
• ... and many more (check its docs for the full list)

My own customizations and preferences:

• (General) Force use of curly braces on control statements
• (General) Disable antfu/top-level-function to allow arrow syntax on top level functions
• (pnpm) Also enforce trustPolicyIgnoreAfter: 43200 (30 days) in pnpm-workspace.yaml, so the trustPolicy: no-downgrade check skips older versions published without provenance (e.g. backports), avoiding false positives
• (Vue - Optional) Set maximum allowed attributes per line on HTML elements (10 for singleline, 1 for multiline)
• (Vue - Optional) Set block order to <template>, <script>, <style>
• (Tailwind - Optional) Enforce best practices and consistency for Tailwind, mainly class names ordering (imported directly from eslint-plugin-tailwindcss)
• (Vue - Optional) Accessibility (a11y) linting via eslint-plugin-vuejs-accessibility, the dependency ships with this package, so no separate install is needed, just enable the option
• ... and some other minor tweaks

🛠️ Setup

Installation

pnpm i -D eslint @stefanobartoletti/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 { stefanobartoletti } from '@stefanobartoletti/eslint-config'

export default stefanobartoletti()

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 { stefanobartoletti } from '@stefanobartoletti/eslint-config'

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

Using optional Vue and Tailwind rules

This package also provides optional configuration for Vue and Tailwind. They can be used together or by themselves, and together with further custom rules.

// eslint.config.js
import { stefanobartoletti, tailwind, vue } from '@stefanobartoletti/eslint-config'

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

[!WARNING] Starting from v2.x, all my custom Vue-related rules must be explicitly imported with the vue key. They were previously included in the base configuration, and automatically active even when not really needed or when the Vue plugins were not active.

Configuring Tailwind

tailwind is a function, since eslint-plugin-tailwindcss v4 targets Tailwind CSS v4 and requires a shared settings.tailwindcss object, most notably cssConfigPath, pointing to your project's main Tailwind CSS file. Any option accepted by the plugin can be passed through:

// eslint.config.js
import { stefanobartoletti, tailwind } from '@stefanobartoletti/eslint-config'

export default stefanobartoletti(
  {},
  tailwind({
    cssConfigPath: './src/styles/tailwind.css',
  }),
)

[!WARNING] Starting from v6.x, only Tailwind v4 is supported! Also, you no longer need to manually install eslint-plugin-tailwindcss as a dev dependecy.

Vue accessibility (a11y) linting

This package ships eslint-plugin-vuejs-accessibility as a dependency, so it's always available, no separate install needed. It stays disabled by default though, same as in @antfu/eslint-config itself, since enabling it can surface real findings on existing markup rather than being a transparent update. Turn it on via @antfu/eslint-config's own vue.a11y option, passed in the first argument of stefanobartoletti():

// eslint.config.js
import { stefanobartoletti, vue } from '@stefanobartoletti/eslint-config'

export default stefanobartoletti(
  {
    vue: { a11y: true },
  },
  vue,
)

[!TIP] The plugin's default label-has-for rule requires a label to be both nested around its control and reference it via for/id, valid HTML only needs one or the other. If that's too strict for your markup, relax it per project by appending an override:

export default stefanobartoletti(
  {
    vue: { a11y: true }
  },
  vue,
  {
    files: ['**/*.vue'],
    rules: {
      'vue-a11y/label-has-for': [
        'error',
        {
          required: {
            some: ['nesting', 'id']
          }
        }
      ],
    },
  },
)

Integrationg with Nuxt

[!NOTE] This package used to provide custom rules to be used with Nuxt, but the latest versions of the official Nuxt configs effectively made them redundand and unnecessary.

Starting from v3.x, Nuxt rules were removed from this package, the recommended way to use this config is to directly integrate it with the Nuxt module.

1. Install the ESLint module with npx nuxi module add eslint, as described in the official docs

2. Set it to be "standalone", to prevent conflicting with @antfu/eslint-config:

// nuxt.config.ts
export default defineNuxtConfig({

  modules: [
    '@nuxt/eslint',
  ],

  eslint: {
    config: {
      standalone: false, // <-- Important to work correctly
    },
  },
})

3. Integrate this config by prepending it to the Nuxt provided one:

// eslint.config.js
import { stefanobartoletti, tailwind, vue } from '@stefanobartoletti/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // More ESlint Flat configs, appended to Nuxt's
)
  .prepend(
    stefanobartoletti(
      {}, // Antfu Options, required
      vue, // Optional, but recommended to follow this config style preferences
      tailwind(), // Optional, depending on the project
    ),
  )

📝 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

🤝 Contributing

[!NOTE] If you want to contribute you can start by reading the Contributing guidelines.

[!IMPORTANT] I am more than happy to accept suggestions for improvement and contributions, and to try to fix issues that may come on other people specific environments, to allow this package to be used on other people's projects too.

Anyway, keep in mind that this is my personal configuration, whose main goal is to provide a shareable base to be used across my own projects, based on my preferences and supporting tools and frameworks that I personally use on a daily basis.

Unfortunately I don't have time and resources to support frameworks, tools or features that I am not currently using. ESlint Flat config is very easy to customize and if my setup does not cater to your needs, but you still want to build up antfu's, you can use this repository as a base for your own custom take on it.

📝 License

MIT

© 2023-present Stefano Bartoletti