style: format code with Prettier and StandardJS

eslint.config.mjs

@@ -15,25 +15,25 @@ const __dirname = path.dirname(__filename)
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
+  allConfig: js.configs.all
 })
 
 export default [
   {
-    ignores: ['node_modules/**/*', '**/CHANGELOG.md', '**/package-lock.json', 'dist/**/*', 'build/**/*', '**/coverage'],
+    ignores: ['node_modules/**/*', '**/CHANGELOG.md', '**/package-lock.json', 'dist/**/*', 'build/**/*', '**/coverage']
   },
   ...compat.extends('plugin:react/recommended', 'prettier'),
   {
     plugins: {
       react,
       '@typescript-eslint': typescriptEslint,
       'react-hooks': fixupPluginRules(reactHooks),
-      prettier,
+      prettier
     },
 
     languageOptions: {
       globals: {
-        ...globals.browser,
+        ...globals.browser
       },
 
       parser: tsParser,
@@ -42,15 +42,15 @@ export default [
 
       parserOptions: {
         ecmaFeatures: {
-          jsx: true,
-        },
-      },
+          jsx: true
+        }
+      }
     },
 
     settings: {
       react: {
-        version: 'detect',
-      },
+        version: 'detect'
+      }
     },
 
     rules: {
@@ -61,8 +61,8 @@ export default [
       'prettier/prettier': [
         'error',
         {
-          endOfLine: 'auto',
-        },
+          endOfLine: 'auto'
+        }
       ],
 
       semi: 'off',
@@ -94,7 +94,7 @@ export default [
       'no-inner-declarations': 'off',
       'no-unused-expressions': 'off',
       'no-unused-vars': 'off',
-      'no-plusplus': 'off',
-    },
-  },
+      'no-plusplus': 'off'
+    }
+  }
 ]

src/components/hooks/usePollingEffect/index.js

@@ -4,7 +4,7 @@ const usePollingEffect = (asyncCallback, dependencies = [], options = { interval
   const timeoutIdRef = useRef(null)
   useEffect(() => {
     // Side note: preceding semicolon needed for IIFEs.
-    ;(async function pollingCallback() {
+    ;(async function pollingCallback () {
       try {
         await asyncCallback()
       } finally {

src/components/hooks/useWebsocket/index.js

@@ -15,7 +15,7 @@ const useWebsocket = ({ url, verify }) => {
       { key: 0, value: '正在链接中' },
       { key: 1, value: '已经链接并且可以通讯' },
       { key: 2, value: '连接正在关闭' },
-      { key: 3, value: '连接已关闭或者没有链接成功' },
+      { key: 3, value: '连接已关闭或者没有链接成功' }
     ]
     try {
       ws.current = new WebSocket(url)
@@ -70,7 +70,7 @@ const useWebsocket = ({ url, verify }) => {
     wsData,
     readyState,
     closeWebSocket,
-    reconnect,
+    reconnect
   }
 }
 export default useWebsocket

src/components/stateful/TreeList/utils.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export function getDefaultKey(treeData) {
+export function getDefaultKey (treeData) {
   let selected = []
   let expanded = []
-  function forFn(data, parentKey) {
+  function forFn (data, parentKey) {
     return data.some((item) => {
       if (item.children && item.children.length) {
         return forFn(item.children, item.key)
@@ -17,14 +17,14 @@ export function getDefaultKey(treeData) {
 
   return { selected, expanded }
 }
-export function processTreeData(list, pid) {
+export function processTreeData (list, pid) {
   return list
     .filter((item) => item.pid === pid)
     .map((item) => ({
       pid,
       key: item.id,
       title: item.name,
-      children: processTreeData(list, item.id),
+      children: processTreeData(list, item.id)
     }))
 }
 
@@ -36,16 +36,16 @@ export const loopTreeData = (data) =>
         title,
         key: item.key,
         pid: item.pid,
-        children: loopTreeData(item.children),
+        children: loopTreeData(item.children)
       }
     }
     return {
       title,
       key: item.key,
-      pid: item.pid,
+      pid: item.pid
     }
   })
-export function expandTree(a, b, setExpandedKeys) {
+export function expandTree (a, b, setExpandedKeys) {
   if (b.expanded) {
     if (a.length > 0) {
       a.splice(0, a.length - 1)
@@ -75,27 +75,29 @@ export const loopTreeDataWithSearch = (data, searchValue) =>
     const beforeStr = item.title.substr(0, index)
     const afterStr = item.title.substr(index + searchValue.length)
     const title =
-      index > -1 ? (
-        <span>
-          {beforeStr} <span style={{ color: '#D12604' }}>{searchValue}</span> {afterStr}
-        </span>
-      ) : (
-        <span>{item.title}</span>
-      )
+      index > -1
+        ? (
+          <span>
+            {beforeStr} <span style={{ color: '#D12604' }}>{searchValue}</span> {afterStr}
+          </span>
+          )
+        : (
+          <span>{item.title}</span>
+          )
     if (item.children) {
       return {
         title,
         key: item.key,
         pid: item.pid,
         // selectable: item.flag,
-        children: loopTreeDataWithSearch(item.children, searchValue),
+        children: loopTreeDataWithSearch(item.children, searchValue)
       }
     }
     return {
       title,
       // selectable: item.flag,
       key: item.key,
-      pid: item.pid,
+      pid: item.pid
     }
   })
 export const getParentKey = (key, tree) => {

src/pages/home/index.jsx

@@ -80,8 +80,8 @@ const Home = () => {
       [
         {
           content: text,
-          role: 'user',
-        },
+          role: 'user'
+        }
       ],
       key,
       signal
@@ -168,22 +168,22 @@ const Home = () => {
         I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
       </section>
       <section style={{ marginBottom: 40 }}>
-        <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
+        <AutoLink text='foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin' />
       </section>
       <section>
-        <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+        <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
       </section>
       <section>
-        <IsometricCard text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?" />
+        <IsometricCard text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?' />
       </section>
       <StarRating value={2} />
-      <LineBordered text="A line bordered text." />
+      <LineBordered text='A line bordered text.' />
       <section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
         <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
       </section>
       <section style={{ marginBottom: 40 }}>
         <ScrollAnimation>
-          <LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
+          <LazyLoadImage src='https://picsum.photos/seed/picsum/300/160' alt='Strawberries' />
         </ScrollAnimation>
       </section>
       <section>
@@ -202,18 +202,18 @@ const Home = () => {
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeIn>
-          <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+          <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
         </AnimateOnScreen.FadeIn>
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeUp>
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img src='https://picsum.photos/360/200.jpg' alt='' />
         </AnimateOnScreen.FadeUp>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
         <AnimateOnScreen.ScaleIn>
           <>
-            <img src="https://picsum.photos/360/200/?blur=2" alt="" />
+            <img src='https://picsum.photos/360/200/?blur=2' alt='' />
             <section className={styles['blend-me']}>Mix Blend Mode</section>
           </>
         </AnimateOnScreen.ScaleIn>
@@ -229,26 +229,26 @@ const Home = () => {
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']}>
+        <button className={styles.button}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 50px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ width: 600, margin: '30px 0' }}>
-        <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
-        <Flex align="center">
+        <Input defaultValue={apiKey} placeholder='api key' onChange={changeApiKey} style={{ marginBottom: 20 }} />
+        <Flex align='center'>
           {/* <LinearWrap> */}
           <Input.TextArea
             ref={textareaRef}
             defaultValue={chatText}
-            placeholder="来，说点什么呗...Meta + Enter发送"
+            placeholder='来，说点什么呗...Meta + Enter发送'
             onChange={changeChatText}
             onKeyDown={onInputKeyDown}
             autoSize
@@ -258,13 +258,13 @@ const Home = () => {
           <Button
             style={{ margin: '0 10px' }}
             icon={<SendOutlined rotate={-60} />}
-            type="primary"
+            type='primary'
             disabled={isStream}
             onClick={onSubmit}
           >
             发送
           </Button>
-          <Button icon={<SendOutlined rotate={-60} />} type="primary" disabled={!isStream} onClick={onStop}>
+          <Button icon={<SendOutlined rotate={-60} />} type='primary' disabled={!isStream} onClick={onStop}>
             停止
           </Button>
         </Flex>

src/service/useFetch.js

@@ -17,7 +17,7 @@ export const useReqFetch = (url, opts) => {
       setLoading(true)
       const resData = await reqFetch(url, {
         ...opts,
-        controller,
+        controller
       })
       if (!canceled) {
         setRes(resData)
@@ -48,29 +48,29 @@ export const useReqFetch = (url, opts) => {
 export const usePostFetch = (url, opts) =>
   useReqFetch(url, {
     ...opts,
-    method: 'POST',
+    method: 'POST'
   })
 
 export const useGetFetch = (url, opts) =>
   useReqFetch(url, {
     ...opts,
-    method: 'GET',
+    method: 'GET'
   })
 
 export const usePutFetch = (url, opts) =>
   useReqFetch(url, {
     ...opts,
-    method: 'PUT',
+    method: 'PUT'
   })
 
 export const useDeleteFetch = (url, opts) =>
   useReqFetch(url, {
     ...opts,
-    method: 'DELETE',
+    method: 'DELETE'
   })
 
 export const usePatchFetch = (url, opts) =>
   useReqFetch(url, {
     ...opts,
-    method: 'PATCH',
+    method: 'PATCH'
   })