How To Publish Your ESLint Rules as NPM Package

Lately, I’ve been too lazy if I have to rewrite the exact same ESLint rules for my personal projects. Look at this. You maybe noticed this in my previous blog titled, Standardize Your Next.js Project.

Then I knew an old friend who told me that he created his own ESLint rules as an npm package. You can see his here. Like before, I asked him why he put an effort to create this thing? Simply because when he creates a new project (especially a personal project), he just needs to extend the ESLint rules. No need to rewrite the whole ESLint rules from scratch.

So, his statement inspires me to create my own ESLint config library.

First thing first, don’t forget to make an empty directory, then run npm init or yarn init. You can change eslint-config-test with your preferred folder name. Remember that eslint-config prefix must exist so it can be published at the NPM registry as the ESLint Config library.

You will have package.json file like this.

Now, install the dependencies that we’ll use to make our ESLint config. Remember, you don’t have to imitate this 100%. You may have some other preferred tools, that’s okay.

Now, you can start to write your own preferred ESLint rules. Start with creating eslintrc.js file, then modify it. Here’s mine, you can use it as a reference.

After you finish this step, now you can import it at index.js file.

Yep, technically you can now publish your rules. You can run npm publish or yarn publish. Then follow the step in the terminal. You can also create an NPM registry account if you don’t have it before.

Now how to use it? When you want to use it, you can easily extend it at your eslintrc file in your project folder. Here’s mine, you can access it at eslint-config-yehezgun.

This tutorial seems short, but it will have a long-term effect on you. You can now just need to adjust the ESLint config that has been published if you want to make some changes, then it will be implemented to all the projects that use the ESLint rules (you have to update the dependencies too).

Thanks for reading, hope it helps.

Reference:

Freecodecamp blog - How To Create Your Own ESLint Config Package