Configures ESLint & Prettier in React Hooks Project

Preface

When the project code is getting complex, it will be better to set and follow a guideline in order to maintain the readability and quality of the code.

The setup of ESLint enables editor to detect potential code issues, prompt and fix code errors automatically. Nevertheless, just relying on ESLint alone does not ensure the consistency of code style. After all, ESLint detection is focussing on code rules. Therefore, we will need Prettier to unify and maintain the code format and styling. Of course, to make sure that you and other developers will not have diverged on issues such as “using double or single quotes”, “with or without semicolons”, etc. during your development journey.

PS: This demonstration will be following Airbnb Javascript coding standards, while the editor used is VSCode.

Configuration

1. Open the built-in terminal in your editor.

• Press the shortcut key Ctrl + ` to open it.
• Browse the top navigation bar and choose View > Terminal.

Then, pastes the codes below into your terminal:

yarn add babel-eslint eslint prettier eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks --dev

Note: Since the dependencies above only required during development, so remember to add - -dev. If you’re installing using NPM, add - -save-dev。

You should be able to see all of the dependencies under devDependencies section in package.json after the installation is successful.

package.json

2. Now, creates two files .eslintrc.json & .prettierrc and add them into your root folder.

Project root path

Add the code below into .eslintrc.json:

{
  "env": {
    "serviceworker": true,  //React Native项目不需要添加这行
    "browser": true,
    "es6": true  
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
       "jsx": true 
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier", "react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",   
    "react-hooks/exhaustive-deps": "warn",
    // These two lines above must be added in order to display
       corresponding errors and warning while using hooks
    "react/jsx-filename-extension": [
      1,
      {
      "extensions": [".js", ".jsx"]
      }
    ],
    "linebreak-style": 0,
    "react/forbid-prop-types": 0,
    "no-plusplus": [
       1,       {
         "allowForLoopAfterthoughts": true
       }
    ]
  }
}

Then, add the code below into .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Note: If you do not wish to use single quote in your project, you may change the value of singleQuote to false.

3. We can modify the editor settings just to increase the ease of use during our development. Search and install ESLint and Prettier extension in the editor marketplace. You may set your own settings, or follow the configuration below to update the editor settings:

{ 
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.tabSize": 2,
  "eslint.alwaysShowStatus": true,
  "prettier.jsxSingleQuote": true,
  "javascript.preferences.quoteStyle": "single",
  "javascript.updateImportsOnFileMove.enabled": "always"
}

Now, ESLint should start to detect all the code errors and format automatically!

As you can see, ESLint will highlight and display warning on code issues as well as provide options to fix it. Meanwhile, you will see Prettier also formats and unifies the code style automatically upon saving the file by pressing Ctrl + s.

In just three steps, ESLint & Prettier has been setup successfully without needed to configure webpack. These configuration steps also suitable apply in React Native project。

Happy coding!