ESLint扁平配置下@stylistic/eslint-plugin无法识别TS文件

问题原因 #

当前配置未明确指定要处理TS文件，且缺少typescript-eslint插件与解析器，导致ESLint无法识别TS语法，进而忽略TS文件并抛出File ignored because no matching configuration was supplied警告。

修复方案 #

修改eslint.config.mjs，添加TS文件匹配规则、引入typescript-eslint工具链并配置解析器：

import stylistic from "@stylistic/eslint-plugin";
import tsEslint from "typescript-eslint";

export default [
    // 处理JS文件的配置
    {
        files: ["**/*.js"],
        plugins: {
            "@stylistic": stylistic,
        },
        rules: {
            "@stylistic/comma-dangle": ["error", "always-multiline"],
            "@stylistic/eol-last": ["error", "always"],
            "@stylistic/indent": ["error", "tab", { "SwitchCase": 1 }],
            "@stylistic/key-spacing": ["error", { "beforeColon": true }],
            "@stylistic/linebreak-style": ["error", "unix"],
            "@stylistic/quotes": ["error", "double", { "allowTemplateLiterals": true, "avoidEscape": true }],
            "@stylistic/semi": ["error", "always"],
        },
    },
    // 处理TS文件的配置
    {
        files: ["**/*.ts"],
        plugins: {
            "@stylistic": stylistic,
            "@typescript-eslint": tsEslint.plugin,
        },
        languageOptions: {
            parser: tsEslint.parser,
            parserOptions: {
                project: "./tsconfig.json",
                tsconfigRootDir: import.meta.dirname,
            },
        },
        rules: {
            "@stylistic/comma-dangle": ["error", "always-multiline"],
            "@stylistic/eol-last": ["error", "always"],
            "@stylistic/indent": ["error", "tab", { "SwitchCase": 1 }],
            "@stylistic/key-spacing": ["error", { "beforeColon": true }],
            "@stylistic/linebreak-style": ["error", "unix"],
            "@stylistic/quotes": ["error", "double", { "allowTemplateLiterals": true, "avoidEscape": true }],
            "@stylistic/semi": ["error", "always"],
            "@stylistic/type-annotation-spacing": ["error", { "before": true }],
        },
    },
];

关键修改说明 #

• 文件匹配：通过files字段明确指定要处理的JS/TS文件，避免ESLint忽略TS文件
• 解析器配置：使用@typescript-eslint/parser解析TS语法，关联项目的tsconfig.json以获取类型信息
• 插件引入：添加@typescript-eslint插件，配合解析器让ESLint能正确处理TS语法特性
• 规则复用：将@stylistic的格式规则分别应用到JS和TS文件，其中type-annotation-spacing为TS专属规则

验证方法 #

运行ESLint命令检测TS文件：

eslint ./ --ext .ts

此时警告应消失，@stylistic的规则会正常应用到TS文件中。

内容的提问来源于stack exchange，提问作者A. L