substantial/eslint-config

@substantial/eslint-config

A base, hopefully non-controversial eslint config for our projects.

Installation

$ yarn add --dev @substantial/eslint-config eslint-config-prettier eslint-plugin-prettier

For jest also run:

$ yarn add --dev eslint-plugin-jest

For react also run:

$ yarn add --dev eslint-config-react-app @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Usage

Add this to your eslint config, leaving out any configs that do not apply to your project:

{
  "extends": [
    "@substantial/eslint-config",
    "@substantial/eslint-config/react",
  ],

  "overrides": [
    {
      "files": ["**/*.test.[jt]s?(x)"],
      "extends": [
          "@substantial/eslint-config/jest"
      ]
    }
  ]
}

Details

@substantial/eslint-config

Uses eslint:recommended as well as some of the TypeScript overrides from eslint-config-react-app

@substantial/eslint-config/react

Uses eslint-config-react-app

@substantial/eslint-config/jest

The usage guide assumes tests are in files ending in .test.js (or jsx, ts, tsx), but you may change the files override to anything you like.

eslint-config's Issues

Consider removing `eslint-plugin-prettier`

According to Prettier docs, it is "generally not recommended" to use eslint-plugin-prettier, versus having a separate prettier formatting workflow outside of eslint.

The link says:

The downsides of those plugins are:

• You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in your face about it!
• They are slower than running Prettier directly.
• They’re yet one layer of indirection where things may break.

In my personal, I have experienced tooling like Visual Studio Code break when using eslint-plugin-prettier and auto-fixing lint issues. What I've seen is that extra lines of code will be deleted, probably because VS Code is formatting on save (by default) and then running eslint --fix, which may be formatting on the stale file. So, for most recent projects I have followed the practices outlined on the Prettier site and haven't had problems.

We may want to look into a different way of sharing prettier configuration, so that projects can adopt this package without worrying about tradeoffs.

(Writing this issue as result of a retro item for the USCSF IWalk-Web engagement.)