@hannohealth/eslint-config
A global ESLint and Prettier configuration with opinionated defaults for Hanno's JavaScript projects.
In addition to our base ESLint configuration, we also include variants for our Node, React and React Native projects.
This repository is private, but the package itself is published on npm and includes this README.
Installation
- Install the main package:
yarn add -D @hannohealth/eslint-config
- Install the peer dependencies:
yarn add -D @babel/core eslint prettier
Prettier
In your prettier.config.js
file, add the following:
module.exports = require('@hannohealth/eslint-config/prettier.config');
ESLint
Base
The base
configuration provides a baseline set of rules that are mainly drawn from eslint:recommended
, with a few modifications.
Add the following to your .eslintrc.js
file:
module.exports = {
extends: ['@hannohealth'],
};
It introduces the following plugins:
@babel/eslint-plugin
eslint-plugin-jest
eslint-plugin-jest-formatting
eslint-plugin-import
eslint-plugin-flowtype
eslint-plugin-promise
eslint-plugin-eslint-comments
eslint-plugin-sonarjs
We also include eslint-config-prettier
for Prettier compatibility and eslint-plugin-prettier
to notify any Prettier errors as ESLint errors in ESLint.
Defensive programming rules
These rules are designed to enforce defensive programming, but there's still room for improvement. The following scenarios haven't been covered yet, but might be re-considered in the future:
- Enforce else clauses: https://stackoverflow.com/questions/35053371/what-is-the-benefit-of-terminating-if-else-if-constructs-with-an-else-clause/35055736#35055736. Since there doesn't seem to be a rule yet that enforces this, we may have to building a custom one in the future
- Magic numbers: avoiding them is desirable, but should be restricted to user-facing values. Right now, this would require a huge amount of changes in our repositories, so we've left it out for now: https://eslint.org/docs/rules/no-magic-numbers
- Reduce function complexity: using https://eslint.org/docs/rules/max-lines-per-function and https://github.com/SonarSource/eslint-plugin-sonarjs/blob/master/docs/rules/cognitive-complexity.md would allow us to enforce this. Right now, they have been set to a relatively high threshold, but we may reduce this over time to restrict functions to a lower number of lines. The corresponding rules are marked with
TODO-complexity
- Stricter typing: Flow types can help us increase the level of type safety, but enforcing some of these stricter rules would lead to 100+ changes across our repositories, so they remain disabled for now. But we may consider reenabling them in the future. The corresponding rules are marked with
TODO-typing
.
Node
The node
configuration extends base
, but is otherwise a relatively minimal configuration which sets the environment to Node and allows us to use console logs.
To integrate, add the following to your .eslintrc.js
file:
module.exports = {
extends: ['@hannohealth/eslint-config/node'],
};
React
The react
configuration extends base
with some rules specific to React.
To integrate, add the following to your .eslintrc.js
file:
module.exports = {
extends: ['@hannohealth/eslint-config/react'],
};
It introduces the following plugins:
React Native
The react-native
configuration extends base
with some rules specific to React Native. Among other things, this enables the React Native globals and allows us to properly use the module resolver in a React Native codebase.
To integrate, add the following to your .eslintrc.js
file:
module.exports = {
extends: ['@hannohealth/eslint-config/react-native'],
};
It introduces the following plugins:
Even though this configuration inherits the eslint-plugin-cypress
from our React configuration, which is not suited for React Native, this shouldn't interfere with the React Native setup.
Editors
Visual Studio Code
If you're VS Code user, you may find adding this config to your .vscode/settings.json
helpful when you integrate the configuration into your project. This will ensure that linting happens on save and applies the appropriate settings:
{
"eslint.format.enable": true,
"editor.formatOnSave": true
}
Development
To set up the project for development:
- Clone the repository.
- Run
asdf install nodejs
(assuming you are using asdf to manage your node version) - Run
npm install --global yarn
- Run
yarn
to install dependencies.
When modifying this package, we suggest the following workflow, to test the package locally, and also in a more complex project which makes more extensive use of the rules:
- Make local changes.
- Run
yarn
to update dependencies. - Run
yarn lint:all
to perform initial checks. - Publish the package locally with
npx yalc publish
. - Test the changes in a standalone project with
npx yalc add @hannohealth/eslint-config
, thenyarn
to install updated dependencies. - Push changes in this package to the new project with
npx yalc publish --push
, thenyarn
in the new project to install updated dependencies.