[chore] add simple-import-sort & update jsxSingleQuote rule (#43)

IdeaMall · May 11, 2023 · 8d08a7e · 8d08a7e
1 parent e881704
commit 8d08a7e
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 70 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,12 @@
 {
   "extends": ["taro/react"],
+  "plugins": ["simple-import-sort"],
   "rules": {
+    "@typescript-eslint/no-shadow": "off",
+    "import/first": "off",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "react/sort-comp": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
   }

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,6 +7,9 @@ jobs:
   Build-and-Deploy:
     runs-on: ubuntu-latest
     env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
       WMA_ID: ${{ secrets.WMA_ID }}
     steps:
       - uses: actions/checkout@v3
@@ -18,7 +21,9 @@ jobs:
           node-version: 16
           cache: pnpm
       - name: Install Dependencies
-        run: pnpm i --frozen-lockfile
+        run: |
+          echo '${{ secrets.NPM_RC }}' >> .npmrc
+          pnpm i --frozen-lockfile
 
       - name: Build HTML 5 version
         if: ${{ !env.WMA_ID }}

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -26,7 +26,9 @@ jobs:
           cache: pnpm
       - name: Install Dependencies
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm i --frozen-lockfile
+        run: |
+          echo '${{ secrets.NPM_RC }}' > .npmrc
+          pnpm i --frozen-lockfile
 
       - name: Build HTML 5 version
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}

diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
@@ -83,11 +84,13 @@
     "webpack": "~5.82.0"
   },
   "prettier": {
-    "singleQuote": true,
     "trailingComma": "none",
-    "arrowParens": "avoid"
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "jsxSingleQuote": true
   },
   "lint-staged": {
-    "*.{md,js,ts,tsx,json,yml}": "prettier --write"
+    "*.{md,js,ts,tsx,json,yml}": "prettier --write",
+    "*.{js,jsx,ts,tsx}": "eslint --fix"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,7 +1,7 @@
-import { PropsWithChildren, PureComponent } from 'react';
-
 import './app.less';
 
+import { PropsWithChildren, PureComponent } from 'react';
+
 export default class App extends PureComponent<PropsWithChildren> {
   componentDidShow() {}
 

diff --git a/src/components/AreaSelect.tsx b/src/components/AreaSelect.tsx
@@ -1,10 +1,10 @@
+import { Area, FormItem, Popup } from '@antmjs/vantui';
+import { AreaProps } from '@antmjs/vantui/types/area';
+import { FormItemProps } from '@antmjs/vantui/types/form';
+import { areaList } from '@vant/area-data';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
-import { FormItem, Area, Popup } from '@antmjs/vantui';
-import { FormItemProps } from '@antmjs/vantui/types/form';
-import { AreaProps } from '@antmjs/vantui/types/area';
-import { areaList } from '@vant/area-data';
 
 export type Area = Record<'name' | 'code', string>;
 
@@ -68,7 +68,7 @@ export class AreaSelect extends PureComponent<AreaSelectProps> {
 
         <Popup
           show={show}
-          position="bottom"
+          position='bottom'
           style={{ height: '50vh' }}
           onClose={this.close}
         >

diff --git a/src/components/GitList.tsx b/src/components/GitList.tsx
@@ -1,9 +1,9 @@
+import { Cell,CellGroup } from '@antmjs/vantui';
 import { observer } from 'mobx-react';
-import { CellGroup, Cell } from '@antmjs/vantui';
 
-import { ScrollListProps, ScrollList } from './ScrollList';
-import { i18n } from '../store/Translation';
 import repositoryStore, { Repository } from '../store/Repository';
+import { i18n } from '../store/Translation';
+import { ScrollList,ScrollListProps } from './ScrollList';
 
 export type GitListProps = ScrollListProps<Repository>;
 
@@ -24,7 +24,7 @@ export class GitList extends ScrollList<GitListProps> {
     return (
       <CellGroup>
         {allItems.map(({ full_name, description }) => (
-          <Cell title={full_name} label={description} />
+          <Cell key={full_name} title={full_name} label={description} />
         ))}
       </CellGroup>
     );

diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { redirectTo } from '@tarojs/taro';
 import { Tabbar, TabbarItem } from '@antmjs/vantui';
+import { redirectTo } from '@tarojs/taro';
+import { FC } from 'react';
 
 export interface MainNavProps {
   path: string;
@@ -14,13 +14,13 @@ export const MainNav: FC<MainNavProps> = ({ path }) => (
     active={path}
     onChange={({ detail }) => redirectTo({ url: `/pages/${detail}` })}
   >
-    <TabbarItem icon="points" name="home">
+    <TabbarItem icon='points' name='home'>
       MobX
     </TabbarItem>
-    <TabbarItem icon="cluster-o" name="component">
+    <TabbarItem icon='cluster-o' name='component'>
       组件
     </TabbarItem>
-    <TabbarItem icon="exchange" name="interface">
+    <TabbarItem icon='exchange' name='interface'>
       接口
     </TabbarItem>
   </Tabbar>

diff --git a/src/components/RangeField.tsx b/src/components/RangeField.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import { Row, Col, FormItem, Slider } from '@antmjs/vantui';
+import { Col, FormItem, Row, Slider } from '@antmjs/vantui';
 import { FormItemProps } from '@antmjs/vantui/types/form';
 import { SliderProps } from '@antmjs/vantui/types/slider';
+import { FC } from 'react';
 
 export interface RangeFieldProps
   extends Pick<FormItemProps, 'name' | 'required' | 'rules'>,
@@ -27,7 +27,7 @@ export const RangeField: FC<RangeFieldProps> = ({
     </FormItem>
 
     <Row>
-      <Col span="14" offset="8" className="py-3">
+      <Col span='14' offset='8' className='py-3'>
         <Slider range value={value} {...rest} />
       </Col>
     </Row>

diff --git a/src/components/ScrollList.tsx b/src/components/ScrollList.tsx
@@ -1,8 +1,8 @@
+import { ScrollView, ScrollViewProps } from '@tarojs/components';
 import debounce from 'lodash.debounce';
 import { TranslationModel } from 'mobx-i18n';
-import { DataObject, NewData, ListModel, Stream } from 'mobx-restful';
+import { DataObject, ListModel, NewData, Stream } from 'mobx-restful';
 import { Component, ReactNode } from 'react';
-import { ScrollView, ScrollViewProps } from '@tarojs/components';
 
 export interface ScrollListProps<T extends DataObject = DataObject>
   extends Pick<ScrollViewProps, 'className' | 'style'> {
@@ -62,7 +62,7 @@ export abstract class ScrollList<
       >
         {this.renderList()}
 
-        <footer className="mt-4 text-center text-muted small">
+        <footer className='mt-4 text-center text-muted small'>
           {noMore || !allItems.length ? t('no_more') : t('load_more')}
         </footer>
       </ScrollView>

diff --git a/src/components/SessionBox.tsx b/src/components/SessionBox.tsx
@@ -55,24 +55,24 @@ export class SessionBox extends PureComponent<SessionBoxProps> {
 
     return (
       <Dialog show showConfirmButton={false} closeOnClickOverlay={false}>
-        <div className="p-3">
+        <div className='p-3'>
           <Input
-            className="p-3"
-            placeholder="手机号"
+            className='p-3'
+            placeholder='手机号'
             onInput={({ detail }) => (this.mobilePhone = detail.value)}
           />
-          <div className="d-flex">
-            <div className="me-auto">
+          <div className='d-flex'>
+            <div className='me-auto'>
               <Input
-                className="p-3"
-                placeholder="验证码"
+                className='p-3'
+                placeholder='验证码'
                 onInput={({ detail }) => (this.code = detail.value)}
               />
             </div>
             <div>
               <Button
-                className="text-nowrap"
-                type="primary"
+                className='text-nowrap'
+                type='primary'
                 disabled={!mobilePhone || !!interval}
                 onClick={this.sendSMS}
               >
@@ -81,10 +81,10 @@ export class SessionBox extends PureComponent<SessionBoxProps> {
             </div>
           </div>
           <Button
-            className="mt-3"
+            className='mt-3'
             block
-            type="primary"
-            formType="submit"
+            type='primary'
+            formType='submit'
             disabled={!mobilePhone || !code}
             onClick={this.signIn}
           >
@@ -101,12 +101,12 @@ export class SessionBox extends PureComponent<SessionBoxProps> {
       { session } = userStore;
 
     return (
-      <div className="position-relative">
+      <div className='position-relative'>
         {(!autoCover || session) && children}
 
         {!autoCover && !session && !showDialog && (
           <div
-            className="position-absolute left-0 top-0 w-100 h-100"
+            className='position-absolute left-0 top-0 w-100 h-100'
             style={{ zIndex: 1000 }}
             onClick={this.checkSession}
           />

diff --git a/src/pages/component.tsx b/src/pages/component.tsx
@@ -1,9 +1,9 @@
-import { PureComponent } from 'react';
 import { CellGroup, Form } from '@antmjs/vantui';
+import { PureComponent } from 'react';
 
+import { AreaSelect } from '../components/AreaSelect';
 import { MainNav } from '../components/MainNav';
 import { RangeField } from '../components/RangeField';
-import { AreaSelect } from '../components/AreaSelect';
 
 definePageConfig({
   navigationBarTitleText: '高级组件演示'
@@ -25,25 +25,25 @@ export default class ComponentPage extends PureComponent<{}, State> {
     return (
       <div>
         <Form>
-          <CellGroup title="高级控件">
+          <CellGroup title='高级控件'>
             <RangeField
-              title="范围"
-              unit="mm"
-              name="range"
+              title='范围'
+              unit='mm'
+              name='range'
               max={100}
               value={range}
               onChange={({ detail }) => this.setState({ range: detail })}
             />
             <AreaSelect
-              title="所在地"
-              name="area"
+              title='所在地'
+              name='area'
               value={areaCode}
               onChange={areaCode => this.setState({ areaCode })}
             />
           </CellGroup>
         </Form>
 
-        <MainNav path="component" />
+        <MainNav path='component' />
       </div>
     );
   }

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,6 +1,6 @@
-import { PureComponent } from 'react';
-import { observer } from 'mobx-react';
 import { Button } from '@antmjs/vantui';
+import { observer } from 'mobx-react';
+import { PureComponent } from 'react';
 
 import { MainNav } from '../components/MainNav';
 import { SessionBox } from '../components/SessionBox';
@@ -19,17 +19,17 @@ export default class HomePage extends PureComponent {
       <SessionBox>
         <span>index</span>
 
-        <Button type="primary" onClick={() => counterStore.reduceCount()}>
+        <Button type='primary' onClick={() => counterStore.reduceCount()}>
           -
         </Button>
 
         <span>{counter}</span>
 
-        <Button type="primary" onClick={() => counterStore.addCount()}>
+        <Button type='primary' onClick={() => counterStore.addCount()}>
           +
         </Button>
 
-        <MainNav path="home" />
+        <MainNav path='home' />
       </SessionBox>
     );
   }