Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
communitycreator

How to configure linting in React

Youssef Zidan

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...
  }
}
.eslintrc.json

  • .eslintignore

node_modules
.eslintignore

  • .prettierrc

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

  • .prettierignore

node_modules
.prettierignore

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
  }
}
settings.json

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.

RELATED TAGS

react
communitycreator
RELATED COURSES

View all Courses

Keep Exploring