ESLint is a powerful tool that helps you enforce consistent coding conventions and ensure quality in your JavaScript codebase.

Coding conventions are sometimes difficult to decide on, and having a tool that automates their enforcement helps avoid unnecessary discussions. Ensuring quality is also a welcome feature: linters are excellent tools for catching bugs, such as those related to variable scope.

ESLint is designed to be completely configurable, giving you the option of enabling/disabling each rule, or mixing the rules to match your needs.  

With this in mind, the JavaScript community and companies who use JavaScript can extend the original ESLint config. There are several examples in the npm registry: eslint-config-airbnb is one of the most well-known.

In your daily routine, you will probably combine more than one config, since there is no one-config-fits-all. This post will show how to create your own repository of configurations, giving you the option to centralize all your rule definitions.

Create the project

First you'll need to create a new folder and npm project. By convention, the module name begins with eslint-config-, such as eslint-config-test.

mkdir eslint-config-test
cd eslint-config-test
npm init

You will have a package.json file that will look like the following snippet:

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Next, it's time to add your ESLint dependencies:

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

The packages will change according to your needs. In this case, I work with React codebases and I use Prettier to format my code. The documentation mentions that if your shareable config depends on a plugin, you should also specify it as a peerDependency.

Next, I will create a .eslintrc.js with my configuration - this is similar to what you already do in your apps:

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
  },
};

The rules object stores any rule that you want to override. In the snippet above rules is empty but feel free to check my overrides. In the Airbnb/JavaScript repository you can find a list of overridden rules by the community.

Create custom rules

Time to create a .prettierrc with your custom rules - this is a tricky part since Prettier and ESLint can conflict on a few rules:

{
  "tabWidth": 2
}

It is important to mention that the .prettierrc file should live in the root of the project that is using your package. Right now, I am manually copying it.

The next step is to export your config in the index.js file:

const eslintrc = require('./.eslintrc.js');

module.exports = eslintrc;

It is technically possible to create all configurations in the index.js file. But if you do this, you won't get the config object linted (insert your Inception joke here).

You're done!

Voilà! That’s all you need to start your own package of configurations. You can test locally your config package by running the following in a JavaScript project:

npm install /Users/leonardo/path/to/eslint-config-test

Keep in mind that the dependencies of your configuration package may also be installed.

If everything looks fine, you can publish to the npm registry:

npm publish

Full example

I have a functional GitHub project showing the setup of this post: eslint-config-leozera. You can also see it below:

More about the project

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by Susan Holt Simpson/Unsplash.