My ESlint configuration, based on @antfu/eslint-config
with personal customizations. Nicely integrates with Nuxt and provides optional rules for Tailwind.
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 - (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
pnpm i -D eslint @stefanobartoletti/eslint-config
With "type": "module"
in package.json
(recommended):
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()
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',
},
},
)
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.
[!INFO] 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.
-
Install the ESLint module with
npx nuxi module add eslint
, as described in the official docs -
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
},
},
})
- 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
),
)
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
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.
ยฉ 2023-present Stefano Bartoletti