The default ESLint config for Fooxly projects using React.
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.
npm install --save-dev @fooxly/eslint-config-react
yarn add -D @fooxly/eslint-config-react
We recommend using Babel's ESLint parser.
{
"parser": "babel-eslint",
"extends": ["@fooxly/eslint-config-react"]
}
...
"eslintConfig": {
"parser": "babel-eslint",
"extends": ["@fooxly/eslint-config-react"]
}
...
We mostly utilize the Standard Code Style for React & JSX linting, with the following two rules disabled:
-
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. -
We have disabled this rule because we name our event handlers in a different way than Standard does.
We enforce the Rules of Hooks as well, and warn for exhaustive dependencies.
We also enforce the following order for methods and/or variables in a Class component:
- Static methods
- Static variables
- Instance variables
- Lifecycle methods
- everything else
- Rendering methods (eg.
renderButtons ()
) render
method
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)