eslint-config

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #android #machine-learning #linux #docker #java #windows #cli #vue #awesome-list #security #openai

(★ 33)

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

eslint-config Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![code style][antfu-src]][antfu-href]

My ESlint configuration, based on `@antfu/eslint-config` with personal customizations. Nicely integrates with Nuxt and provides optional rules for Tailwind.

[Release Notes](https://github.com/stefanobartoletti/eslint-config/releases)

---

</div>

## 🌟 Features

This is my personal ESlint configuration, based on the excellent [`@antfu/eslint-config`](https://github.com/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`](https://eslint.nuxt.com) module, and also adds optional rules for Tailwind, by using [`eslint-plugin-tailwindcss`](https://github.com/francoismassart/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](https://eslint.org/docs/latest/use/configure/configuration-files-new)
- Includes [ESLint Stylistic](https://github.com/eslint-stylistic/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
- (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`)
- ... and some other minor tweaks

## 🛠️ Setup

### Installation

```bash
pnpm i -D eslint @stefanobartoletti/eslint-config
```

### Configuration

With [`"type": "module"`](https://nodejs.org/api/packages.html#type) 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

```js
// 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](https://github.com/antfu/eslint-config) 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.

```js
// 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.

```js
// 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](https://github.com/francoismassart/eslint-plugin-tailwindcss) targets Tailwind CSS v4 and requires a [shared `settings.tailwindcss`](https://github.com/francoismassart/eslint-plugin-tailwindcss#settings) object, most notably `cssConfigPath`, pointing to your project's main Tailwind CSS file. Any option accepted by the plugin can be passed through:

```js
// 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.

#### 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](https://eslint.nuxt.com/packages/module)

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

```ts
// 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:

```js
// 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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

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

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

For more settings, check the "VS Code support" section in [antfu/eslint-config](https://github.com/antfu/eslint-config#vs-code-support-auto-fix)

## 🤝 Contributing

> [!NOTE]
> If you want to contribute you can start by reading the [Contributing guidelines](https://github.com/stefanobartoletti/eslint-config/blob/master/.github/CONTRIBUTING.md).

> [!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](https://github.com/stefanobartoletti/eslint-config/blob/main/LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/%40stefanobartoletti%2Feslint-config?style=flat&labelColor=18181B&color=28CF8D
[npm-version-href]: https://npmjs.com/package/@stefanobartoletti/eslint-config

[npm-downloads-src]: https://img.shields.io/npm/dm/%40stefanobartoletti%2Feslint-config?style=flat&labelColor=18181B&color=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@stefanobartoletti/eslint-config

[license-src]: https://img.shields.io/npm/l/%40stefanobartoletti%2Feslint-config?style=flat&labelColor=18181B&color=28CF8D
[license-href]: https://npmjs.com/package/@stefanobartoletti/eslint-config

[antfu-src]: https://antfu.me/badge-code-style.svg
[antfu-href]: https://github.com/antfu/eslint-config

eslint-config

eslint-config Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

eslint-config

eslint-config Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README