10 Steps to Create a Custom ESLint Plugin

Ever get frustrated with confusing or inconsistent function names in your code?

In this article, we're going to solve that problem by creating a custom ESLint plugin to keep code neat and readable by enforcing consistent function names.

So, what's ESLint? Think of it as a helpful tool that checks your code for mistakes and makes sure you're following good coding practices. The cool part? You can create your own rules to fit your style!

Let's get started:

• New Project: Create a new project and install ESLint by running the following command in your terminal:

mkdir myplugin
cd myplugin
npm init --y
npx eslint --init

---

• Plugin Directory: Next, create a directory called eslint-plugin and a file named index.js inside it. This is where our custom rules will live.

---

• Plugin Structure: In index.js, we'll set up our plugin. This file will have some properties like meta and rules.

  • meta: This holds the plugin name and version.
  • rules: This is where we'll define our custom rule to check function names.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {}
};

---

• Rule Object: Inside rules, we'll create our rule. The key is the rule ID, and the value is an object with a create function.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {},
  },
};

---

• Checking Function Names: create function returns an object with a Identifier method. In the Identifier function, we check if the code is an arrow function. Then, we make sure the function names start with a specific prefix, like "on" or "get" etc.

const rulePrefix = ["is", "pre", "on", "post", "get", "set"];

const isValidName = (name) => {
  const isValid = (prefix) => name.indexOf(prefix) === 0;
  return rulePrefix.some(isValid);
};

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {
      create(context) {
        return {
          Identifier: (node) => {
            if (node.parent?.init?.type === "ArrowFunctionExpression") {
              const { name } = node;
              if (!isValidName(name)) {
                context.report(
                  node,
                  `${name} should start with ${rulePrefix.join(", ")}.`
                );
              }
            }
          },
        };
      },
    },
  },
};

---

• Reporting Errors: If a function name doesn't start with the right prefix, we use context.report() to flag it as an error.

context.report(node, `${name} should start with ${rulePrefix.join(", ")}.`);

---

• ESLint Configuration: Now, we need to tell ESLint to use our plugin. We do this by adding it to the plugins object in our ESLint configuration file.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
  },
];

---

• Configuring the Rule: Set up the rule in the rules section with your chosen namespace.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
    rules: {
      "prefixMatcher/prefix": "warn",
    },
  },
];

---

• Testing Code: Create some code examples with both correct and incorrect function names in a folder called src.

const someFunction = () => {
  console.log("Hello World");
};
someFunction();

---

• Running ESLint: Finally, run npm run lint in your terminal to see ESLint in action.

npm run lint

---

If everything's set up correctly, ESLint will check your code and show error messages for any function names that don't follow the rules.

1:7  warning  someFunction should start with is, pre, on, post, get, set  prefixMatcher/prefix

✖ 1 problem (0 errors, 1 warning)

Thanks for reading! I hope this article helps you create your own ESLint plugin to enforce consistent function names in your code. I'm also attaching the code for the plugin here.

---

Must Read If you haven't

How to create JSX template engine from scratch

Rahul Sharma ・ Nov 23 '22

#jsx #react #javascript #webdev

React.js state management using signals

Rahul Sharma ・ Sep 21 '22

#react #signals #preact #javascript

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

#javascript #async #webdev #beginners

---

More content at Dev.to.

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon