How to use an external plugin with your flat config?

[stefanobartoletti]

First of all thanks for this configuration, I'm considering migrating to it since a lot of my custom rules are already covered in the same way here.

I have a single point where I am a bit confused, about correctly using a third-party plugin.

I use eslint-plugin-tailwindcss to keep my class names ordered in my templates, and I'm not exactly sure how should I correctly include it in the configuration.

Accordig to eslint docs, a plugin has to be included like this, i.e.

import jsdoc from "eslint-plugin-tailwindcss";

export default [
    {
        plugins: {
            tailwindcss: tailwindcss
        }
    }
];

But I'm not exactly sure about what is the proper way to use it with your

import antfu from '@antfu/eslint-config'

export default antfu()

Can you provide some insight? Sorry if this may seem trivial

[antfu]

import antfu from '@antfu/eslint-config'

export default antfu(
  {},
  {
    plugins: { a },
    rules: { a }
  },
  {
    plugins: { b },
    rules: { b }
  },
  // ...as many as you want, rest args as forwarded as-is.
)

[Mat4m0]

@stefanobartoletti

I am also struggling with this one ^^'.. Maybe you can post your solution once it’s working for you.

Thanks!

[stefanobartoletti]

Thanks for sharing the answer @antfu 🙏🏻

Even with the correct syntax, it seems that the tailwind plugin itself is not already updated to use the flat config: francoismassart/eslint-plugin-tailwindcss#280

So @Mat4m0 we have to wait I guess.

[Mat4m0]

@stefanobartoletti actually in the issue you linked there is a working solution:

import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu({}, ...compat.config({
  extends: ['plugin:tailwindcss/recommended'],
  rules: {
    'tailwindcss/no-custom-classname': 'off',
    'tailwindcss/migration-from-tailwind-2': 'off',
  },
}))

[stefanobartoletti]

I see but it involves another package, I'm not in a hurry and I think I can wait to see if they will update the plugin

[gerbenvandijk]

For the ones who can't use ESM modules:

const antfu = require('@antfu/eslint-config').default
const { FlatCompat } = require('@eslint/eslintrc')
const compat = new FlatCompat()
module.exports = antfu({}, ...compat.config({
    extends: [ 'plugin:tailwindcss/recommended' ],
    rules: {}
}))

[antfu]

Oh thanks for the tip, I didn't know it exists. Added to the readme.

[codeflorist]

@stefanobartoletti actually in the issue you linked there is a working solution:

import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu({}, ...compat.config({
  extends: ['plugin:tailwindcss/recommended'],
  rules: {
    'tailwindcss/no-custom-classname': 'off',
    'tailwindcss/migration-from-tailwind-2': 'off',
  },
}))

Unfortunately this doesn't seem to work anymore with eslint v9.