@damisparks/eslint-config

This is my personal ESLint config preset. It is based on the @antfu/eslint-config. I made some tweaks to fit my personal preferences.

[!NOTE] This config is rewritten to the new ESLint Flat config.

Features

Some features of this config are inherited from the @antfu/eslint-config:

• Out-of-the-box support for TypeScript, Vue, React, etc.
• ESLint Flat config for better organization and composition.
• Using ESLint Stylistic to provide a consistent code style and enforce preconfigured style.
• And many more...

My personal tweaks include:

• Vue:

  • Enforce vue/block-order to ['script', 'template', 'style'].
  • Enforce a maximum number of attributes per line (3 for single-line, 1 for multi-line).
  • Explicitly enforce vue/prop-name-casing to camelCase, even though it is the default.

• Tailwind CSS (Optional): Enforce best practices and consistent usage of Tailwind CSS via eslint-plugin-tailwindcss.

• ... and other minor tweaks.

Installation

Install the @damisparks/eslint-config package in your project:

pnpm add -D eslint @damisparks/eslint-config

Create eslint.config.mjs in your project root:

// eslint.config.mjs
import damisparks from '@damisparks/eslint-config'

export default damisparks()

Usage

Using the default configuration without any arguments activates the @antfu/eslint-config preset.

• Autodetects Vue and TypeScript.
• Enables ESLint Stylistic style rules.

Optional Presets

Optionally, This config also provides some optional rules or presets for Vue and TailwindCSS presets:

// eslint.config.mjs
import { damisparks, tailwind, vue } from '@damisparks/eslint-config'

export default damisparks(
  {}, // @antfu/eslint-config options must come first.
  vue,
  tailwind,
  {
    // other ESLint Flat config rules object
  }
)

Nuxt Integration

This package provides custom rules that can be used with Nuxt. The recommended approach to use this config is via the Nuxt module.

1. Run the following command to add the @nuxt/eslint module to your project:

npx nuxi module add eslint

2. In your nuxt.config.ts, set the standalone option to false:

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      standalone: false // <---
    }
  }
})

3. Integrate the @damisparks/eslint-config in your eslint.config.mjs:

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

export default withNuxt(damisparks(
  {}, // @antfu/eslint-config options must come first.
  vue, // Optional
  tailwind, // Optional
))

NPM Scripts

Add the below lint commands to your package.json script section:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

VS Code Support

In VS Code, to enable support for ESLint Flat configuration, edit your .vscode/settings.json file and add the following:

{
  // Required in vscode-eslint < v3.0.10 only
  "eslint.useFlatConfig": true
}

License

MIT License © 2024-present Dami Sparks