Fooxly ESLint Config for React

The default ESLint config for Fooxly projects using React.

🚀  Powered By

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

❤️  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.

     

☁️  Installation

using npm

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

using yarn

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

📐  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"]
}
...

📏  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

🏷️  Badge

Are you using this in one of your projects? Include this badge 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)