background-shape
feature-image

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

Setup the eslint and prettier to lint the errors and format your code

Install the dependencies

Install the following dependencies in your project using yarn or npm

# 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
# 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.

{
  "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.

{
  "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

{
  "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

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