Eslint Preset

An opinionated ESLint configuration preset for TypeScript projects, based on antfu/eslint-config. I use this preset across my personal and professional projects to maintain a consistent code style and quality.

Additional rules included are:

• Markdown files support via eslint-plugin-markdown
• Vue files support via eslint-plugin-vue
• Tailwind CSS support via eslint-plugin-better-tailwindcss

Installation

To install ESLint and this preset with Bun, run:

bun add --dev eslint @acfatah/eslint-preset

This preset declares @antfu/eslint-config, @eslint/markdown, eslint, eslint-plugin-better-tailwindcss, eslint-plugin-format, and eslint-plugin-vue as dependencies. Bun, will install these packages automatically when you add the preset, so you do not need to list each plugin manually in your package.json.

Add an eslint.config.ts file with the following content. defineConfig is a wrapper around the antfu factory function. See antfu Customization for details.

import { defineConfig, markdown, typescript, vue } from '@acfatah/eslint-preset'

export default defineConfig(
  {
    formatters: true, // Optional since v1.4.0. Default to true.
    typescript: true, // Optional since v1.4.0. Default to true.

    // Type of the project. 'lib' for libraries, the default is 'app'
    type: 'lib',

    // Specifically for Vue projects
    vue: true,

    // Files and directories to ignore. Adjust accordingly.
    ignores: [
      '**/coverage/**',
      '**/dist/**',
      '**/logs/**',
      '**/tsconfig.*',
      'bun.lock',
    ],
  },

  {
    // Optionally when using some plugins
    plugins: {
      // ...
    },
  },

  typescript,
  markdown,
  vue,
)

Tailwind CSS Support

Add the following configurations respectively.

import { betterTailwindcssPlugin, defineConfig, tailwind } from '@acfatah/eslint-preset'

export default defineConfig(
  {
    // other configs...
  },

  {
    plugins: {
      ...betterTailwindcssPlugin,
    },

    settings: {
      // See: https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/settings/settings.md
      'better-tailwindcss': {
        // Required to work properly. Adjust accordingly.
        entryPoint: 'src/styles/global.css',
        // Optional variable names used to store Tailwind class names
        variables: [
          ['variant', [{ match: 'objectValues' }]],
          ['size', [{ match: 'objectValues' }]],
        ],
      },
    }
  },

  tailwind,

  // other flat configs...
)

Inspect Example Configs

You can inspect the fully resolved configs shipped in this repo. These commands run from the project root and run the ESLint config inspector against the templates used.

Default TypeScript preset

bun inspect:default

Vue + Tailwind preset

bun inspect:vue-tailwind

VS Code Support

Install the VS Code ESLint extension.

Add the following vscode configuration to .vscode/settings.json,

File: src/files/.vscode/settings.json

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": true,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ],

  // https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#recommended-vs-code-settings
  "files.associations": {
    "*.css": "tailwindcss"
  },

  // https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#recommended-vs-code-settings
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Tailwind CSS Support

Install the Tailwind CSS IntelliSense extension.

Add the following custom Tailwind CSS v4 functions and directives lines to the .vscode/settings.json file:

{
  // other settings...

  // Custom Tailwind CSS v4 functions and directives
  // See:
  // - https://tailwindcss.com/docs/functions-and-directives
  // - https://grok.com/share/bGVnYWN5_1cf7d218-282e-46e5-acc6-efb07d12d35e
  "css.customData": [
    ".vscode/tailwind.json"
  ]

  // other settings...
}

Then, copy src/files/.vscode/tailwind.json file to .vscode/tailwind.json.

curl -s https://raw.githubusercontent.com/acfatah/eslint-preset/refs/heads/main/src/files/.vscode/tailwind.json -o .vscode/tailwind.json

Acknowledgments

• antfu/eslint-config