Understanding ESLint's "Rules with Suggestions Must Set the `meta.hasSuggestions` Property to `true`" Error

What is ESLint and Why Does This Error Occur?

ESLint is a popular tool for identifying and fixing issues in JavaScript code. It allows developers to define custom rules and offers suggestions to improve code quality. However, for rules that provide suggestions, ESLint requires a specific configuration: the meta.hasSuggestions property must be set to true. If this isn't done, ESLint will throw an error, and any suggestions you provide will be ignored.

This issue usually arises when custom ESLint rules are created or when existing rules are modified to offer suggestions for fixing problems. Without properly setting the meta.hasSuggestions property, ESLint won’t know that your rule offers suggestions.

Understanding the meta.hasSuggestions Property

In ESLint, custom rules are defined with a meta object that contains important information about the rule. This includes metadata such as the rule’s name, description, and whether it offers suggestions for fixing code.

The meta.hasSuggestions property explicitly tells ESLint that the rule can suggest fixes. If this is not set to true, any meta.docs.suggestion fields defined within the rule will be ignored.

Example of the Problem

Let's say you're writing a custom ESLint rule that suggests replacing a variable name. Here’s an incorrect example without the meta.hasSuggestions property:

module.exports = {
    meta: {
      type: "suggestion",
      docs: {
        description: "Suggests replacing variable names",
        suggestion: true,  // This will be ignored
      },
      // Missing the hasSuggestions property
    },
    create(context) {
      return {
        Identifier(node) {
          if (node.name === 'oldName') {
            context.report({
              node,
              message: "Consider renaming 'oldName' to 'newName'.",
              suggest: [
                {
                  desc: "Rename to 'newName'.",
                  fix: function(fixer) {
                    return fixer.replaceText(node, 'newName');
                  },
                },
              ],
            });
          }
        },
      };
    },
  };

In this example, ESLint will ignore the suggestion because meta.hasSuggestions is not set to true.

How to Fix It

To fix this error, you need to set the meta.hasSuggestions property to true. Here’s the corrected version:

module.exports = {
    meta: {
      type: "suggestion",
      docs: {
        description: "Suggests replacing variable names",
      },
      hasSuggestions: true,  // This tells ESLint that this rule offers suggestions
    },
    create(context) {
      return {
        Identifier(node) {
          if (node.name === 'oldName') {
            context.report({
              node,
              message: "Consider renaming 'oldName' to 'newName'.",
              suggest: [
                {
                  desc: "Rename to 'newName'.",
                  fix: function(fixer) {
                    return fixer.replaceText(node, 'newName');
                  },
                },
              ],
            });
          }
        },
      };
    },
  };

By correctly setting meta.hasSuggestions, you ensure that ESLint recognizes your rule's suggestions, making your code cleaner and easier to maintain.

Understanding how to configure ESLint rules correctly is essential for effective code quality management. Always remember to set meta.hasSuggestions to true when your rule provides suggestions. This small change can prevent unnecessary errors and enhance the functionality of your custom ESLint rules.

Sources

• https://stackoverflow.com/questions/69578685/eslint-broken-rules-with-suggestions-must-set-the-meta-hassuggestions-propert
• https://github.com/facebook/react/issues/22545