Jakub notes • engineering

ESLint

React

Recommended configuration for React is to use recommended presets.

"extends": [
  "plugin:react/recommended",
  "plugin:react-hooks/recommended"
]

React plugin

https://www.npmjs.com/package/eslint-plugin-react

"extends": [
  "plugin:react/recommended"
]

Part of "plugin:react/recommended" is parserOptions.ecmaFeatures.jsx.

plugins: [
  'react'
],
rules: {
  // recommended rules
}
parserOptions: {
  ecmaFeatures: {
    jsx: true
  }
},

Plugin still requires settings for react. It warns when version settings is missing. It will default to "detect" in the future.
https://github.com/yannickcr/eslint-plugin-react#configuration

"settings": {
    "react": {
        "version": "detect"
    }
}

"plugin:react/all" configuration pairs well with the eslint:all rule.

"extends": [
  "eslint:all",
  "plugin:react/all"
]

React hooks plugin

https://www.npmjs.com/package/eslint-plugin-react-hooks
eslint-plugin-react-hooks by facebook/react

{
  "extends": [
    "plugin:react-hooks/recommended"
  ]
}

It has so far only 2 rules.
react-hooks/rules-of-hooks is checking proper use of hooks https://reactjs.org/docs/hooks-rules.html.
react-hooks/exhaustive-deps validates dependencies. They recommend to not use the dependencies for custom hooks.