Best React.JS || Next.JS Linter Setup

The instructions presented here are highly recommended as they provide the most effective configuration for using eslint, prettier and editorconfig together in react.js || next.js.

Please follow the instructions provided:

npm i -g eslint
eslint --init

Select this options:

? How would you like to use ESLint?

> To check syntax, find problems, and enforce code style

? How would you like to define a style for your project?

> Use a popular style guide

? Which style guide do you want to follow?

> Standard: https://github.com/standard/standard

? What format do you want your config file to be in?

> JSON

Select your package management to proceed with the installation of the required packages.

mkdir .vscode
cd .vscode
echo {}> settings.json

In the settings.json file :

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": true
}

cd..
echo {}> .editorconfig

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

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

echo {}> .prettierrc.yml

Inside .prettierrc.yml file :

trailingComma: 'es5'
tabWidth: 2
semi: false
singleQuote: true

Add the following to the .eslintrc.json :

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/no-unknown-property": 0,
    "no-unused-vars": "off",
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ],
    "react/prop-types": 0
  }
}