ESLint 9现有配置添加@stylistic/js/max-len规则失败求助

你的问题出在新增的规则块没有指定文件匹配范围，ESLint 9会把无files属性的配置块应用到所有文件，这会打乱之前针对src/js/**/*.{js,mjs,cjs,ts}的配置优先级，导致原有规则失效，同时新规则也没按预期作用在目标文件上。

两种可行的修复方案 #

方案1：把max-len规则合并到目标文件配置块中

直接将规则添加到第一个指定文件范围的配置对象里，确保规则只作用于你需要的文件：

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import stylistic from '@stylistic/eslint-plugin';

export default [
  { 
    files: ['src/js/**/*.{js,mjs,cjs,ts}'],
    // 新增max-len规则
    rules: {
      "@stylistic/js/max-len": ["error", { "code": 40 }]
    }
  },
  stylistic.configs.customize({
    indent: 2,
    quotes: 'single',
    semi: true,
    jsx: true,
    braceStyle: '1tbs'
  }),
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended
];

方案2：给独立规则块添加相同的文件匹配范围

如果坚持单独写规则块，必须指定和第一个块一致的files，避免全局干扰：

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import stylistic from '@stylistic/eslint-plugin';

export default [
  { 
    files: ['src/js/**/*.{js,mjs,cjs,ts}'], 
  },
  stylistic.configs.customize({
    indent: 2,
    quotes: 'single',
    semi: true,
    jsx: true,
    braceStyle: '1tbs'
  }),
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  // 新增带文件范围的规则块
  {
    files: ['src/js/**/*.{js,mjs,cjs,ts}'],
    rules: {
      "@stylistic/js/max-len": ["error", { "code": 40 }],
    },
  },
];

原理说明 #

ESLint 9的配置数组是按顺序合并的，每个配置对象都是独立的规则单元：

• 带files的配置只作用于匹配的文件
• 不带files的配置会全局生效，可能覆盖或干扰之前的文件特定配置

你之前的写法相当于给所有文件加了max-len规则，同时破坏了原有规则的匹配范围，导致规则失效。

内容的提问来源于stack exchange，提问作者Marvin3