# Setup .eslint, .prettier, .editorconfig, .jsconfig in react apps

### Install the dependencies

Install the following dependencies in your project using `yarn` or `npm`

```bash
# using yarn
yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier
```

```bash
# using npm
npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier
```

### Eslint configuration

Create `.eslintrc` in the root directory of the project and paste the following code into it. You can add, remove and change the rules of the eslint.

```json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "react/jsx-filename-extension": "off",
    "import/no-unresolved": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "react/no-array-index-key": "off",
    "import/prefer-default-export": "off",
    "react/react-in-jsx-scope": "off",
    "no-plusplus": "off"
  }
}
```


### Prettier configuration

Create `.prettierrc` in the root directory of the project and paste the following code into it. to format your code using prettier.

```json
{
  "semi": true,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all"
}
```

### Editorconfig configuration

Create `.editorconfig` in the root directory of the project and paste the code

```
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
```

### Jsconfig configuration

Create `jsconfig.json` in the root directory of the project and paste the code

```json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

```

### Adding Scripts in package.json

Add the following scripts in your project to run the eslint and prettier for lint andformat your code. Add the scripts in `package.json`

```json
{
    "scripts": {
    "escheck": "eslint .",
    "esfix": "eslint ./ --fix",
    "prettier": "prettier --write ."
  }
}
```