Skip to content

Latest commit

 

History

History
85 lines (52 loc) · 1.85 KB

README.md

File metadata and controls

85 lines (52 loc) · 1.85 KB

eslint-config-greenelab

ESLint config for React applications

Benefits

  • Centralized configuration for consistent coding style.
  • Simplified, single install. No numerous local and global plugin and config packages to install.
  • More up-to-date than some other configs, like Google's.
  • Explicitly includes all available rules from ESLint core and included plugins. No digging through dependencies to find what a particular rule is set to.
  • Nothing imported/extended. Avoids confusion about rules from different configs overriding each other in unexpected ways.
  • Declarative, explicit, single source of truth. What you see in this config is exactly what you should get, without exception or confusion.
  • YAML looks nicer than JSON and supports comments.
  • A bit better organized and documented than our previous configs, and possibly third-party configs.

Installation

yarn add --dev git+https://git@github.com/greenelab/eslint-config-greenelab.git

Usage

See: https://eslint.org/docs/user-guide/configuring

In a .eslintrc.yaml file:

extends:
  - greenelab

Usage with create-react-app

See: https://create-react-app.dev/docs/setting-up-your-editor

Adding an .eslintrc file will only affect ESLint in your editor. To ensure this package completely overrides the create-react-app built-in rules -- in your command-line and browser console as well -- additional steps are required.

In your .env:

EXTEND_ESLINT=true

AND

In a .eslintrc.yaml file:

extends:
  - react-app
  - greenelab

Usage in VSCode

Install the ESLint extension for VSCode.

Then, in settings.json:

"eslint.packageManager": "yarn"

Then, in keybindings.json:

{
  "key": "ctrl+alt+l",
  "command": "eslint.executeAutofix"
}