Centralized ESLint Configuration
Do you know the problem of having multiple repositories with their own ESLint files and corresponding rules? Adding or changing a rule means going through all of your other repositories as well. Quite boring and annoying work.
At blogfoster, we have experienced the same issue after creating a couple of microservices and front-end applications. The solution for that is to create a centralized ESLint ruleset and configuration that can be used by all repositories. No rocket science at all.
I quickly want to give you an overview how we approached the problem and maybe you find the result useful for you.
At some point, we’ve declared the Airbnb ESLint ruleset as a foundation for all our JavaScript projects (backend and front-end). With some small adjustments we still want to use it in our centralized ESLint project.
Furthermore, we want to make certain configurations, e.g. parser or env settings, which are not predefined in the Airbnb setup.
All that is possible and nicely achievable with JavaScript and the way how ESLint is configurable. Let us have a quick look on blogfoster’s default configuration:
module.exports = {
extends: [
require.resolve('eslint-config-airbnb/base'),
require.resolve('./rules/default')
],
rules: {}
}; All configurations are created as modules which exposes an object with certain attributes. A list about all attributes can be found on the ESLint website.
As you can see here, the ruleset extends from the Airbnb ESLint config and overwrites rule definition with our own (./rules/default)
Integration is quite simple.
- Add the repository as a dependency of your repository,
npm install … - Just create a
.eslinrcfile in the root folder and add just one line to it,extends: 'blogfoster'
Coming back to the actual ruleset; let us have a look at the custom configuration and rules:
module.exports = {
env: {
'es6': true,
'node': true,
'mocha': true,
},
parser: require.resolve('babel-eslint'),
rules: {
'prefer-arrow-callback': 0,
'arrow-body-style': 0,
'array-bracket-spacing': [2, "always"],
'comma-dangle': [2, 'never'],
'space-before-function-paren': [2, {
anonymous: 'always',
named: 'never'
}],
'object-curly-spacing': [2, 'always'],
'max-len': [1, 120, 2, {
ignoreComments: true
}],
'new-cap': 0,
'no-shadow': 0,
'no-param-reassign': 0,
'func-names': 0,
'curly': [2, 'all']
}
};It is defined in which environments the script is designed to run in, the parser that is used and all rules that overwrite the defaults of Airbnb.
In general, it often makes sense to provide different configurations for different purposes. For example, we use our custom ESLint configuration in our React projects as well. In these project, other rules and configurations might apply.
Therefore, we’ve created an independent React configuration (react.js):
module.exports = {
extends: [
require.resolve('eslint-config-airbnb/base'),
require.resolve('./rules/default'),
require.resolve('./rules/react')
],
rules: {}
};More or less the same as the default configuration but it adds React specific rules on top. Additionally use blogfoster/react rather than using blogfoster in the .eslintrc.
Over whole, the creation of custom ESLint configuration is not that hard and I would encourage you to implement it for your projects as well.
The blogfoster ESLint configuration is publicly available on GitHub and you are free to use.
In the end, I would like to list some resources that helped us to build the repo:
