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
1. Install ESLint
# npm
npm install eslint --save-dev
# yarn
yarn add eslint --save# npm
npm install eslint-plugin-react-config --save-dev
# yarn
yarn add -D eslint-plugin-react-config 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 \
--devTo 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'],
};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.
To update the ruleset and publish as a public npm package, first authenticate yourself via npm and then run:
npm run publish:publicThe package should then be available for public installation and usage. Further information about publishing npm packages can be found here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent