DEV Community

Leonardo Faria
Leonardo Faria

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: {
  },
};
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Full example

I have a functional GitHub project showing the setup of this post: eslint-config-leozera.

More about it

--

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

Top comments (0)