ESLint + Prettier + Next JS

ESlint & Prettier Configuration Link

1. You need to install these plugins

• ESLint
• Prettier – Code formatter

npm init @eslint/config or npx eslint –init

2. Or Manually Install Dev Dependencies

yarn add eslint-plugin-react eslint-config-airbnb@latest eslint --dev

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

3. Create a .eslintrc.json file in your root folder

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@next/next/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/jsx-no-bind": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "arrow-body-style": "off",
    "no-underscore-dangle": "off",
    "no-unused-expressions": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "jsx-a11y/anchor-has-content": "off",
    "no-unused-vars": "off",
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": ["function-declaration", "arrow-function"]
      }
    ],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "all",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true,
        "endOfLine": "auto",
        "jsxSingleQuote": true,
        "bracketSpacing": true
      }
    ],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/jsx-props-no-spreading": "off"
  }
}

4. In the settings.json file

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": true
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

ESLint + Prettier + Typescript with React

1. Install Dev Dependencies Eslint & Prettier

yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint @typescript-eslint/parser@latest eslint-plugin-import eslint-import-resolver-typescript eslint-config-airbnb-typescript

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

2. Create .eslintrc.json file in your root directory

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb-typescript",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "no-undef": "off",
    // "@typescript-eslint/no-explicit-any": "error",
    "import/no-named-as-default-member": "off",
    "react/react-in-jsx-scope": "off",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "array-callback-return": "off",
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": [
          "function-declaration",
          "arrow-function"
        ]
      }
    ],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx",
          ".tsx"
        ]
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
    "react": {
      "version": "detect"
    }
  }
}

Create .prettierrc.json

{
  "arrowParens": "always",
  "trailingComma": "es5",
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 100,
  "semi": true,
  "endOfLine": "auto"
}

.prettierignore to let Prettier know what files/folders not to format

build

3. In the settings.json file

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false, //disable all built-in syntax checking
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": false
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

4. Finally, we have to add the scripts in the package.json

  "scripts": {
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
    "format": "prettier --check **/*.{js,jsx,ts,tsx}",
    "format:fix": "prettier --write src/**/*.{js,jsx,ts,tsx,css}"
  },

ESLint + Prettier + React

Eslint & Prettier configuration:

https://github.com/learnwithsumit/think-in-a-react-way/tree/lesson-3

1. You need to install these plugins

• ESLint
• Prettier – Code formatter

npm init @eslint/config or npx eslint –init

Or Manually Install Dev Dependencies

yarn add -D eslint-plugin-react eslint-config-airbnb@latest eslint eslint-plugin-import eslint-plugin-react-hooks

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

2. Create a .eslintrc.json file in your root directory

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier"
  ],
  "rules": {
    "no-undef": "off",
    "no-unused-vars": "off",
    "react/jsx-no-target-blank": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "array-callback-return": "off",
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": [
          "function-declaration",
          "arrow-function"
        ]
      }
    ],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ]
  }
}

Create .prettierrc.json

{
  "arrowParens": "always",
  "trailingComma": "es5",
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 100,
  "semi": true,
  "endOfLine": "auto"
}

.prettierignore to let Prettier know what files/folders not to format

build

3. In the settings.json file

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false, //disable all built-in syntax checking
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": true
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

4. Finally, we have to add the scripts in the package.json

  "scripts": {
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
    "format": "prettier --check **/*.{js,jsx,ts,tsx}",
    "format:fix": "prettier --write src/**/*.{js,jsx,ts,tsx,css}"
  },