ESLint Config for React

What's Included?

• Recommended rules from eslint, prettier, react, react-hooks and react-refresh;
• Prettier;
• React Plugin;
• React Hooks Plugin;
• React Refresh Plugin;
• Simple Import Sort Plugin.

Installation and Usage

1. Install the package, as well as it's dependecies, as dev dependency:

$ npm i --save-dev @technohiru/eslint-config-react eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-simple-import-sort

2. Extend the default configuration file in the .eslintrc.{json|js} file:

.eslintrc.json

{
  "extends": ["@technohiru/eslint-config-react/default.js"]
}

.eslintrc.js

module.exports = {
  extends: ["@technohiru/eslint-config-react/default.js"],
};

3. Add these configurations to VS Code settings.json file for auto-fixing after every save:

"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact"]

(This ensures that simple-import-sort will be executed properly.)