Configuring ESLint In React with Prettier, React Testing Library, Jest and AirBnb

Table of Contents

• 1. Installing VSCode Extensions
• 2. Installing the following packages as devDependencies
• 3. Creating configuration files
• 4. Overriding VSCode Settings
• That's it!

In this article, we will configure linting in React projects with VSCode.

1. Installing VSCode Extensions

First, you need to install the following extensions in VS Code.

• ESLint Extension
• Prettier

2. Installing the following packages as devDependencies

• eslint
• eslint-config-airbnb
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-testing-library
• eslint-plugin-jest
• jest
• prettier

by simply running the following command in the terminal.

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-plugin-jest jest prettier

3. Creating configuration files

Create the following files in the root (same level as /src folder) of your project

• .eslintrc.json
• .eslintignore
• .prettierrc
• .prettierignore

.eslintrc.json

{
  "root": true,
  "settings": {},
  "env": {
    "browser": true, // Enables browser globals like window and document
    "amd": true, // Enables require() and define() as global variables as per the amd spec.
    "node": true, // Enables Node.js global variables and Node.js scoping.
    "jest/globals": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 2020, // Use the latest ecmascript standard
    "sourceType": "module", // Allows using import/export statements
    "ecmaFeatures": {
      "jsx": true // Enable JSX since we're using React
    }
  },
  "extends": [
    "airbnb",
    "prettier",
    "plugin:testing-library/react",
    "plugin:jest/all"
  ],
  "plugins": ["prettier", "react", "react-hooks", "testing-library", "jest"],
  "rules": {
    "prettier/prettier": ["warn", {}, { "usePrettierrc": true }], // Use .prettierrc file as source
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // To allow importing .jsx files
    "no-console": 1,
    "no-unused-vars": 1,
    "import/no-unresolved": 2,
    "no-undefined": 2,
    "react/jsx-uses-vars": 2
    // add more rules here...
  }
}

.eslintignore

node_modules

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "endOfLine": "auto"
}

.prettierignore

node_modules

4. Overriding VSCode Settings

Create .vscode folder and inside of it settings.json file

This is important due to different VSCode options among developers working on the same project.

settings.json

{
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.json"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

That's it!

Now Press Ctrl + Shift + U to open the Output tap in VSCode, and from the Drop Down Menu select ESLint you should see something like this:

[Info  - 3:31:54 PM] ESLint server is starting
[Info  - 3:31:55 PM] ESLint server running in node v14.16.0
[Info  - 3:31:55 PM] ESLint server is running.