eslint-plugin-tailwindcss 配置不起作用

Question

我无法让 eslint 的 tailwind css 插件正常工作...我正在使用 sveltekit，不确定这是否相关

我已经尝试了我所知道的和可以在网上找到的一切...

eslint.config.js 包含一个控制台日志，只是为了显示 tailwind css 对象已正确添加到设置对象中

这是 eslint.config.js：

import eslint from '@eslint/js';
import prettier from 'eslint-config-prettier';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import tailwindcss from 'eslint-plugin-tailwindcss';

const test = tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...svelte.configs['flat/recommended'],
    ...tailwindcss.configs['flat/recommended'],
    prettier,
    ...svelte.configs['flat/prettier'],
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node
            }
        }
    },
    {
        files: ['**/*.svelte', '**/*.js', '**/*.ts'],
        languageOptions: {
            parserOptions: {
                parser: tseslint.parser
            }
        }
    },
    {
        ignores: ['build/', '.svelte-kit/', 'dist/']
    },
);

console.log(test);

export default test;

如果需要，这里是 package.json：

{
    "name": "sveltekit-ssg-demo-app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --write ./src && eslint ./src --fix",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-static": "^3.0.5",
        "@sveltejs/kit": "^2.7.1",
        "@sveltejs/vite-plugin-svelte": "^3.1.2",
        "@types/eslint": "^9.6.1",
        "autoprefixer": "^10.4.20",
        "eslint": "^9.12.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.44.1",
        "eslint-plugin-tailwindcss": "^3.17.5",
        "@eslint/js": "^9.12.0",
        "globals": "^15.11.0",
        "postcss": "^8.4.47",
        "prettier": "^3.3.3",
        "prettier-plugin-svelte": "^3.2.7",
        "prettier-plugin-tailwindcss": "^0.6.8",
        "svelte": "^4.2.19",
        "svelte-check": "^4.0.5",
        "tailwindcss": "^3.4.14",
        "typescript": "^5.6.3",
        "typescript-eslint": "^8.9.0",
        "vite": "^5.4.9"
    },
    "type": "module"
}

我有文件

src/routes/+page.svelte

<div class="flex grid">
  <p>test</p>
</div>

它应该从

no-contradicting-classname

触发

eslint-plugin-tailwindcss

规则，因为

<div class="flex grid">

但什么也没有发生
我已经使用

eslint ./src

标志 (

--debug

) 运行了

eslint ./src --debug

命令，并验证了正在检查有问题的文件，并且日志中提到了两个

eslint-plugin-svelte

配置（

 的第 11 行和第 14 行） eslint.config.js

文件

...svelte.configs['flat/recommended']

、

...svelte.configs['flat/prettier']

），但

...tailwindcss.configs['flat/recommended']

永远不会出现

这里是我提到的

eslint-plugin-svelte

配置，当使用

--bebug

标志运行 esling 时出现在日志中：

  eslint:linter Apply the processor: { meta: { name: 'eslint-plugin-svelte', version: '2.44.1' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] } +0ms
  eslint:linter Apply the processor: { meta: { name: 'eslint-plugin-svelte', version: '2.44.1' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] } +0ms

tailwind 从未在日志中提及，但它在配置对象上（由控制台日志确认）有人知道为什么会发生这种情况吗？

谢谢！

我尝试以多种方式将

eslint-plugin-tailwindcss

配置对象添加到 eslint.config.js

Answer 1

我的程序也有同样的问题，但我无法修复它。