Eslint custom rule without plugin(Without publishing to npm)

Creating a Custom ESLint Rule Using an ESLint Plugin

In this blog post, we will explore how to create a custom ESLint rule using an ESLint plugin. ESLint plugins are extensions for ESLint that allow you to enforce rules that are not implemented in the ESLint core. By creating custom ESLint rules, you can define specific coding conventions and practices for your project. Let’s dive in!

Introduction to ESLint Plugins

ESLint plugins provide additional rules and functionalities to ESLint. They enable you to enforce specific coding standards and practices that are not available in the core ESLint library. For example, you can create a custom rule to prohibit the use of alert in your codebase.

To develop custom ESLint rules, you need basic knowledge of JavaScript and Node.js. While you can install plugins from the npm store, it is also possible to write custom rules specific to your project requirements. In this guide, we will focus on testing custom ESLint rules without publishing them to the npm store.

Creating a Simple Rule

Let’s begin by creating a simple rule to restrict the usage of template literals in your code. Although this example may not be particularly useful in practice, it serves as a demonstration of the custom ESLint rule creation process.

Consider the following code snippet:

const a = `Hello world`; // Invalid
const a = 'Hello world'; // Valid

Our goal is to create a rule that flags the use of template literals as invalid.

ESLint Plugin Structure

The structure of an ESLint plugin consists of the following components:

module.exports = {
    rules: {
        "rule-name": {
            create: function (context) {
                // rule implementation ...
            }
        }
    }
};

Here’s what each component represents:

• rules: An object that contains all the rules provided by the plugin.
• "rule-name": The name of your custom rule.
• create: A function that takes a context object as a parameter and returns an object containing the rule’s implementation.

Setting up Our ESLint Plugin

Let’s set up the environment for our ESLint plugin:

1. Create a new directory for your ESLint plugin:

mkdir eslint-plugin-no-template-literals
cd eslint-plugin-no-template-literals

2. Initialize the project and install ESLint as a development dependency:

npm init -y
npm install -D eslint

Implementing Our Rule

Inside the eslint-plugin-no-template-literals directory, create an index.js file and add the following code:

module.exports = {
    rules: {
        "no-template-literals": {
            create: function (context) {
                return {
                    TemplateLiteral(node) {
                        context.report({
                            node,
                            message: "Do not use template literals"
                        });
                    }
                };
            }
        }
    }
};

The above code defines our custom ESLint rule named "no-template-literals". It targets the TemplateLiteral node in the Abstract Syntax Tree (AST) and reports an error whenever a template literal is encountered.

You can visit AST Explorer for more information

Usage of the Custom Rule

Once you have implemented the custom ESLint rule, you can add it to your project as a local dependency using npm:

npm add --dev file:./eslint-plugin-no-template-literals

The file:./eslint-plugin-no-template-literals part. will allow us to install a package that is on our local file system.

Configure the newly created rule

Finally, add the plugin and rule to your .eslintrc file. You can do that like so:

// eslintrc.js  
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "plugins": [ "no-template-literals" ],
    "rules": {
        "semi": "error",
        "no-template-literals/no-template-literals": 1
    }
}

Remove eslint-plugin prefix

By following these steps, you can leverage the custom ESLint rule in your project to enforce coding standards and practices.

In this blog post, we have covered the process of creating a custom ESLint rule using an ESLint plugin. You now have a clearer understanding of how to define and use custom rules to enforce specific coding conventions in your projects. Happy linting!