Reusing es-lint config and rules with Bit

[GiladShoham]

how to share ESLint config with Bit components?

[GiladShoham]

In this topic I discuss how to take ESlint config, build it into a component, and use it in different projects.

Note

Bit supports standardizing ESLint across components with the Component Development Environment feature. In this topic I will not cover this feature.

In their documentation, ESlint discusses the concept of shareable configs and describes in high-level how to do that.

Moving ESlint config to Bit components can be useful for two main cases:

• Share ESLint configuration across two unrelated Bit Component Development Environment.
• Share ESLint configuration between different projects.

Internally Bit manages a component with a default ESLint config (see here), which is then used as part of the React env (see line 5).

"componentize" ESLing config

Create a new component with three files:

eslint.js

This file should contain the ESLint config you want to share. See this example.

index.js

Base index file to set as the entry point for the component.

module.exports = require('./eslint');

eslint.docs.mdx

Document here your ESLing config and instructions on how to use it.

---
description: Shared ESLint configuration as a component
labels: ['eslint', 'configurations']
---

## Instructions

- Install this component as a `devDependency` in your project.
- Import this component in your project's ESlint config:

\`\`\`js
module.exports = {
  extends: [require.resolve('COMPONENT PACKAGE NAME')],
};
\`\`\`

## What's included

This ESLint config extends `eslint-config-airbnb-typescript` with minor optimizations:

`\`\`\`js
rules: {
  '@typescript-eslint/camelcase': 'off',
  'import/no-extraneous-dependencies': 'off',
  'import/prefer-default-export': 'off',
}
`\`\`\`

tag and export

Now that you have a component with ESLint config simply tag and export it just like any other Bit component.

Reuse ESLint config in other projects

For using the ESLing config in other projects:

• Install this component as a devDependency in any project.
• Import this component in your project's ESlint config:

module.exports = {
  extends: [require.resolve('COMPONENT PACKAGE NAME')],
};

Why require.resolve?

ESLint has a specific naming convention for packaged/shared configs, as Bit has naming conventions and uses . as a seperator in some cases, we need to use require.resolve to get the correct path, as we can't rely on ESLint loading its config correctly.

If using bit.dev for hosting your components you can't workaround this topic as package names are decided according to component ID. However, if you are publishing components to your own registry, you can use change the package name for the ESLint config component to something like eslint-config-react.

[sethen]

@GiladShoham Thank you so much for this answer. I've been searching everywhere for this. This should really be in the docs somewhere.