New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature request] Support for eslint
v9.1.1
#335
Comments
Hey @cewald, I am not familiar with Nuxt, but I am in the process of migrating to flat config and I managed to get Here is my config object for the tailwind plugin: https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/configs/tailwind.js Here is my main config file: https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/eslint.config.js#L5 This isn't a "it works for me, so it should work for everyone" type of comment, just thought this working setup might give you a hint or idea on how to solve your issue. Peek.2024-04-25.19-28.mp4If we look at what the plugin exports, this isn't directly flat config compatible ( Cheers. |
using eslint v8 (which also uses the flat-config), you can do this: // @ts-check
import { FlatCompat } from '@eslint/eslintrc'
import withNuxt from './.nuxt/eslint.config.mjs'
const compat = new FlatCompat()
export default withNuxt(
{
rules: {
// ...
}
}, ...compat.config({
extends: ['plugin:tailwindcss/recommended'],
rules: {
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/migration-from-tailwind-2': 'off',
},
})
) this doesn't seem to work with v9 anymore however. i'd recomment sticking to v8 for now. |
Regarding eslint v9 support: |
I made a beta version which may work with eslint v9 Can you try it ? |
Greetings @francoismassart. I installed the That said, I am not sure if this is intended or not, but the recommended config is still using the eslintrc format, rather than the flat config format. So for example, a config like this won't work out of the box: import eslintPluginTailwindCss from 'eslint-plugin-tailwindcss';
export const eslintPluginTailwindCssConfig = [
{
...eslintPluginTailwindCss.configs.recommended,
}
]; For me this is not an issue because of how I configure the plugin, but I thought it might be worth mentioning anyway. Cheers! |
@francoismassart Thanks for your work! Okay, I tested it and had a little hiccup with the different versions import pluginTailwindCSS from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt([
{
plugins: { tailwindcss: pluginTailwindCSS },
rules: pluginTailwindCSS.configs.recommended.rules,
},
// ...
]) This is the way it is intended to be, right? |
Here is a new version to test,
The beta version to be tested is
|
Thanks for the update. Here is my //...
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt([
//...
...eslintPluginTailwindCSS.configs['flat/recommended'],
//...
]) |
Working fine with ESLint 8.57.0 + flat config + Nuxt + AntFu.
import antfu from '@antfu/eslint-config'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'
//...
export default withNuxt(
antfu(
//...
...eslintPluginTailwindCSS.configs['flat/recommended'],
{
rules: {},
},
),
) |
Working fine with ESLint 9.3.0 + Flat config repo link // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import pluginTailwindcss from 'eslint-plugin-tailwindcss'
import type { Linter } from 'eslint'
export default function tailwindcss(): Linter.FlatConfig[] {
return [
{
name: 'tailwindcss/rules',
plugins: {
tailwindcss: pluginTailwindcss
},
rules: {
'tailwindcss/classnames-order': 'error',
'tailwindcss/no-contradicting-classname': 'error',
'tailwindcss/enforces-shorthand': 'error',
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/no-unnecessary-arbitrary-value': 'off',
}
}
]
} |
ESLint v9 + flat config + eslint-plugin-tailwindcss@3.16.0-beta.1 all working good. Repo |
I also tried the latest beta with ESLint 8.15.0 and the legacy config 👍 |
Latest version (
|
Is your feature request related to a problem? Please describe.
I'm using
nuxt
and the latest@nuxt/eslint
module which utilizeseslint
version 9 and I couldn't make it work.If I import the
eslint-plugin-tailwindcss
index file in the new flat-config syntax e.g. aneslint.config.mjs
, I'll get an error:And here the config file (
eslint.config.mjs
):Describe the solution you'd like
My guess is to update to the new flat-config syntax or at least describe in the documentation how to properly implement it for the new configuration syntax.
The text was updated successfully, but these errors were encountered: