为自定义ESLint规则添加fix属性后运行npx eslint报错求助

我在ESLint 8.33.0中尝试给no-restricted-syntax规则添加自定义修复功能，想自动批量修改代码库中被标记的问题，但添加fix后配置直接报错。去掉fix部分的配置能正常运行，以下是我的尝试代码和报错信息：

尝试的配置代码1 #

'no-restricted-syntax': [
    'error',
    {
        selector: "NewExpression[callee.name='BadObj']",
        message: "Creating a new instance of BadObj is not allowed, use newFunc() instead.",
        fix: fixer => {
            return fixer.replaceText(
              node,
              "newFunc"
            );
        },
    },
],

尝试的配置代码2 #

'no-restricted-syntax': [
    'error',
    {
        selector: "NewExpression[callee.name='BadObj']",
        message: "Creating a new instance of 'BadObj' is not allowed, use newFunc() instead.",
        // Add the fix function
        fix: function (fixer, node) {
            // Replace 'new Error' with 'newFunc()'
            const replacement = "newFunc()";

            // Apply the fix
            return fixer.replaceTextRange(node, replacement);
        },
    },
],

抛出的错误 #

Oops! Something went wrong! :(

ESLint: 8.33.0

Error: .eslintrc.js:
        Configuration for rule "no-restricted-syntax" is invalid:
        Value {"selector":"NewExpression[callee.name='Error']","message":"Creating a new instance of 'Error' is not allowed, use TestingError.getErrorModel() instead."} should be string.
        Value {"selector":"NewExpression[callee.name='Error']","message":"Creating a new instance of 'Error' is not allowed, use TestingError.getErrorModel() instead."} should NOT have additional properties.
        Value {"selector":"NewExpression[callee.name='Error']","message":"Creating a new instance of 'Error' is not allowed, use TestingError.getErrorModel() instead."} should match exactly one schema in oneOf.

    at ConfigValidator.validateRuleOptions (<filePath>eslintrc\dist\eslintrc.cjs:2027:23)
    at <filePath>\eslintrc\dist\eslintrc.cjs:2082:18
    at Array.forEach (<anonymous>)
    at ConfigValidator.validateRules (<filePath>eslintrc\dist\eslintrc.cjs:2079:34)
    at ConfigValidator.validateConfigArray (<filePath>eslintrc\dist\eslintrc.cjs:2205:18)
    at CascadingConfigArrayFactory._finalizeConfigArray (<filePath></filePath>eslintrc\dist\eslintrc.cjs:3962:23)
    at CascadingConfigArrayFactory.getConfigArrayForFile (<filePath>\eslintrc\dist\eslintrc.cjs:3768:21)
    at FileEnumerator._iterateFilesWithFile (<filePath>eslint\lib\cli-engine\file-enumerator.js:368:43)
    at FileEnumerator._iterateFiles <filePath>\eslint\lib\cli-engine\file-enumerator.js:349:25)
    at FileEnumerator.iterateFiles (<filePath>\eslint\lib\cli-engine\file-enumerator.js:299:59)

问题原因 #

ESLint内置的no-restricted-syntax规则不支持在配置中直接添加fix属性。该规则的配置项仅接受字符串选择器，或包含selector和message的对象，不允许额外的自定义属性，这就是报错中"should NOT have additional properties"的原因。

正确解决方案：自定义ESLint规则 #

要实现带自动修复的语法检查，需要创建自定义规则，而非在内置规则中强行添加fix逻辑。以下是针对需求的实现步骤：

1. 创建自定义规则文件 #

在项目中新建规则文件，比如lib/rules/no-new-badobj.js：

module.exports = {
    meta: {
        type: "suggestion",
        docs: {
            description: "Disallow creating new instances of BadObj, use newFunc() instead",
            category: "Best Practices",
            recommended: true
        },
        fixable: "code", // 声明规则支持自动修复
        schema: [] // 无需额外配置项
    },
    create(context) {
        return {
            // 匹配目标语法节点
            "NewExpression[callee.name='BadObj']"(node) {
                context.report({
                    node,
                    message: "Creating a new instance of BadObj is not allowed, use newFunc() instead.",
                    fix(fixer) {
                        // 替换整个new BadObj(...)为newFunc()
                        return fixer.replaceText(node, "newFunc()");
                    }
                });
            }
        };
    }
};

2. 在ESLint配置中注册规则 #

修改.eslintrc.js，添加自定义规则的配置：

module.exports = {
    // ...其他配置
    // 指定自定义规则所在目录
    rulesDirectories: ["./lib/rules"],
    rules: {
        // ...其他规则
        "no-new-badobj": "error"
    }
};

3. 运行自动修复 #

执行ESLint修复命令，批量修正代码：

eslint --fix your-code-directory/

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