Fix the current problematic ESLint and Prettier workflow (#2662)

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+lerna run --no-bail --stream precommit

.prettierignore

@@ -0,0 +1,2 @@
+# These files are generated by tools and may be edited again by the tools, so we are temporarily not formatting them.
+**/packages/neuron-wallet/src/database/chain/migrations/**/*.ts

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "editor.rulers": [120],
   "eslint.workingDirectories": [
     {
       "directory": "packages/neuron-wallet",

package.json

@@ -35,14 +35,9 @@
     "test": "cross-env NODE_OPTIONS=--openssl-legacy-provider lerna run --parallel test",
     "test:ci": "yarn build:main && yarn test",
     "lint": "lerna run --stream lint",
-    "postinstall": "lerna run build --scope=@nervina-labs/ckb-indexer",
+    "postinstall": "husky install && lerna run build --scope=@nervina-labs/ckb-indexer",
     "db:chain": "node ./node_modules/.bin/typeorm"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lerna run --no-bail --stream precommit"
-    }
-  },
   "devDependencies": {
     "@babel/core": "7.21.4",
     "@types/jest": "27.5.2",
@@ -52,9 +47,13 @@
     "@typescript-eslint/parser": "5.58.0",
     "concurrently": "8.0.1",
     "cross-env": "7.0.3",
+    "eslint": "8.38.0",
+    "eslint-config-prettier": "8.8.0",
     "husky": "8.0.3",
     "lerna": "5.6.2",
+    "lint-staged": "13.2.1",
     "ncp": "2.0.0",
+    "prettier": "2.8.7",
     "ts-jest": "27.1.5",
     "typescript": "5.0.4",
     "wait-on": "6.0.1"

packages/neuron-ui/.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  extends: ['airbnb', 'plugin:@typescript-eslint/recommended', 'prettier'],
   settings: {
+    // https://github.com/SimulatedGREG/electron-vue/issues/423#issuecomment-464807973
+    'import/core-modules': ['electron'],
     'import/resolver': {
       node: {
         paths: ['src'],
@@ -13,92 +13,61 @@ module.exports = {
       version: 'detect',
     },
   },
+  env: {
+    jest: true,
+    node: true,
+    browser: true,
+  },
+  globals: {
+    BigInt: 'readonly',
+  },
   rules: {
-    'prettier/prettier': [
-      2,
-      {
-        printWidth: 120,
-        endOfLine: 'auto',
-      },
-    ],
-    semi: [2, 'never'],
-    curly: [2, 'all'],
-    'comma-dangle': [
-      2,
-      {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'always-multiline',
-        functions: 'ignore',
-      },
-    ],
-    'import/no-extraneous-dependencies': [
-      2,
-      {
-        devDependencies: true,
-      },
-    ],
-    'no-unused-vars': 'off',
-    'implicit-arrow-linebreak': 'off',
+    // TODO: Some temporarily disabled rules will be re-enabled later, considering that many files are affected and will be addressed in the future.
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+
+    // This is the configuration that was set when using eslint-plugin-prettier
+    // https://github.com/prettier/eslint-plugin-prettier#arrow-body-style-and-prefer-arrow-callback-issue
+    'arrow-body-style': 'off',
+    'prefer-arrow-callback': 'off',
+
+    // https://github.com/jsx-eslint/eslint-plugin-react/issues/498
+    'react/prop-types': 'off',
+
+    // TypeScript support
     '@typescript-eslint/no-unused-vars': [
       'error',
       {
-        vars: 'local',
-        args: 'after-used',
-        ignoreRestSiblings: false,
+        argsIgnorePattern: '^_',
       },
     ],
-    'arrow-parens': [2, 'as-needed'],
-    'max-len': [
-      2,
-      {
-        code: 120,
-        ignoreComments: true,
-        ignoreTrailingComments: true,
-        ignoreUrls: true,
-        ignoreStrings: true,
-        ignoreTemplateLiterals: true,
-        ignoreRegExpLiterals: true,
-      },
-    ],
-    'object-curly-newline': [
+    // Avoid duplicating @typescript-eslint/no-shadow
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+
+    // Unnecessary rules
+    'no-plusplus': 'off',
+    'max-classes-per-file': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    'react/require-default-props': 'off',
+    'react/jsx-props-no-spreading': 'off',
+
+    // Adjusted rules
+    'no-console': [
       'error',
       {
-        ObjectExpression: {
-          consistent: true,
-        },
-        ObjectPattern: {
-          consistent: true,
-        },
-        ImportDeclaration: {
-          consistent: true,
-        },
-        ExportDeclaration: {
-          multiline: true,
-          minProperties: 3,
-        },
+        allow: ['info', 'warn', 'error', 'group', 'groupEnd'],
       },
     ],
-    'no-plusplus': [0],
     'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
-    'max-classes-per-file': [0],
-    'react/jsx-filename-extension': [
-      1,
-      {
-        extensions: ['.ts', '.tsx'],
-      },
-    ],
-    'react/jsx-props-no-spreading': [0],
-    'typescript-eslint/no-angle-bracket-type-assertion': [0],
-    'no-alert': [0],
-    'no-console': [
-      2,
+    'import/no-extraneous-dependencies': [
+      'error',
       {
-        allow: ['info', 'warn', 'error', 'group', 'groupEnd'],
+        devDependencies: ['**/*.stories.*', 'src/setupTests.ts'],
       },
     ],
-    'no-bitwise': [0],
     'import/extensions': [
       'error',
       'ignorePackages',
@@ -107,53 +76,25 @@ module.exports = {
         tsx: 'never',
       },
     ],
-    'no-shadow': 'off',
-    '@typescript-eslint/no-shadow': ['error'],
-    '@typescript-eslint/no-var-requires': 'off',
-    'react/prop-types': 'off',
+    'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
+    'react/jsx-filename-extension': [
+      'warn',
+      {
+        extensions: ['.jsx', '.tsx'],
+      },
+    ],
     'react/function-component-definition': [
-      2,
+      'error',
       {
         namedComponents: 'arrow-function',
         unnamedComponents: 'arrow-function',
       },
     ],
-    'react/require-default-props': 'off',
-    '@typescript-eslint/ban-types': [
+    'react/jsx-no-useless-fragment': [
       'error',
       {
-        extendDefaults: true,
-        types: {
-          '{}': false,
-          Function: false,
-        },
+        allowExpressions: true,
       },
     ],
-    'no-unsafe-optional-chaining': ['warn', { disallowArithmeticOperators: false }],
-    'react/no-unstable-nested-components': ['warn', { allowAsProps: true }],
-    'default-param-last': 'off',
-    'react/jsx-no-useless-fragment': 'off',
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        'no-undef': 'off',
-      },
-    },
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        'react/jsx-no-constructed-context-values': 0,
-      },
-    },
-  ],
-  env: {
-    jest: true,
-    node: true,
-    browser: true,
-  },
-  globals: {
-    BigInt: 'readonly',
   },
 }

packages/neuron-ui/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: false,
+  singleQuote: true,
+  // TODO: This is the previous legacy configuration, should use the default settings, considering that more files are affected, and will be dealt with later.
+  // https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-arrowparens-to-always-7430httpsgithubcomprettierprettierpull7430-by-kachkaevhttpsgithubcomkachkaev
+  arrowParens: 'avoid',
+}

packages/neuron-ui/config-overrides.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 module.exports = function override(config) {

packages/neuron-ui/package.json

@@ -81,14 +81,10 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "jest-styled-components": "7.1.1",
-    "lint-staged": "13.2.1",
-    "prettier": "2.8.7",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "react-test-renderer": "16.14.0",

packages/neuron-ui/src/components/History/hooks.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { updateTransactionList } from 'states/stateProvider/actionCreators/transactions'
 import { listParams, backToTop } from 'utils'
 
-export const useSearch = (search: string = '', walletID: string = '', dispatch: React.Dispatch<any>) => {
+export const useSearch = (search: string, walletID: string, dispatch: React.Dispatch<any>) => {
   const [keywords, setKeywords] = useState('')
 
   const onKeywordsChange = (_e?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {