tife-snippet

开发

文档

https://code.visualstudio.com/docs/editor/userdefinedsnippets

如何测试

https://code.visualstudio.com/api/working-with-extensions/testing-extension

打开tife-snippets这个项目，然后切换到DEBUG窗口，点击extension前的小三角启动即可。

如何发布

https://code.visualstudio.com/api/working-with-extensions/publishing-extension

# 安装vsce
yarn global add vsce

# 登录
vsce login ti-snippets

# 根据version打包
vsce package

# 发布
vsce publish

snippets介绍

arco 相关

• arco-alert

import { Alert } from '@arco-design/web-react';

<Alert type='${1|info,success,warning,error|}' content='${2:content}' />

• arco-button

import { Alert } from '@arco-design/web-react';

<Button type='${1|primary,secondary,dashed,outline,Text|}'>${2:Primary}</Button>

material物料相关

• ti-material-banner

import BrandBanner from '@net-fe/brand-banner';
import { Button, Space } from '@arco-design/web-react';

<BrandBanner
  imgUrl='${1:default}'
  title='${2:default}'
  description='${3:default}'
  operation={
    <Space>
      <Button type='primary'>${4:default}</Button>
      <Button>次要按钮</Button>
   </Space>
  }
/>

• ti-material-status

import Status from '@net-fe/status';

<Status status='${1|available-check,normal-check,modify-loading,modify-loading,abnormal-exclamation,fail-close,fail-exclamation,stop-close,stop-clock|}' text='${2:default}' />

• ti-material-popover

import PopoverControl from '@net-fe/popover-control';

<PopoverControl
  position='right'
  trigger='click'
  content={
    <ul style={{ margin: 0, paddingLeft: 20 }}>
      <li>长度限制在5~20之间</li>
      <li>允许中文、大写字母、小写字母、数字</li>
    </ul>
  }
  getPopupContainer={() => document.getElementsByTagName('form')[0]}
>
  <Input
    placeholder='请输入边缘应用名称'
    maxLength={20}
    style={{ width: 400 }}
    autoComplete='off'
  />
</PopoverControl>

• ti-material-header

import DetailHeader, { HeaderStatusProps } from '@net-fe/detail-header';
import { Button } from '@arco-design/web-react';

<DetailHeader
  breadcrumbs={[
    <span style={{ cursor: 'pointer' }} onClick={() => window.open('/domain')}>
      域名列表
    </span>,
    'net-fe.com',
  ]}
  statusProps={{
    status: 'available-check',
    text: '可用',
  }}
  operation={<Button>下载证书</Button>}
/>

react相关

• ti-react-fc

  import React  from 'react';
  import { Button } from '@arco-design/web-react';

  interface I${1:TIComponent}Props {,
    $2: $3,
  }

  const $1: React.FC<I$1Props> = ({ $2 }) => {,
    const [$4, set${4/(.*)/${1:/capitalize}/}] = useState($5);
    return '$0';
  }
  export default $1;

• ti-react-hook

  import React, { useState, useEffect }  from 'react';
  import { Button } from '@arco-design/web-react';

  interface I${1:TIComponent}Props {,
    $2: $3,
  }

  const $1: React.FC<I$1Props> = ({ $2 }) => {,
    return '$0';
  }
  export default $1;