Creating your own ESLint config package

ESLint is a powerful tool to enforce consistent coding conventions and ensure quality in your JavaScript codebase. Coding conventions are sometimes difficult to decide and having a tool to automate enforcement is great to avoid unnecessary discussions. Ensuring quality is also a welcoming 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 famous.

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

The first step is creating a new folder and creating an 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, 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.

Time to create a .prettierrc with your custom rules - this is a tricky part since Prettier and ESLint can conflict in 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. Next step is exporting your config in the index.js file:

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

module.exports = eslintrc;

It is technically possible to create all configuration in the index.js file however you wouldn't get the config object linted (insert your Inception joke here).

Voilà! That's all you need to start your own package of configurations. You can test locally your config package by running, 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.

More about it

• Configuring ESLint: official ESLint docs. You know, read the docs
• How to publish your first NPM package: quoting the post subtitle", everything you need to know to create a NPM package"
• eslint-config-wesbos: a project by Wes Bos that help me doing this work

--

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.