@stefanobartoletti/eslint-config NPM

My ESlint configuration, based on @antfu/eslint-config with personal customizations. Also includes optional rulesets for Nuxt and Tailwind.

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 and Tailwind (the latter 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:

(Vue) Set maximum allowed attributes per line on HTML elements (10 for singleline, 1 for multiline)
(Vue) Set block order to <template>, <script>, <style>
(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)
(Tailwind - Optional) Enforce best practices and consistency for Tailwind, mainly class names ordering (by including eslint-plugin-tailwindcss)
... 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 Nuxt or Tailwind configs

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

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

export default stefanobartoletti(
  {}, // @antfu/eslint-config options, must always be present as first item even if empty
  nuxt,
  tailwind,
  {
    // 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

🤝 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.
I don't have the resources or the desire to support frameworks, tools or features that I don't personally use. 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.