Getting started with eslint for React

This repository contains the notes and code which I used to learn how to setup eslint for react projects

Instructions

Install eslint and create a config file

npm install eslint --save-dev
npx eslint --init

Personal Preference, inside the .eslintrc.json add

"react/jsx-filename-extension": [
        1,
        {
            "extensions": [
                ".js",
                ".jsx"
            ]
        }
    ],
"no-unused-vars": "warn",
"import/prefer-default-export": 0

under the rules. Add "jest": true under env.

Update the settings.json in the vscode

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",
"eslint.validate": [
    "javascript"
],

Add this to package.json
```
"lint": "eslint src/**/*.js",
"lint:fix": "eslint src/**/*.js --fix"
```
Now npm run lint:fix will enfore the linting style to the changes.
(Optional) To setup prettier, install the following packages
```
npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
```
and add "plugin:prettier/recommended" under extends in .eslintrc.json

Peronal Notes:

The difference between npm and npx is that npm is a package manager to install node packages golbally, where as npx is tool to execute packages. Packages used by npx are not installed globally so you have to carefree for the pollution for the long term.
When open sourcing projects or working as a group, its a good practice to setup linting.

SiddeshSambasivam/eslint-setup-react

Getting started with eslint for React

Instructions