Setting ESLint to Enhance Frontend Development

JavaScript Tools

Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

讓我們來談談如何以 ESLint 改進前端開發流程，且如何挑選 ESLint。

ESLint can

  • To find code problems
  • To find patterns that doesn’t adhere to style guides
  • Integrate with editors and CI pipeline to auto-check

More ESlint can do

  • Customize linting rules
  • Fix many problems automatically

What is the difference between linters and prettier?

Select Guides

Must have

More rules selected

  • Best practices
    • [error] default-case
    • [error] default-case-last (for version >= 7.0)
    • [error] default-param-last (conflicts with Redux reducer)
    • [warn] eqeqeq
    • [warn] no-empty-function
    • [warn] no-extra-bind
  • Stylistic issues
    • [warn] max-depth: 4
    • [warn] max-len: 100
    • [warn] no-multiple-empty-lines: max 2 lines
    • [warn] no-trailing-spaces: ignore comments
  • React
    • [error] react/no-access-state-in-setstate
  • React Hook
    • [error] react-hooks/rules-of-hooks
    • [warn] react-hooks/exhaustive-deps

Integrate with React Projects

Integrating ESLint with React project helps us to find problems and stick to coding guidelines.

Installation

Customize ESLint Configuration for Project Bootstrapped by Create-React-App

  • Step 1: extend ESlint
    • run touch .env at project root
    • add EXTEND_ESLINT=true to .env
  • Step 2: install React related ESlint config
    • run npm install eslint-plugin-react --save-dev
    • run npm install eslint-plugin-react-hooks --save-dev
  • Step 3: set .eslintrc
    • run touch .eslintrc at project root
    • remove "eslintConfig" settings in package.json
    • add the following to the file
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2020": true,
    "node": true
  },
  "extends": [
    // "react-app",  // will cause cannot find eslint error
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "rules": {
    "default-case": "error",
    "eqeqeq": "warn",
    "no-unused-vars": ["warn" , {
      "vars": "all",
      "args": "after-used",
      "argsIgnorePattern": "^_"
    }],
    "no-empty-function": "warn",
    "no-extra-bind": "warn",
    "max-depth": "warn",
    "max-len": [
      "warn",
      {
        "code": 100
      }
    ],
    "no-multiple-empty-lines": "warn",
    "no-trailing-spaces": [
      "warn",
      {
        "ignoreComments": true,
        "skipBlankLines": true
      }
    ],
    "react/no-access-state-in-setstate": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

備註

  • We hide react-app in extends and set eslint:recommended by ourselves.
  • If the settings do not work
    • delete node_modules
    • run npm install again
  • 若沒有使用 React Hook，不必加上 Hook 相關的 lint

Integrate with VSCode

"eslint.lintTask.enable": true,
"eslint.workingDirectories": "./",  // based on your project structure

References