重新配置 React 專案的 ESLint

升級 react-scripts

1. 移除 node-modules/
2. 執行 npm install --save --save-exact react-scripts@5.0.0
3. 執行 npm i

補安裝缺少的 query-string

執行 npm i query-string

初始化 ESLint

執行 eslint --init

問答中會自幫升級 ESLint（對應到 react-scripts）

補安裝 hooks 相關 Lint

執行 npm i -D eslint-plugin-react-hooks

並加入至 plugins

  plugins: [
    'react',
+   'react-hooks',
  ],

添加 ESLint rules

為了遷就現有風格。

  rules: {
    'new-cap': 'off',
    'no-unused-vars': 'warn',
    'space-before-function-paren': ['error', {
      anonymous: 'always',
      named: 'never',
      asyncArrow: 'always'
    }],
    'jsx-quotes': ['warn', 'prefer-double'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/jsx-indent': ['warn', 2, {
      checkAttributes: true,
      indentLogicalExpressions: true
    }],
    'react/jsx-indent-props': ['warn', 2],
    'react/jsx-closing-bracket-location': ['warn', 'tag-aligned'],
    'react/jsx-curly-spacing': ['warn', { when: 'never', children: true }],
    'react/jsx-tag-spacing': ['warn', {
      closingSlash: 'never',
      beforeSelfClosing: 'always',
      afterOpening: 'never',
      beforeClosing: 'never'
    }],
    'react/self-closing-comp': 'warn',
    'react/jsx-fragments': 'warn',
    'react/jsx-equals-spacing': [2, 'never'],

    // TODO: 正在遷移至新 ESLint 配置中，待修正完成後應移除以下 warning
    'react/prop-types': 'off',
    'no-case-declarations': 'off',
    'react/jsx-key': 'warn',
    'no-array-constructor': 'warn',
    'react/jsx-no-duplicate-props': 'warn',
    'array-callback-return': 'warn',
    'react/no-unescaped-entities': 'warn',
    'no-constant-condition': 'warn',
    'valid-typeof': 'warn'
  }

修改 IDE 工作區設定

編輯 .vscode/settings.json

新增：

+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },

並移除其他不必要的設定值，以防自動排版衝突：

-   "editor.formatOnSave": true,
-   "prettier.eslintIntegration": true,

執行自動修復

修復排版相關錯誤。

執行 eslint --fix . --ext .js,.jsx

移除 package.json 的 eslintConfig

當存在 .eslint.rc 時， eslintConfig 是多餘的。

🌟 指定 parser

執行 npm i -D @babel/eslint-parser @babel/preset-react

在 .eslintrc 加入以下：

+  parser: "@babel/eslint-parser",
   parserOptions: {
     ...,
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react']
+    }
   },

新增 extends

React 17 可以省略匯入 react，在 extends 加入 plugin:react/jsx-runtime。

https://zh-hant.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

  extends: [
    'plugin:react/recommended',
+   'plugin:react/jsx-runtime',
    'standard'
  ],

指定 React 版本

+  settings: {
+    react: {
+     version: 'detect'
+   }
+  },

Ref.

https://dev.to/brayanarrieta/integrate-eslint-with-your-react-project-javascript-29p
https://eslint.org/docs/user-guide/configuring/plugins#specifying-parser
https://github.com/facebook/create-react-app/issues/11771