How to create a Shareable Eslint configuration

Have you worked across multiple projects and you have to create eslint rules for each of the projects you worked on? Well, this was me a few weeks back and It was tiring having to always create the rules in all of the projects. I was looking for a more efficient way to handle this and I came across Shearable configs. I tried it out and everything worked like a charm. It was really good and I decided I have to write about it to save others the stress of doing things the hard way.

What are shareable configs

Shareable configs are simply NPM packages that export a configuration object. So let's say you have a particular rule set/configuration which you always use for Eslint and you would like to have it as an NPM package and reuse it in other projects without having to write everything over and over again, then shareable config is here to the rescue.

Creating a shareable config

Prerequisite

You need to make sure you have node installed on your computer. You can click here to download node.js for your machine.

For starters, creating a shareable config is similar to creating a Node.js module. It is advisable that when naming your shareable config, you prefix it with eslint-config-yourprojectname. Especially if you want to open source your config and want others to easily find it then you can follow the naming convention.

Create a package.json file

Navigate to your project directory and run the command
```
 npm init -y
```
You should see something like this -

dhaxor@DESKTOP-NMC0VH5:~/myeslintproject$ npm init -y
Wrote to /home/dhaxor/myeslintproject/package.json:

{
  "name": "myeslintproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now open the directory with your favourite code editor; you should see a package.json with the default configuration you created. You can change the name field to something like eslint-config-share or any name you want to use.

Inside the directory, you can create an index.js file. This file is going to contain all of our Eslint configurations. An example of what your index.js would look like is something like this -

module.exports = {

    globals: {
        MyGlobal: true
    },

    rules: {
        semi: [2, "always"]
    }

};

Note: this is just us creating a simple rule set; you can have as much as you can and much more configuration. You can simply put whatever configuration you usually have in your eslintrc.json file here.

Publishing your Shareable Config to NPM

One of the important things to note before publishing your package is how to set compatibility for your package with a library or tool. So let's say we want to make sure that those using our Eslint config are using an Eslint version >= 4.0.0, we can use one of the properties of NPM which is peerDependency. So with peerDependency, we can flag a warning if the user is using a version that is not compatible with what we have. An example of what that looks like is -

{
    "peerDependencies": {
        "eslint": ">= 3"
    }
}

You have to add the line above to your package.json file.

To publish your package to NPM and make it available to everyone, you have to create an NPM account. Click here to sign up.
Now open your terminal and navigate to your project directory and type

    npm login

You will get a prompt to input your username,password and email. You input the credentials you used to sign up to the NPM account.
Now that you're successfully logged in, you type

      npm publish

This would publish your package to the npm registry. If you go to your npm profile and click on packages, you should see the package you created.

Using a Shareable config

Now you have successfully published your package to NPM registry, you can use it in any project now. Shareable configs are designed to work with the extends feature of .eslintrc files.

Simply navigate to your project run:

  npm install --save-dev eslint-config-share

Go to your .eslintrc.json file in your project and extend the config like this:

{
    "extends": "eslint-config-share"
}

And Voila! you have it working.

Summary

In this article, we have discussed how to create a shareable eslint configuration for your projects to prevent having to repeat yourself which goes against DRY principles. You can find the repository to this project on github here - github.com/Dhaxor/eslint-config-share

Connect with me

LinkedIn|Twitter

Gain John's blog