vscode-TDesign

TDesign 是由前端通用 UI 组件库 Oteam 发起，协同公司内有组件库开发经验的同学一起建设的组件库，为了方便开发者能轻松快捷地使用 TDesign 框架开发应用, vscode-TDesign 诞生了。vscode-TDesign 是一款专门为 TDesign 开发框架而生的 vscode 插件。

特性

清晰明了的文档
组件标签和属性自动补全
同时支持 js 和 ts 的 Vue 组件开发
涵盖几乎所有 TDesign 组件和方法的代码片段
Vue 组件快速创建，简化操作的同时，规范组件的结构和命名
自定义设置，如：创建组件支持设置当前项目采用的语言（JS/TS）

TDesign 组件自动补全

在 vscode 插件市场搜索 tdesign 在搜索结果中找到和 TDesign 官网 logo 一样的那个 logo 下载并安装
将光标位于 vue 文件的或者 html 文件内容区域
在需要使用组件标签的任意位置输入关键字触发自动补全，如：tbutton / tform / tinput / tselect/ trow / tcol / ttable / ttag 等等等等
在下拉菜单中选择您要使用的组件，猛击回车键即可为你生成一大段本身需要你人工输入的代码
大呼，太好用了，并前往 vscode 插件市场五星好评，完成

TDesign 组件 vscode 悬停显示组件 Api 文档

使用 vscode-TDesign 生成组件代码
鼠标悬停到组件对应的标签上，如： <t-button /> , vscode 会弹出一个弹出框，弹出框里面包含了该左键所有的 Api 文档说明，免去我们要去 TDesign 官网翻阅文档的烦恼
现已支持的组件列表

Vue 组件快速创建

在 vscode 插件市场搜索 tdesign 在搜索结果中找到和 TDesign 官网 logo 一样的那个 logo 下载并安装
在左侧文件管理器的任意目录上点击右键，您会发现菜单中多出了「New Vue Component」选项
点击该菜单，在窗口上方的弹出框中输入您想要创建的组件的名称，如 HelloWorld

骚等片刻，组件创建完成。插件自动完成如下工作

HelloWorld 目录下创建 HelloWorld.Vue 组件文件，内容如下

<template>
  <div class="hello-world"></div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {},
  mixins: [],
  components: [],
  data() {
    return {

    };
  },
  mounted() {
    // 组件挂载完成回调，处理逻辑
  },
}
</script>
<style scoped lang="less" src="./style.less">

</style>

HelloWorld 目录下创建 index.js 用来导出组件和其他模块

  import HelloWorld from './HelloWorld';
  export default HelloWorld;

HelloWorld 目录下创建 style.less 组件样式文件
```
.hello-world-wraper{
   box-sizing: border-box
}
```

目录结构如下图

+-- components
|   +-- HelloWorld
|   |   +-- HelloWorld.vue
|   |   +-- index.js
|   |   +-- style.less

当然，如果生成的代码有你不需要的，删除掉就好了。

设置

打开 vscode 设置界面
在搜索栏中输入 tdesign 筛选出 vscode-TDesign 相关设置
设置项说明：
- Hover Show Api 开关组件标签悬停显示文档功能
- Is TS 是否使用 TS

自动更新

我们会不定期更新，您只需要在插件边栏留意更新即可。

效果演示

Vue 组件快速创建

snippets

TDesign 组件 vscode 悬停显示组件 Api 文档

snippets

TDesign 组件代码自动补全

snippets

ps:前缀规则是t+组件或则方法的单词

支持的代码片段

tbutton

<t-button type="button" theme="primary">
primary 按钮
</t-button>

input

  <t-input clearable size="small" defaultValue="默认值" type="textarea" status="success" placeholder="请输入内容" />

inputnumber

  <t-input-number
  v-model="loanAmt"
  mode="row"
  size="large"
  :max="15"
  :min="-2"
  :disabled="false"
  @change="onChange"
></t-input-number>

tselect

<t-select size="medium" multiple filterable v-model="value" class="demo-select-base" @change="handleChange" @visible-change="visibleChange">
  <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
    {{ item.label }}
  </t-option>
</t-select>

tlayout

<t-layout>
  <t-aside width="240">
    <h2 class="logo">LOGO</h2>
  </t-aside>
  <t-layout>
    <t-content>
      <div>Content</div>
    </t-content>
    <t-footer height="100">Copyright @ 2019-2020 Tencent. All Rights Reserved</t-footer>
  </t-layout>
</t-layout>

ticon

<t-icon
  name="loading"
  size="xs"
  style="margin: 0 10px 10px 0; cursor: pointer"
/>

ttable

<t-table
  :data="data"
  :columns="columns"
  :rowKey="rowKey"
  :verticalAlign="verticalAlign"
  :bordered="bordered"
  :hover="hover"
  :stripe="stripe"
  :size="size"
  :pagination="pagination"
  @page-change="rehandlePageChange"
  @change="rehandleChange">
</t-table>

tpagination

<t-pagination
  :page-size="5"
  v-model="currentPage"
  :total="100"
  show-total
  show-sizer
  @pageSizeChange="onPagesizeChange"
  :page-size.sync="pageSize"
  show-jumper
  @change="onPageChange"
/>

tstep

<t-steps change="onStepChange" direction="vertical" type="default" :current="1" status="process">
  <t-step title="已完成的步骤" content="这里是提示文字"></t-step>
  <t-step title="进行中的步骤" content="这里是提示文字"></t-step>
  <t-step status="error" title="未进行的步骤" content="这里是提示文字"></t-step>
  <t-step title="未进行的步骤" content="这里是提示文字"></t-step>
</t-steps>

tcol

<t-col :pull="0" :push="0" :span="8">
  <div>col-8</div>
</t-col>

tbreadcumb

<t-breadcrumb>
  <t-breadcrumbItem>
    <a href="">Home</a>
  </t-breadcrumbItem>
  <t-breadcrumbItem>
    <a href="">Application</a>
  </t-breadcrumbItem>
  <t-breadcrumbItem>About</t-breadcrumbItem>
</t-breadcrumb>

ttab

<t-tabs
  size="medium"
  addable
  @change="onTabChenge"
  tabPosition="top">
  <p>当前选项卡：</p>
  <t-tab-panel label="基本信息" name="basic">基本信息</t-tab-panel>
  <t-tab-panel label="弹性网卡" disabled name="network">弹性网卡</t-tab-panel>
</t-tabs>

tmenu

<t-menu mode="popup" theme="light" active="item2" @change="changeHandler" height="550px">
  <img slot="logo" width="136" class="t-menu__logo--center" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
  <t-menu-item name="item1">菜单内容一</t-menu-item>
  <t-menu-item name="item2">已选内容</t-menu-item>
  <t-menu-item name="item3">菜单内容二</t-menu-item>
  <t-menu-item name="item4" :disabled="true">菜单内容三</t-menu-item>
</t-menu>

tform

<t-form
  :data="formData"
  ref="form"
  labelAlign="left"
  layout="vertical"
  requiredMark="false"
  @reset="onReset"
  @submit="onSubmit"
  :colon="true"
>
  <t-form-item help="说明内容" label="姓名" name='name'>
    <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
  </t-form-item>
  <t-form-item label="手机号" name='tel'>
    <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
  </t-form-item>
  <t-form-item label="性别" name='gender'>
    <t-radio-group v-model="formData.gender" buttonStyle="solid">
      <t-radio value="1">男</t-radio>
      <t-radio value="2">女</t-radio>
    </t-radio-group>
  </t-form-item>
  <t-form-item label="课程" name='course'>
    <t-checkbox-group
      v-model="formData.course"
      :options="courseOptions"
    ></t-checkbox-group>
  </t-form-item>
  <t-form-item label="状态" name='status'>
    <t-switch v-model="formData.status"></t-switch>
  </t-form-item>
  <t-form-item>
    <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
    <t-button type="reset">重置</t-button>
  </t-form-item>
</t-form>

其他组件同理，t+组件全拼全小写

Contribution

Your pull request will make vscode-TDesign better.

LICENSE

MIT

vscode-TDesign

marvengong

vscode-TDesign

特性

TDesign 组件自动补全

TDesign 组件 vscode 悬停显示组件 Api 文档

Vue 组件快速创建

设置

自动更新

效果演示

Vue 组件快速创建

TDesign 组件 vscode 悬停显示组件 Api 文档

TDesign 组件代码自动补全

支持的代码片段

Contribution

LICENSE