Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>moresec-snippetsNew to Visual Studio Code? Get it now.

moresec-snippets

datudou

|
6 installs
| (0) | Free
moresec常用的代码片段
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MS Snippet 代码片段

日常开发中常用的 react 代码片段

支持的语言类型

  • Typescript (.ts)
  • Typescript React (.tsx)

基础的代码片段

Prefix Body
log→ console.log($1)$2
div <div className={styles.$1}></div>
import→ import moduleName from 'module'
import_d→ import { destructuredModule } from 'module'
const→ const $1 = $2
let→ let $1 = $2
const_d→ const { $2 } = $1
let_d→ let { $2 } = $1
interface→ export interface I$1 {$2}

IParams

export interface IParams {
  ${1: id}: string$2
}

IQuery

interface IQuery {
  page: number,
  ${1: limit}: number$0
}

React hook

useState

const [$1 set$1] = useState<$2>($3)

useEffect

useEffect(() => {
  $0
} [$1])

useDispatch

const dispatch = useDispatch();

useParams

const { $2 } = useParams<$1>();

useForm

const [form] = Form.useForm();

useQueryAndFetch

const { query, updateQueryAndFetch } = useQueryAndFetch<IQuery>(initQuery, $1);

React Native Components

react

import React from "react";

interface IProps {}

const FileName: React.FC<IProps> = (props) => {
  return <div>$2</div>;
};

export default FileName;

re-connect

import React from 'react'
import { connect } from 'umi'
import { IConnectProps IConnectState } from '@/models/connect'

interface IProps extends IConnectProps {}

const FileName:React.FC<IProps> = props => {
  $0
  return <div>$2</div>
}
export default connect(({ loading $3 }: IConnectState) => ({
  ...$3
  loading: loading.effects[xxx]
}))(FileName)

connect

export default connect(({ $1 }: IConnectState) => ({
  ...$1,
}))($2);

modal_form

import React, { useEffect } from 'react'
import { connect, useDispatch } from 'umi'
import { IConnectProps, IConnectState } from '@/models/connect'
import { Form, Modal } from 'antd'
import { MSForm } from '@/components'
import { IFormList } from '@moresec/react-components/dist/form/MSForm'

export interface IProps extends IConnectProps {
  visible: boolean
  setVisible: React.Dispatch<React.SetStateAction<boolean>>
  handleUpdate(): void
}

const FileName: React.FC<IProps> = props => {
  const dispatch = useDispatch()
  const { visible, setVisible, handleUpdate } = props
  const [form] = Form.useForm()

  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log(values)
      dispatch({
        type: 'xx',
        payload: values,
        callback: () => {
          handleUpdate()
          handleClose()
        }
      })
    })
  }

  const handleClose = () => {
    setVisible(false)
  }

  useEffect(() => {
    console.log(visible)
    form.resetFields()
  }, [visible])

  const formList: IFormList[] = [
    {
      type: 'input',
      itemProps: {
        label: '输入框',
        name: 'value',
        rules: [{ required: true }]
      },
    },
  ],
,
  return (
    <Modal
      title={$2}
      visible={visible}
      onCancel={handleClose}
      onOk={handleSubmit}
    >
      <MSForm form={form} formList={formList} colon={false} />
    </Modal>
  )
}

export default connect(({ $3 }: IConnectState) => ({
  ...$3
}))(FileName)

结合项目一些常用的代码片段

arrow

($1) => {
  $2;
};

arrow_c

const $1 = ($2) => {
  $0;
};

searchParams

const searchParams = getSearchParams(window.location.search);
const { page = 1, limit = 10, ...resetParams } = searchParams;

initQuery

const initQuery = {
  page: Number(page),
  limit: Number(limit),
  ...resetParams,
};

dispatch

dispatch({
  type: $1,
  payload: { $2 },
});

callback(.tsx)

callback: ($1) => {
  $2;
};

if

if ($1) {
  $2;
}

cr

// TODO: CODE REVIEW ${1: Author}: $2

computedNextPage

const { total, current, pageSize } = ${1:tableData}.pagination,
const nextPage = computedNextPage(current, pageSize, total),
updateQueryAndFetch({ page: nextPage }),
message.success('${2:删除成功}')$0

结合 react-components 组件库

MSTitle

  • MSTitle

    <MSTitle title="$1"></MSTitle>
    
  • MSTitle_e

    <MSTitle title="$1">
      <Button type="primary" onClick={handleExport}>
        报表导出
      </Button>
    </MSTitle>
    

MSQuery

  • MSQuery

    <MSQuery conditions={condition} />
    
  • condition

    const condition: ICondition<QueryType>[] = [$1];
    
  • condition_select

    {
      label: '$1',
      defaultValue: $2,
      options: $3,
      itemProps: {
        showSearch: false,
        width: 180
      },
      onChange: (value: $4) => updateQueryAndFetch({ $5 })
    }
    

MSSearch

  • MSSearch

    <MSSearch
      placeholder='$1'
      value={query.$2}
      onSearch={(val: string) => updateQueryAndFetch({ $2: val })},
    />
    

MSTable

  • MSTable

    <MSTable data={tableData} onChange={handleTableChange} columns={columns} />
    
  • MSProTable

    <MSProTable data={tableData} onChange={handleTableChange} columns={columns} />
    
  • handleTableChange

    const handleTableChange = ({ current, pageSize }: TablePaginationConfig) => {
      updateQueryAndFetch({
        page: current,
        limit: pageSize,
      });
    };
    
  • columns

    const columns: ColumnProps<$1>[] = [$2];
    
  • column_item

    {
      title: '$1',
      dataIndex: '$2'
    }
    
  • column_item_r

    {
      title: '$1',
      dataIndex: '$2',
      render: (_$3, record) => {
        return $4
      }
    }
    

MSAboutLayout

  • MSAboutLayout

    <MSAboutLayout label='$1' value={$2} />$0
    

MSForm

  • MSForm

    <MSForm form={form} formList={formList} colon={false} />
    
  • formList

const formList: IFormList[] = [$0];
  • formItem

{
  type: '$1',
  itemProps: {
    label: '$2',
    name: '$3',
    rules: [{ required: true }]
  },
  controlledProps: {$4}
}

用于(.ts)文件中的单独的代码片段

model

import { Effect, Reducer } from "umi";
import api from "@/services";

export interface IFileNameState {}

export interface IFileNameModel {
  state: I$1State;
  effects: {
    $2;
  };
  reducers: {
    updateState: Reducer<I$1State>;
  };
}

const {} = api;

const $1: IFileNameModel = {
  state: {},
  effects: {},
  reducers: {
    updateState(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

export default FileName;

*

*$1({ payload, callback }, { call, put }) {
  const response = yield call($2, payload)
  $3,
}

*put

yield put({
  type: "updateState",
  payload: { $1 },
});

response_t

const { count = 0, result = [] } = response;

*put_table

yield put({
  type: "updateState",
  payload: {
    $1: {
      list: result,
      pagination: {
        total: count,
        current: payload.page,
        pageSize: payload.limit,
      },
    },
  },
});

callback

callback && callback();

tableData

tableData: {
  list: $1[]
  pagination: MS.pagination
}

tableData_i

tableData: {
  list: [],
  pagination: {
    total: 0,
    current: 1,
    pageSize: 10
  }
}

route_f

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

route_s

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

const_list

export const $1 = [{ label: $2, value: $3 }];

export const MAP_$1 = genMapObject($1);
export type T_MAP_$1 = keyof typeof MAP_$1;

modal

import { Modal } from "antd";
interface IProps {
  data: any;
  visible: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}
const Index: React.FC<IProps> = (props) => {
  const { visible, onConfirm, onCancel, data } = props;

  const handleConfirm = () => {
    onConfirm?.();
  };
  const handleCancel = () => {
    onCancel?.();
  };

  return (
    <Modal
      title="标题"
      width={540}
      visible={visible}
      destroyOnClose={true}
      onOk={handleConfirm}
      onCancel={handleCancel}
      confirmLoading={false}
    >
      content
    </Modal>
  );
};
export default Index;

formv

form.validateFields().then((values) => {
  console.log(values);
});

forms

<Form.Item
  shouldUpdate={(prevValues, curValues) => prevValues.a !== curValues.a}
>
  {({ getFieldValue }) => {
    return <Form.Item name="name" />;
  }}
</Form.Item>

useR

const {
  data: selfdata,
  loading,
  run,
} = useRequest(fetch, {
  manual: true,
  onSuccess: () => {
    // dosomething
  },
});

co

const columns: ColumnsType<type>[] = [
  {
    title: "",
    dataIndex: "",
  },
];

mss

message.success("$1");

msr

message.error("$1");

msf

const formList: IFormList[] = [
  {
    type: "select",
    itemProps: {
      label: "镜像",
      name: "images",
    },
  },
];

crf

const Index: React.FC = () => {
  return <div>index</div>;
};
export default Index;

usm

const { visible: , show: , hide:  } = useModalVisible()

ims

import styles from './index.less

fom

<Item label="label"></Item>
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft