Chore: use eslint

.eslintrc.yml

@@ -0,0 +1,29 @@
+env:
+  browser: true
+  es6: true
+extends:
+  - 'plugin:react/recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - standard
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 2018
+  sourceType: module
+  project: './tsconfig.json'
+plugins:
+  - react
+  - '@typescript-eslint'
+settings:
+  react:
+    version: 'detect'
+rules:
+  '@typescript-eslint/indent': ['error', 4, { 'SwitchCase': 0 }]
+  'indent': 'off'
+  '@typescript-eslint/explicit-function-return-type': 'off'
+  '@typescript-eslint/member-delimiter-style': ['warn', { multiline: { delimiter: 'none' }, singleline: { delimiter: 'comma' } }]
+  '@typescript-eslint/no-explicit-any': 'off'

configs/webpack/common.js

@@ -22,7 +22,7 @@ module.exports = {
             {
                 test: /\.tsx?$/,
                 enforce: 'pre',
-                use: ['tslint-loader']
+                use: ['eslint-loader']
             },
             {
                 test: /\.js$/,

package.json

@@ -20,7 +20,7 @@
         "build": "npm run clean-dist && NODE_ENV=production webpack --config=configs/webpack/prod.js",
         "clean-dist": "rm -rf dist",
         "lint": "npm run lint:ts && npm run lint:sass",
-        "lint:ts": "tslint './src/**/*.ts*' --format stylish",
+        "lint:ts": "eslint --ext=jsx,ts,tsx --fix src",
         "lint:sass": "stylelint './src/**/*.scss'",
         "start": "npm run start-dev",
         "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
@@ -28,55 +28,62 @@
         "contributors:generate": "all-contributors generate"
     },
     "devDependencies": {
-        "@babel/cli": "^7.7.7",
+        "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.7.7",
+        "@babel/core": "^7.8.4",
-        "@babel/preset-env": "^7.7.7",
+        "@babel/preset-env": "^7.8.4",
-        "@babel/preset-react": "^7.7.4",
+        "@babel/preset-react": "^7.8.3",
         "@hot-loader/react-dom": "^16.11.0",
         "@types/classnames": "^2.2.8",
         "@types/lodash-es": "^4.17.3",
-        "@types/node": "^13.1.1",
+        "@types/node": "^13.7.1",
-        "@types/react": "^16.9.17",
+        "@types/react": "^16.9.20",
-        "@types/react-dom": "^16.9.4",
+        "@types/react-dom": "^16.9.5",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-virtualized-auto-sizer": "^1.0.0",
         "@types/react-window": "^1.8.1",
-        "autoprefixer": "^9.7.3",
+        "@typescript-eslint/eslint-plugin": "^2.20.0",
+        "@typescript-eslint/parser": "^2.20.0",
+        "autoprefixer": "^9.7.4",
         "awesome-typescript-loader": "^5.2.1",
         "babel-loader": "^8.0.6",
         "babel-preset-minify": "^0.5.1",
-        "css-loader": "^3.4.0",
+        "css-loader": "^3.4.2",
+        "eslint": "^6.8.0",
+        "eslint-config-standard": "^14.1.0",
+        "eslint-loader": "^3.0.3",
+        "eslint-plugin-import": "^2.20.1",
+        "eslint-plugin-node": "^11.0.0",
+        "eslint-plugin-promise": "^4.2.1",
+        "eslint-plugin-react": "^7.18.3",
+        "eslint-plugin-standard": "^4.0.1",
         "file-loader": "^5.0.2",
         "html-webpack-plugin": "^3.2.0",
         "image-webpack-loader": "^6.0.0",
         "mini-css-extract-plugin": "^0.9.0",
         "offline-plugin": "^5.0.7",
         "postcss-loader": "^3.0.0",
-        "react-hot-loader": "^4.12.18",
+        "react-hot-loader": "^4.12.19",
-        "sass": "^1.24.0",
+        "sass": "^1.25.0",
-        "sass-loader": "^8.0.0",
+        "sass-loader": "^8.0.2",
-        "style-loader": "^1.1.2",
+        "style-loader": "^1.1.3",
-        "stylelint": "^12.0.1",
+        "stylelint": "^13.2.0",
-        "stylelint-config-standard": "^19.0.0",
+        "stylelint-config-standard": "^20.0.0",
-        "stylelint-webpack-plugin": "^1.1.2",
+        "stylelint-webpack-plugin": "^1.2.3",
-        "terser-webpack-plugin": "^2.3.1",
+        "terser-webpack-plugin": "^2.3.5",
-        "tslint": "^5.20.1",
+        "typescript": "^3.7.5",
-        "tslint-config-standard": "^9.0.0",
+        "webpack": "^4.41.6",
-        "tslint-loader": "^3.6.0",
+        "webpack-cli": "^3.3.11",
-        "typescript": "^3.7.4",
-        "webpack": "^4.41.5",
-        "webpack-cli": "^3.3.10",
         "webpack-dev-middleware": "^3.7.2",
-        "webpack-dev-server": "^3.10.1",
+        "webpack-dev-server": "^3.10.3",
         "webpack-merge": "^4.2.2",
-        "webpack-pwa-manifest": "^4.1.1"
+        "webpack-pwa-manifest": "^4.2.0"
     },
     "dependencies": {
-        "axios": "^0.19.0",
+        "axios": "^0.19.2",
         "classnames": "^2.2.6",
-        "dayjs": "^1.8.18",
+        "dayjs": "^1.8.20",
         "eventemitter3": "^4.0.0",
-        "immer": "^5.1.0",
+        "immer": "^5.3.6",
         "lodash-es": "^4.17.15",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
@@ -84,7 +91,7 @@
         "react-table": "^7.0.0-beta.12",
         "react-virtualized-auto-sizer": "^1.0.2",
         "react-window": "^1.8.5",
-        "swr": "^0.1.16",
+        "swr": "^0.1.17",
         "unstated-next": "^1.1.0",
         "use-immer": "^0.3.5"
     }

src/components/ButtonSelect/index.tsx

@@ -3,20 +3,20 @@ import { BaseComponentProps } from '@models/BaseProps'
 import classnames from 'classnames'
 import './style.scss'
 
-export interface ButtonSelectOptions {
+export interface ButtonSelectOptions<T = string> {
-    label: string,
+    label: string
-    value: any
+    value: T
 }
 
-export interface ButtonSelectProps extends BaseComponentProps {
+export interface ButtonSelectProps<T = string> extends BaseComponentProps {
     // options
-    options: ButtonSelectOptions[]
+    options: ButtonSelectOptions<T>[]
 
     // active value
-    value: any
+    value: T
 
     // select callback
-    onSelect?: (value: any) => void
+    onSelect?: (value: T) => void
 }
 
 export function ButtonSelect (props: ButtonSelectProps) {

src/components/Card/index.tsx

@@ -3,7 +3,7 @@ import { BaseComponentProps } from '@models/BaseProps'
 import classnames from 'classnames'
 import './style.scss'
 
-interface CardProps extends BaseComponentProps {}
+type CardProps = BaseComponentProps
 
 export function Card (props: CardProps) {
     const { className, style, children } = props

src/components/Loading/Spinner/index.tsx

@@ -4,7 +4,7 @@ import { BaseComponentProps } from '@models/BaseProps'
 
 import './style.scss'
 
-interface SpinnerProps extends BaseComponentProps {}
+type SpinnerProps = BaseComponentProps
 
 export function Spinner (props: SpinnerProps) {
     const classname = classnames('spinner', props.className)

src/components/Message/index.tsx

@@ -63,30 +63,6 @@ export function Message (props: MessageProps) {
     )
 }
 
-export const info = (
-    content: string,
-    duration?: number,
-    onClose?: typeof noop
-) => showMessage({ type: 'info', content, duration, onClose })
-
-export const success = (
-    content: string,
-    duration?: number,
-    onClose?: typeof noop
-) => showMessage({ type: 'success', content, duration, onClose })
-
-export const warning = (
-    content: string,
-    duration?: number,
-    onClose?: typeof noop
-) => showMessage({ type: 'warning', content, duration, onClose })
-
-export const error = (
-    content: string,
-    duration?: number,
-    onClose?: typeof noop
-) => showMessage({ type: 'error', content, duration, onClose })
-
 export function showMessage (args: ArgsProps) {
     // create container element
     const container = document.createElement('div')
@@ -113,3 +89,27 @@ export function showMessage (args: ArgsProps) {
 
     render(<Message {...props} />, container)
 }
+
+export const info = (
+    content: string,
+    duration?: number,
+    onClose?: typeof noop
+) => showMessage({ type: 'info', content, duration, onClose })
+
+export const success = (
+    content: string,
+    duration?: number,
+    onClose?: typeof noop
+) => showMessage({ type: 'success', content, duration, onClose })
+
+export const warning = (
+    content: string,
+    duration?: number,
+    onClose?: typeof noop
+) => showMessage({ type: 'warning', content, duration, onClose })
+
+export const error = (
+    content: string,
+    duration?: number,
+    onClose?: typeof noop
+) => showMessage({ type: 'error', content, duration, onClose })

src/components/Modal/index.tsx

@@ -37,7 +37,7 @@ export function Modal (props: ModalProps) {
         show = true,
         title = 'Modal',
         size = 'small',
-        footer= true,
+        footer = true,
         onOk = noop,
         onClose = noop,
         bodyClassName,

src/components/Select/index.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useLayoutEffect, useState, useMemo } from 'react'
 import classnames from 'classnames'
 import { Icon } from '@components'
 import { BaseComponentProps } from '@models'
+import { noop } from '@lib/helper'
 import { createPortal } from 'react-dom'
 import './style.scss'
 
@@ -24,16 +25,6 @@ export function Select (props: SelectProps) {
     const attachmentRef = useRef<HTMLDivElement>()
     const targetRef = useRef<HTMLDivElement>()
 
-    useLayoutEffect(() => {
-        document.addEventListener('click', handleGlobalClick, true)
-        return () => {
-            document.addEventListener('click', handleGlobalClick, true)
-            if (portalRef.current) {
-                document.body.removeChild(portalRef.current)
-            }
-        }
-    }, [])
-
     const [showDropDownList, setShowDropDownList] = useState(false)
     const [hasCreateDropList, setHasCreateDropList] = useState(false)
     const dropdownListStyles = useMemo(() => {
@@ -47,15 +38,25 @@ export function Select (props: SelectProps) {
         return {}
     }, [])
 
-    function handleGlobalClick (e) {
+    function handleGlobalClick (e: MouseEvent) {
         const el = attachmentRef.current
 
-        if (el && !el.contains(e.target)) {
+        if (el?.contains(e.target as Node)) {
             setShowDropDownList(false)
         }
     }
 
-    function handleShowDropList (e) {
+    useLayoutEffect(() => {
+        document.addEventListener('click', handleGlobalClick, true)
+        return () => {
+            document.addEventListener('click', handleGlobalClick, true)
+            if (portalRef.current) {
+                document.body.removeChild(portalRef.current)
+            }
+        }
+    }, [])
+
+    function handleShowDropList () {
         if (!hasCreateDropList) {
             if (!portalRef.current) {
                 // create container element
@@ -140,7 +141,7 @@ interface OptionProps extends BaseComponentProps {
 }
 
 export function Option (props: OptionProps) {
-    const { className: cn, style, key, disabled = false, children, onClick = () => {} } = props
+    const { className: cn, style, key, disabled = false, children, onClick = noop } = props
     const className = classnames('option', { disabled }, cn)
 
     return (

src/containers/App.tsx

@@ -21,7 +21,7 @@ function App () {
     }, [])
 
     const routes = [
-        // { path: '/', name: 'Overview', component: Overview, exact: true },
+    // { path: '/', name: 'Overview', component: Overview, exact: true },
         { path: '/proxies', name: 'Proxies', component: Proxies },
         { path: '/logs', name: 'Logs', component: Logs },
         { path: '/rules', name: 'Rules', component: Rules, noMobile: true },

src/containers/Connections/index.tsx

@@ -109,7 +109,7 @@ export default function Connections () {
             })
             .map(c => ({
                 id: c.id,
-                host: `${ c.metadata.host || c.metadata.destinationIP }:${ c.metadata.destinationPort }`,
+                host: `${c.metadata.host || c.metadata.destinationIP}:${c.metadata.destinationPort}`,
                 chains: c.chains.slice().reverse().join(' --> '),
                 rule: c.rule,
                 time: fromNow(new Date(c.start), lang),
@@ -141,7 +141,7 @@ export default function Connections () {
     ), [lang, t])
 
     useEffect(() => {
-        let streamReader: StreamReader<API.Snapshot> = null
+        const streamReader: StreamReader<API.Snapshot> = null
 
         function handleConnection (snapshots: API.Snapshot[]) {
             for (const snapshot of snapshots) {
@@ -154,10 +154,10 @@ export default function Connections () {
             }
         }
 
-        void async function () {
+        ;(async function () {
             const streamReader = await API.getConnectionStreamReader()
             streamReader.subscribe('data', handleConnection)
-        }()
+        }())
 
         return () => {
             if (streamReader) {
@@ -179,18 +179,18 @@ export default function Connections () {
         useResizeColumns
     )
     const headerGroup = useMemo(() => headerGroups[0], [headerGroups])
-    const renderItem = useMemo(() => rows.map((row, index) => {
+    const renderItem = useMemo(() => rows.map((row, i) => {
         prepareRow(row)
         return (
-            <div {...row.getRowProps()} className="connections-item">
+            <div {...row.getRowProps()} className="connections-item" key={i}>
                 {
-                    row.cells.map((cell) => {
+                    row.cells.map((cell, j) => {
                         const classname = classnames(
                             'connections-block',
                             { center: shouldCenter.has(cell.column.id), completed: !!(row.original as any).completed }
                         )
                         return (
-                            <div {...cell.getCellProps()} className={classname}>
+                            <div {...cell.getCellProps()} className={classname} key={j}>
                                 { cell.render('Cell') }
                             </div>
                         )
@@ -204,7 +204,7 @@ export default function Connections () {
         <div className="page">
             <Header title={t('title')}>
                 <span className="connections-filter total">
-                    { `(${t('total.text')}: ${t('total.upload')} ${ formatTraffic(traffic.uploadTotal) } ${t('total.download')} ${ formatTraffic(traffic.downloadTotal) })` }
+                    { `(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})` }
                 </span>
                 <Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{ t('keepClosed') }</Checkbox>
                 <Icon className="connections-filter dangerous" onClick={show} type="close-all" size={20} />
@@ -217,7 +217,7 @@ export default function Connections () {
                                 const id = column.id
                                 const handleClick = couldSort.has(id) ? () => handleSort(id) : noop
                                 return (
-                                    <div {...column.getHeaderProps()} className="connections-th" onClick={handleClick}>
+                                    <div {...column.getHeaderProps()} className="connections-th" onClick={handleClick} key={id}>
                                         { column.render('Header') }
                                         {
                                             sort.column === id && (sort.asc ? ' ↑' : ' ↓')

src/containers/Logs/index.tsx

@@ -20,19 +20,19 @@ export default function Logs () {
     }, [logsRef.current])
 
     useEffect(() => {
-        let streamReader: StreamReader<Log> = null
+        const streamReader: StreamReader<Log> = null
 
         function handleLog (newLogs: Log[]) {
             logsRef.current = logsRef.current.slice().concat(newLogs.map(d => ({ ...d, time: new Date() })))
             setLogs(logsRef.current)
         }
 
-        void async function () {
+        ;(async function () {
             const streamReader = await getLogsStreamReader()
             logsRef.current = streamReader.buffer()
             setLogs(logsRef.current)
             streamReader.subscribe('data', handleLog)
-        }()
+        }())
 
         return () => streamReader && streamReader.unsubscribe('data', handleLog)
     }, [])

src/containers/Overview/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-const logo = require('@assets/LOGO-fixing.svg')
+import logo from '@assets/logo-fixing.svg'
 
 export default function Overview () {
     return (

src/containers/Rules/index.tsx

@@ -15,7 +15,7 @@ export default function Rules () {
         fetch()
     }, [])
 
-    function renderRuleItem ({ index, style }) {
+    function renderRuleItem ({ index, style }: { index: number, style: React.CSSProperties }) {
         const rule = rules[index]
         return (
             <li className="rule-item" style={style}>

src/containers/Settings/index.tsx

@@ -56,7 +56,7 @@ export default function Settings () {
     }
 
     async function handleHttpPortSave () {
-        const [, err] = await to(updateConfig({ 'port': info.httpProxyPort }))
+        const [, err] = await to(updateConfig({ port: info.httpProxyPort }))
         if (!err) {
             await fetch()
             set('httpProxyPort', data.general.port)

src/global.d.ts

@@ -2,3 +2,8 @@ declare module '*.png' {
     const content: string
     export default content
 }
+
+declare module '*.svg' {
+    const content: string
+    export default content
+}

src/i18n/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/camelcase */
 import { useState, useCallback } from 'react'
 import get from 'lodash/get'
 import { getLocalStorageItem, setLocalStorageItem } from '@lib/helper'

src/lib/helper.ts

@@ -10,6 +10,7 @@ export function removeLocalStorageItem (key: string) {
     return window.localStorage.removeItem(key)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop () {}
 
 /**

src/lib/hook.ts

@@ -37,7 +37,9 @@ export function useObject<T extends object> (initialValue: T) {
 export function useInterval (callback: () => void, delay: number) {
     const savedCallback = useRef(noop)
 
-    useEffect(() => savedCallback.current = callback, [callback])
+    useEffect(() => {
+        savedCallback.current = callback
+    }, [callback])
 
     useEffect(
         () => {

src/lib/jsBridge.ts

@@ -52,6 +52,8 @@ declare global {
 
 }
 
+type JsBridgeCallback = (jsbridge: JsBridgeAPI) => void
+
 /**
  * Check if perched in ClashX Runtime
  */
@@ -68,10 +70,9 @@ export let jsBridge: JsBridge = null
  * JsBridge class
  */
 export class JsBridge {
-
     instance: JsBridgeAPI = null
 
-    constructor (callback = jsbridge => {}) {
+    constructor (callback: JsBridgeCallback) {
         if (window.WebViewJavascriptBridge) {
             this.instance = window.WebViewJavascriptBridge
             callback(this.instance)
@@ -89,7 +90,7 @@ export class JsBridge {
      * @param {Function} cb callback when jsbridge initialized
      * @see https://github.com/marcuswestin/WebViewJavascriptBridge
      */
-    private initBridge (callback) {
+    private initBridge (callback: JsBridgeCallback) {
         /**
          * You need check if inClashX first
          */

src/lib/request.ts

@@ -87,6 +87,28 @@ export interface Connections {
     rule: string
 }
 
+export async function getExternalControllerConfig () {
+    if (isClashX()) {
+        const info = await jsBridge.getAPIInfo()
+
+        return {
+            hostname: info.host,
+            port: info.port,
+            secret: info.secret
+        }
+    }
+
+    const hostname = getLocalStorageItem('externalControllerAddr', '127.0.0.1')
+    const port = getLocalStorageItem('externalControllerPort', '9090')
+    const secret = getLocalStorageItem('secret', '')
+
+    if (!hostname || !port) {
+        throw new Error('can\'t get hostname or port')
+    }
+
+    return { hostname, port, secret }
+}
+
 export const getInstance = createAsyncSingleton(async () => {
     const {
         hostname,
@@ -129,12 +151,12 @@ export async function getProxyProviders () {
         }
     })
     // compatible old version
-    .then(resp => {
+        .then(resp => {
-        if (resp.status === 404) {
+            if (resp.status === 404) {
-            resp.data = { providers: {} }
+                resp.data = { providers: {} }
-        }
+            }
-        return resp
+            return resp
-    })
+        })
 }
 
 export async function updateProvider (name: string) {
@@ -182,28 +204,6 @@ export async function changeProxySelected (name: string, select: string) {
     return req.put<void>(`proxies/${name}`, { name: select })
 }
 
-export async function getExternalControllerConfig () {
-    if (isClashX()) {
-        const info = await jsBridge.getAPIInfo()
-
-        return {
-            hostname: info.host,
-            port: info.port,
-            secret: info.secret
-        }
-    }
-
-    const hostname = getLocalStorageItem('externalControllerAddr', '127.0.0.1')
-    const port = getLocalStorageItem('externalControllerPort', '9090')
-    const secret = getLocalStorageItem('secret', '')
-
-    if (!hostname || !port) {
-        throw new Error('can\'t get hostname or port')
-    }
-
-    return { hostname, port, secret }
-}
-
 export const getLogsStreamReader = createAsyncSingleton(async function () {
     const externalController = await getExternalControllerConfig()
     const { data: config } = await getConfig()

src/models/BaseProps.ts

@@ -5,7 +5,7 @@ import { RouteComponentProps } from 'react-router'
  * expose base router component props
  * and mobx store to props
  */
-export interface BaseRouterProps extends RouteComponentProps<any> {}
+export type BaseRouterProps = RouteComponentProps
 
 export interface BaseComponentProps {
     className?: string

src/models/Log.ts

@@ -1,5 +1,5 @@
 export interface Log {
     type: string
-    payload: string,
+    payload: string
     time: Date
 }

src/models/Proxy.ts

@@ -90,7 +90,7 @@ export interface FallbackProxyGroup {
 
     url?: string
 
-    interval?: number  // second
+    interval?: number // second
 }
 
 export interface UrlTestProxyGroup {
@@ -102,5 +102,5 @@ export interface UrlTestProxyGroup {
 
     url?: string
 
-    interval?: number  // second
+    interval?: number // second
 }

src/models/Rule.ts

@@ -4,7 +4,7 @@ export interface Rule {
 
     payload?: string
 
-    proxy?: string   // proxy or proxy group name
+    proxy?: string // proxy or proxy group name
 
 }
 

src/stores/HookStore.ts

@@ -45,7 +45,7 @@ function useData () {
 
         const policyGroup = new Set(['Selector', 'URLTest', 'Fallback', 'LoadBalance'])
         const unUsedProxy = new Set(['DIRECT', 'REJECT', 'GLOBAL'])
-        const proxyList = rawProxies.data.proxies['GLOBAL'] as API.Group
+        const proxyList = rawProxies.data.proxies.GLOBAL as API.Group
         // fix missing name
         proxyList.name = 'GLOBAL'
         const proxies = proxyList.all

tslint.json

@@ -1,9 +0,0 @@
-{
-    "extends": "tslint-config-standard",
-    "rules": {
-        "indent": [true, "spaces", 4],
-        "ter-indent": [true, 4],
-        "no-empty": false,
-        "quotemark": [true, "single", "jsx-double"]
-    }
-}