DIY: Custom ESLint Plugin

As developers, we always keep wondering about how ESLint plugins works and how easily can we can create one of our own. But we never really get time to check out the complex documentation and tutorial. Need of the hour is a simple DIY guide for making your custom ESList plugin with ease.

In this article, I will provide a detailed guide on how you can easily enforce your custom coding standards by creating your ESLint plugin.

Thanks to Apurva Jain for her guidance, help, and motivation to write this article.

ESLint plugin is a tool made for developers that helps in identifying patterns found in ECMAScript/JavaScript code, making code more consistent and bug-free.

For example:

Creating an ESLint plugin is almost as easy as using it, but why will one want to create ESLint plugins?

1. It enforces the developers to follow a certain set of rules defined by the plugin.
2. This can be found useful in scenarios such as having developers follow a custom code standard for a project.
3. It makes the life of the developers easier by indicating them with alerts for warnings ⚠️ or errors for the code guidelines set.

Many standard rules are predefined in the ESLint Core, so, one doesn’t need to write plugins for conventional rules.

If you’ve installed and used an ESLint plugin before, you might’ve noticed that each plugin is stored as a separate Node module, and each plugin exports a rule object which is pluggable into ESLint and thus enforcing the rules defined by the plugin.

In this article, let’s create a custom ESLint rule that throws an error/warning for using string literals instead of template literals.

In the screenshot below, VSCode indicates the developer with the ESLint error where he/she should be using template literals instead of string literals.

Steps for creating a custom ESLint Plugin

For creating a custom ESLint plugin we will be using VSCode, you can use any other editor of your choice.

Let’s get started!

1.First of all create a project folder where you want to have your custom ESLint plugin. Let’s name it CUSTOM-PLUGIN.

2. Inside the project folder create another folder named my-eslint-rules where you have to write your own ESLint rule.

3. After the folder has been created, navigate inside the folder and create a node package by typing the command npm init — yes in the terminal. We believe that npm is pre-installed in the system, otherwise, go ahead and install npm.

4. In package.json edit the name of the package: “name”: “eslint-plugin-<plugin-name>”

5. Create a file named index.js in the same level that exports the rules object with the custom rule.

Using AST nodes

It might be useful for you to know more about the types of AST nodes while writing your own ESLint plugin.

AST Explorer tool provides you a platform to run and test custom ESLint rules. AST stands for Abstract Syntax Tree / Syntax Tree which is a representation of the javascript code in a parsed tree format. You can also use the tool to figure out the AST node type by writing sample code.

Testing the ESLint Plugin rule on AST Explorer

1. Function to create the rule takes in a Context object which contains additional functionality that is helpful for rules to do their job.
2. It hosts a function called “report” which we’ll be using to produce warnings/errors (specifiable in the configuration).
3. Also, we can optionally pass the line of code for the editors to exactly pinpoint the error location, or optionally passing in the ESTree node makes the editor throw the warning/error on the node’s first occurrence.

After composing the rule in the explorer and making sure it captures rule conditions, move the logic back to the index.js of the plugin package, and that completes the plugin.

Now since we have successfully built our Plugin let’s have a look at how can we integrate our custom ESLint plugin into a node project.

Testing out the custom ESLint plugin

For testing out the custom ESLint plugin, first set up a node project at the root level. Let’s name it as node-app

1. After the project has been set navigate inside it and runs the command npm init — yes to generate an npm package.
2. Then create an index.js file that contains a function with some string literals to test the plugin that we have created and save it.
3. Install ESLint by running the command npm i eslint — save-dev
4. For the node project to understand and use the ESLint plugin create a configuration file called .eslintrc
5. If your code editor is not configured to show ESLint errors on its own, execute the ESLint binary from the terminal passing the javascript file as the argument for checking the enforcement of rules using the following command: ./node_modules/.bin/eslint index.js

Voila! That’s all to be done to see an ESLint warning/error after running it in the terminal if you use a string literal.

NOTE: The important part of using plugins in the project is the .eslintrc configuration file. The syntax for specifying rules from plugin is <plugin-name>/<rule-name>: [warn/error].

Do check out my custom template literal plugin and run it in locally: https://github.com/Meghan1202/custom-eslint

Conclusion

In this article, we have successfully created a custom ESLint plugin for template literals and used it in the node app. Creating your own ESLint plugins effectively allows you to enforce the dev team to adhere to your custom code standards and practices.

Go ahead — define your coding conventions and use ESLint to make sure everyone follows it 😎

Follow for more stories like this and don’t forget to share, comment, and give as many 👏 as possible.