chore: enhance linter (#5270)

* refactor: eslint

* fix: prefer early return

* fix: unsafe location

* fix: build failed

* fix: no simple template literal

* fix: no simple template literal

* fix: simple index access

* chore: improve eslint config

* fix: update dep

* fix: lockfile

* fix: no-inferrable-types

* chore: add more rules

* fix: react-key

Author: septs

.eslintrc.json

@@ -7,7 +7,7 @@
     "env": {
         "node": true
     },
-    "plugins": ["unused-imports", "lodash"],
+    "plugins": ["unused-imports"],
     "rules": {
         "constructor-super": "error",
         "dot-notation": "error",
@@ -37,7 +37,6 @@
         "no-template-curly-in-string": "error",
         "prefer-const": "warn",
         "use-isnan": "error",
-        "unused-imports/no-unused-imports-ts": "error",
-        "lodash/import-scope": ["error", "member"]
+        "unused-imports/no-unused-imports-ts": "error"
     }
 }

package.json

@@ -52,6 +52,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-conventional": "^16.0.0",
+    "@dimensiondev/eslint-plugin": "^0.0.1-20211222115249-7984aa5",
     "@dimensiondev/patch-package": "^6.5.0",
     "@jest/globals": "^27.4.4",
     "@magic-works/i18n-codegen": "^0.0.6",
@@ -63,7 +64,6 @@
     "eslint": "8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-lodash": "^7.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",

packages/.eslintrc.json

@@ -1,9 +1,14 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "project": "./tsconfig.eslint.json" },
+    "parserOptions": {
+        "ecmaVersion": 7,
+        "sourceType": "module",
+        "project": "./tsconfig.eslint.json",
+        "warnOnUnsupportedTypeScriptVersion": false
+    },
     "extends": ["../.eslintrc.json", "plugin:import/typescript"],
-    "plugins": ["@typescript-eslint", "unused-imports", "lodash", "import", "unicorn", "react", "react-hooks"],
+    "plugins": ["@typescript-eslint", "@dimensiondev", "unused-imports", "import", "unicorn", "react", "react-hooks"],
     "rules": {
         "no-restricted-imports": [
             "error",
@@ -21,6 +26,13 @@
         "yoda": "error",
         "radix": "error",
         "eqeqeq": ["error", "always"],
+        "import/no-deprecated": "warn",
+        "no-cond-assign": "error",
+        "no-constant-condition": "error",
+        "no-script-url": "error",
+        "no-throw-literal": "error",
+        "no-unmodified-loop-condition": "error",
+        "no-useless-concat": "error",
         "prefer-regex-literals": "error",
         "react/jsx-boolean-value": "error",
         "react/jsx-curly-brace-presence": ["warn", { "props": "never", "children": "never" }],
@@ -30,9 +42,6 @@
         "react/self-closing-comp": ["warn", { "component": true, "html": true }],
         "react-hooks/exhaustive-deps": "off",
         "react-hooks/rules-of-hooks": "error",
-        "import/no-deprecated": "warn",
-        "lodash/import-scope": ["error", "member"],
-        "unused-imports/no-unused-imports-ts": "warn",
         "unicorn/better-regex": "error",
         "unicorn/catch-error-name": ["error", { "ignore": ["^err$"] }],
         "unicorn/no-instanceof-array": "error",
@@ -43,19 +52,30 @@
         "unicorn/prefer-dom-node-dataset": "error",
         "unicorn/prefer-number-properties": "error",
         "unicorn/throw-new-error": "error",
+        "unused-imports/no-unused-imports-ts": "error",
+        "@dimensiondev/no-jsx-template-literal": "error",
+        "@dimensiondev/no-number-constructor": "off",
+        "@dimensiondev/no-simple-template-literal": "error",
+        "@dimensiondev/no-unsafe-location": "error",
+        "@dimensiondev/prefer-early-return": "error",
         "@typescript-eslint/await-thenable": "error",
+        "@typescript-eslint/no-base-to-string": "off",
         "@typescript-eslint/no-for-in-array": "error",
         "@typescript-eslint/no-implied-eval": "error",
+        "@typescript-eslint/no-inferrable-types": "error",
         "@typescript-eslint/no-invalid-this": "error",
         "@typescript-eslint/no-loop-func": "error",
         "@typescript-eslint/no-this-alias": "error",
+        "@typescript-eslint/prefer-enum-initializers": "error",
         "@typescript-eslint/prefer-for-of": "error",
         "@typescript-eslint/prefer-includes": "error",
+        "@typescript-eslint/prefer-literal-enum-member": "error",
         "@typescript-eslint/prefer-nullish-coalescing": "error",
         "@typescript-eslint/prefer-optional-chain": "error",
         "@typescript-eslint/prefer-reduce-type-parameter": "error",
+        "@typescript-eslint/prefer-regexp-exec": "off",
         "@typescript-eslint/prefer-string-starts-ends-with": "error",
-        "@typescript-eslint/prefer-enum-initializers": "error",
-        "@typescript-eslint/prefer-literal-enum-member": "error"
+        "@typescript-eslint/restrict-plus-operands": "off",
+        "@typescript-eslint/restrict-template-expressions": "off"
     }
 }

packages/dashboard/src/components/DashboardFrame/Navigation.tsx

@@ -65,7 +65,7 @@ const ListItemLink = styled(ListItemLinkUnStyled)(({ theme }) => {
             color: MaskColorVar.textLink,
             backgroundColor: theme.palette.background.default,
             position: 'relative',
-            [`${listItemIconClasses.root}`]: {
+            [listItemIconClasses.root]: {
                 color: MaskColorVar.textLink,
             },
             '&:after': {
@@ -91,7 +91,7 @@ const LogoItem = styled(MuiListItem)(({ theme }) => ({
 })) as any as typeof MuiListItem
 
 const ItemIcon = styled(ListItemIcon)(({ theme }) => ({
-    [`& svg`]: {
+    '& svg': {
         fontSize: 36,
     },
 }))

packages/dashboard/src/components/MaskAlert/index.tsx

@@ -9,8 +9,8 @@ const InfoAlert = styled(Alert)(({ theme }) => ({
         display: 'flex',
         alignItems: 'center',
         lineHeight: '16px',
-        color: `${MaskColorVar.secondaryInfoText}`,
-        fontSize: `${theme.typography.caption.fontSize}`,
+        color: MaskColorVar.secondaryInfoText,
+        fontSize: theme.typography.caption.fontSize,
     },
     [`&  > .${alertClasses.icon}`]: {
         alignItems: 'center',
@@ -20,45 +20,45 @@ const InfoAlert = styled(Alert)(({ theme }) => ({
     },
     // standard
     [`&.${alertClasses.standardInfo}`]: {
-        backgroundColor: `${getMaskColor(theme).infoBackground}`,
+        backgroundColor: getMaskColor(theme).infoBackground,
     },
     [`&.${alertClasses.standardInfo} .${alertClasses.icon}`]: {
-        color: `${getMaskColor(theme).secondaryInfoText}`,
+        color: getMaskColor(theme).secondaryInfoText,
     },
     [`&.${alertClasses.standardInfo} .${alertClasses.action}`]: {
-        color: `${getMaskColor(theme).secondaryInfoText}`,
+        color: getMaskColor(theme).secondaryInfoText,
     },
     // error
     [`&.${alertClasses.standardError}`]: {
-        backgroundColor: `${MaskColorVar.redMain.alpha(0.1)}`,
+        backgroundColor: MaskColorVar.redMain.alpha(0.1),
     },
     [`&.${alertClasses.standardError} .${alertClasses.icon}`]: {
-        color: `${getMaskColor(theme).redMain}`,
+        color: getMaskColor(theme).redMain,
         'path:first-child': {
-            fill: `${MaskColorVar.redMain.alpha(0.5)}`,
+            fill: MaskColorVar.redMain.alpha(0.5),
         },
         path: {
-            fill: `${getMaskColor(theme).redMain}`,
+            fill: getMaskColor(theme).redMain,
         },
     },
     [`&.${alertClasses.standardError} .${alertClasses.action}`]: {
-        color: `${getMaskColor(theme).redMain}`,
+        color: getMaskColor(theme).redMain,
     },
     [`&.${alertClasses.standardError} .${alertClasses.message}`]: {
-        color: `${getMaskColor(theme).redMain}`,
+        color: getMaskColor(theme).redMain,
     },
     // success
     [`&.${alertClasses.standardSuccess}`]: {
-        backgroundColor: `${MaskColorVar.greenMain.alpha(0.1)}`,
+        backgroundColor: MaskColorVar.greenMain.alpha(0.1),
     },
     [`&.${alertClasses.standardSuccess} .${alertClasses.icon}`]: {
-        color: `${getMaskColor(theme).greenMain}`,
+        color: getMaskColor(theme).greenMain,
     },
     [`&.${alertClasses.standardSuccess} .${alertClasses.action}`]: {
-        color: `${getMaskColor(theme).greenMain}`,
+        color: getMaskColor(theme).greenMain,
     },
     [`&.${alertClasses.standardSuccess} .${alertClasses.message}`]: {
-        color: `${getMaskColor(theme).greenMain}`,
+        color: getMaskColor(theme).greenMain,
     },
 }))
 

packages/dashboard/src/components/Mnemonic/MnemonicReveal.tsx

@@ -23,7 +23,7 @@ export function MnemonicReveal(props: MnemonicRevealProps) {
     return (
         <Grid container spacing={2}>
             {words.map((item, index) => (
-                <Grid item xs={3} key={index + item}>
+                <Grid item xs={3} key={index}>
                     <WordCard>{item}</WordCard>
                 </Grid>
             ))}

packages/dashboard/src/components/PageFrame/index.tsx

@@ -61,7 +61,7 @@ const PageTitle = styled(Grid)(({ theme }) => ({
 const Containment = styled(Grid)(({ theme }) => ({
     maxWidth: '100%',
     display: 'flex',
-    height: `calc(100vh - 64px)`,
+    height: 'calc(100vh - 64px)',
     overflow: 'hidden',
 }))
 

packages/dashboard/src/components/Restore/BackupInfoCard.tsx

@@ -10,15 +10,6 @@ interface BackupInfoProps {
 }
 
 export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
-    const economizeAbstract = (str: string) => {
-        if (!str.length) return <div>error</div>
-        if (str.length < 30) return <div>{str}</div>
-        return (
-            <Tooltip title={str} placement="top" arrow>
-                <div>{str.substr(0, 30) + '...' + '(' + str.split(',').length + ')'}</div>
-            </Tooltip>
-        )
-    }
     return (
         <Card variant="background">
             <Grid
@@ -47,3 +38,15 @@ export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
         </Card>
     )
 })
+
+function economizeAbstract(input: string) {
+    if (!input.length) return <div>error</div>
+    if (input.length < 30) return <div>{input}</div>
+    return (
+        <Tooltip title={input} placement="top" arrow>
+            <div>
+                {input.slice(0, 30)}...({input.split(',').length})
+            </div>
+        </Tooltip>
+    )
+}

packages/dashboard/src/components/Stepper/index.tsx

@@ -54,10 +54,9 @@ export const Stepper = (props: StepperProps) => {
 
     useEffect(() => {
         Children.forEach(props.children, (child: ReactElement<StepProps>) => {
-            if (isValidElement(child)) {
-                const name = child.props.name
-                setSteps(name, child)
-            }
+            if (!isValidElement(child)) return
+            const name = child.props.name
+            setSteps(name, child)
         })
     }, [])
 

packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx

@@ -66,12 +66,11 @@ export const ContactTableRow = memo<ContactTableRowProps>(({ network, contact, i
     const theme = useTheme().palette.mode
 
     const handleClickStar = useCallback(async () => {
-        if (currentPersona) {
-            contact.favorite
-                ? await removeContactFromFavorite(contact.identifier, currentPersona)
-                : await addContactToFavorite(contact.identifier, currentPersona)
-            onReset()
-        }
+        if (!currentPersona) return
+        contact.favorite
+            ? await removeContactFromFavorite(contact.identifier, currentPersona)
+            : await addContactToFavorite(contact.identifier, currentPersona)
+        onReset()
     }, [contact, currentPersona, onReset])
 
     const [{ loading }, handleClickInvite] = useAsyncFn(async () => {