Make a Rule (ESLint)

Make a New Rule

A super basic ESLint rule file[1] in Typescript looks like this:

import type { Rule } from "eslint";

const rule = {
    meta: {
        name: "new-rule",
        type: "problem",
        docs: {
            description: "Description of the rule in the rules index.",
            recommended: false,
        },
        messages: {
            newRule:
                "This is what will show in ESLint when the rule is violated.",
        },
    },

    create(context) {
        return {
            JSXElement: (node: Rule.Node) => {
                context.report({
                    node,
                    messageId: "newRule",
                });
            },
        };
    },
};

export default rule;

This will trigger an error at every JSXElement. ESLint traverses the AST[4,5] of the Javascript/Typescript document and runs one of the functions found in the return of the create property when that type is found. Think of them like you would CSS selectors, where you can even use a property name like "JSXElement > JSXElement" to only trigger when there is a JSXElement that is a direct descendant of another JSXElement.

References

Last modified: 202401040446