@fooxly/eslint-config-react v2.0.1

Fooxly ESLint Config for React

The default ESLint config for Fooxly projects using React.

:rocket:  Powered By

• eslint-config-standard
• eslint-config-standard-react
• eslint-plugin-react-hooks

:heart:  Support us

About 40% of your donation goes to one of the charities we support. For further information or questions please visit our website or contact us via charity@fooxly.com.

:cloud:  Installation

using npm

npm install --save-dev @fooxly/eslint-config-react

using yarn

yarn add -D @fooxly/eslint-config-react

:triangular_ruler:  Usage

We recommend using Babel's ESLint parser.

using .eslintrc

{
  "parser": "babel-eslint",
  "extends": ["@fooxly/eslint-config-react"]
}

using package.json

...
"eslintConfig": {
  "parser": "babel-eslint",
  "extends": ["@fooxly/eslint-config-react"]
}
...

:straight_ruler:  Our Configuration

We mostly utilize the Standard Code Style for React & JSX linting, with the following two rules disabled:

• React in JSX scope

  We have disabled this rule because we use @wordpress/babel-plugin-import-jsx-pragma in our Babel Preset for React and therefore do not require React to be in scope.

• JSX Event Handler naming

  We have disabled this rule because we name our event handlers in a different way than Standard does.

Hooks

We enforce the Rules of Hooks as well, and warn for exhaustive dependencies.

Class Components

We also enforce the following order for methods and/or variables in a Class component:

1. Static methods
2. Static variables
3. Instance variables
4. Lifecycle methods
5. everything else
6. Rendering methods (eg. renderButtons ())
7. render method

:label:  Badge

Are you using this in one of your projects? Include one of these badges in your README to let others know that your code is using the Fooxly code style.

[![js-fooxly-style](https://img.shields.io/badge/code%20style-fooxly-brightgreen)](https://www.npmjs.com/package/@fooxly/eslint-config-react)