How to configure linting in React

In this shot, we will configure linting in React projects with VS Code.

Linting automatically checks your source code for programmatic and stylistic errors.

1. Install VS Code extensions

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

2. Install packages as devDependencies

In your app directory, install the following:

  • 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
  • prettier

In the terminal, run the command below.

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 

prettier

3. Create configuration files

Create the following files in the root (same level as the /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",
    "prettier/react",
    "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. Override VS Code settings

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

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

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

Now, press Ctrl + Shift + U to open the Output tap in VSCode, and, in the drop-down menu, select ESLint and 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.
Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)