eslint-config-react-frontend

eslint-plugin-react-config

Specific ESLint configuration for React projects based on Typescript. The setup is based on the guidelines provided by the official eslint documentation.

It applies the recommended rules from:

• eslint-friendly-formatter
• eslint-plugin-jest
• eslint-plugin-ordered-imports
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-sort-destructure-keys

Configuration

1. Install ESLint

# npm
npm install eslint --save-dev
# yarn
yarn add eslint --save

2. Install eslint-plugin-react-config

# npm
npm install eslint-plugin-react-config --save-dev
# yarn
yarn add -D eslint-plugin-react-config 

3. Install required ESLint React specific plugins and configure

All configurations inherit from some base rules. Therefore, these plugins are always required.

# npm
npm install eslint-friendly-formatter \
            eslint-plugin-jest \
            eslint-plugin-ordered-imports \
            eslint-plugin-prettier \
            eslint-plugin-react \
            eslint-plugin-react-hooks \
            eslint-plugin-sort-destructure-keys \
            --save-dev
# yarn
yarn add eslint-friendly-formatter \
            eslint-plugin-jest \
            eslint-plugin-ordered-imports \
            eslint-plugin-prettier \
            eslint-plugin-react \
            eslint-plugin-react-hooks \
            eslint-plugin-sort-destructure-keys \
            --dev

To import configuration for react:

module.exports = {
  extends: ['eslint-config-react-config/react'],
};

To import configuration for jest:

module.exports = {
  extends: ['eslint-config-react-config/jest'],
};

To import configuration for typescript:

module.exports = {
  extends: ['eslint-config-react-config/typescript'],
};

4. Run ESLint

Run the following script:

# npm
npx eslint .
# yarn
yarn eslint .

ESLint will lint all relevant files within the current folder, and output results.

Most IDEs via a ESLint plugin will also give these results.

Publishing package

To update the ruleset and publish as a public npm package, first authenticate yourself via npm and then run:

npm run publish:public

The package should then be available for public installation and usage. Further information about publishing npm packages can be found here