Recently, the eslint-config-prettier v8 upgrade broke my ESLint configuration, and I realized I needed a centralized way of managing my ESLint configuration across projects.
This is the outline for how I will solve common configuration across projects going forward. Here are the key features:
- Layer your ESLint rules based on topics: ESLint + Prettier, then TypeScript, then React/Vue.
- Use Lerna to publish scoped packages to npmjs.
- Some helper tools to upgrade your code.
Disclaimer: This is not my original work, but leveraged from other's work, most notably:
- The ESLint configuration started with ntnyq configs
- The TypeScript idea came from unlikelystudio settings
The benefit of this organizational structure is layering your ESLint rules. Some rules apply for TypeScript projects. Some for TypeScript/React projects. What if you add Prettier to the mix?
A picture is worth a 1000 words:
Each rule layers parent rules into it's rules. For example:
eslint-config-prettier-typescript-react:
extends: [
'@code-expert/typescript-react',
'@code-expert/prettier-react',
'@code-expert/prettier-typescript',
...
which in turn eslint-config-prettier-typescript:
extends: [
'@code-expert/typescript',
'@code-expert/prettier',
...
etc.
Naturally, when you publish your configs, they will reference your scope.
You should only add new rules to the following packages:
eslint-config: Add default js rules eslint-config-prettier Add eslint rules related to prettier eslint-config-react Add eslint react rules eslint-config-typescript Add eslint ts rules eslint-config-typescript-react Add eslint rules that should apply to the combination.
If you change the prettier configs change this in prettier-config. New ts config should be added to typescript
- Login to NPM using
npm login - Publish your packages using
lerna publish
eslint-config-typescript-react
eslint-config-prettier-typescript