grossbart / eslint-config

Shareable ESLint/Prettier/TypeScript configurations

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

Layered ESLint

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.

Add rules

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

Instructions to publish

• Login to NPM using npm login
• Publish your packages using lerna publish

Included Configs

ESLint

eslint-config

eslint-config-prettier

ESLint with React

eslint-config-react

eslint-config-prettier-react

ESLint with TypeScript

eslint-config-typescript

eslint-config-typescript-react

eslint-config-prettier-typescript

eslint-config-prettier-typescript-react

Prettier

prettier-config

Typescript

typescript