VSCode-Tea-Helper

VSCode-Tea-Helper 是一款专门为 React Tea 开发框架而生的 VSCode插件。

TeaJs 是腾讯云内部统一使用的 react UI 框架. 越来越多的项目都在使用 Tea 框架. 所以，为了方便开发者能轻松快捷地使用 Tea 框架开发 react 应用, VSCode-Tea-Helper 诞生了。

特性

• 清晰明了的文档

• 组件标签和属性自动补全，不再为记不住标签属性烦恼

  同时支持 js 和 ts 的 react 组件开发

• 函告几乎所有 Tea 组件和方法的代码片段

• React 组件快速创建，简化操作的同时，规范组件的结构和命名

• 自定义设置，如：创建组件支持设置当前项目采用的语言（JS/TS）

设置

• 打开 vscode 设置窗口，在搜索框输入 TeaHelper 找到设置项

• 取消“是否使用 TS ”勾选，将项目设置为JS项目。此时，生成的组件即为 js 和 jsx 文件

  

• 取消“鼠标悬停组件标签浮层显示组件文档”，勾选，可以禁止组件标签悬停浮窗显示文档功能

文档

Tea组件自动补全

1. 在 vscode 插件市场搜索 VSCode-Tea-Helper 或者 tea 在搜索结果中找到和 tea 官网 logo 一样的那个 logo 下载并安装

2. 将光标位于 tsx ，或者 jsx 文本内

3. 在需要使用组件标签的任意位置输入关键字触发自动补全 如：teabutton , teatag 等等等等

4. 在下拉菜单中选择您要使用的组件，猛击回车键即可为你生成一大段本身需要你人工输入的代码

5. 大呼，太好用了，并前往 vscode 插件市场五星好评, 完成

Tea 组件 vscode 悬停显示组件 Props 文档

1. 使用 VSCode-Tea-Helper 生成组件代码
2. 鼠标悬停到组件对应的标签上，如： <Button /> , vscode 会弹出一个弹出框，弹出框里面包含了该左键所有的 Props 文档说明，免去我们要去 tea 官网翻阅文档的烦恼。

React 组件快速创建

1. 在 vscode 插件市场搜索 VSCode-Tea-Helper 或者 tea 在搜索结果中找到和 tea 官网 logo 一样的那个 logo 下载并安装

2. 在左侧文件管理器的任意目录上点击右键，您会发现菜单中多出了「New React Function Component」选项

3. 点击该菜单，在窗口上方的弹出框中输入您想要创建的组件的名称，如 HelloWorld

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

   1. HelloWorld 目录
   2. HelloWorld 目录下创建 HelloWorld.tsx 组件文件，内容如下

   import React, { useState, useEffect } from 'react';
   import './style.less';
   interface Iprops {
     name?: string;
   };
   const HelloWorld = (props: Iprops) => {
     const { name } = props;
     const [data, setData] = useState<any>();
     useEffect(() => {
       // todo something when componentDidMount
       return () => {
         // todo something when componentWillUnmount
       };
     });
     return (
       <div className="HelloWorld-wraper">{name}</div>
     );
   }
   export default HelloWorld;
   

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

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

   4. HelloWorld 目录下创建 style.less 组件样式文件

   .HelloWorld-wraper{
     // ...
   }
   

目录结构如下图

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

自动更新

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

效果演示

React 组件快速创建

Tea 组件代码自动补全

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

Tea 组件文档悬停显示

Support snippets list:

• teabutton

  <Button type="primary" style={style}>
    主要按钮
  </Button>
  

• teaic

  <Icon
    type={type}
    size="s"
    style={{ margin: "0 10px 10px 0", cursor: "pointer" }}
  />
  

• tearow

  <Row>
    <Col span={24}>
      <Box>col-24</Box>
    </Col>
  </Row>
  

• teacol

  <Col span={24}>
    <Box>col-24</Box>
  </Col>
  

• teabreadcumb

  <Breadcrumb>
    <Breadcrumb.Item>
      <a href="">Home</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <a href="">Application</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>About</Breadcrumb.Item>
  </Breadcrumb>
  

• teatab

  <Tabs tabs={tabs} placement={verticalSwitch.value ? "left" : "top"}>
    <p>当前选项卡：</p>
    <TabPanel id="basic">基本信息</TabPanel>
    <TabPanel id="network">性网卡</TabPanel>
    <TabPanel id="monitor">基本信息</TabPanel>
    <TabPanel id="sg">安全组</TabPanel>
    <TabPanel id="oplog">操作日志</TabPanel>
  </Tabs>
  

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

Contribution

Your pull request will make VSCode-Tea-Helper better.

LICENSE

MIT