Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>tea-toolsNew to Visual Studio Code? Get it now.
tea-tools

tea-tools

jonqin

|
14 installs
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VSCode-Tea-Helper

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 文件

    settings

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

文档

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;
    
    1. HelloWorld 目录下创建 index.tsx 用来导出组件和其他模块
      import HelloWorld from './HelloWorld';
      export default HelloWorld;
    
    1. HelloWorld 目录下创建 style.less 组件样式文件
    .HelloWorld-wraper{
      // ...
    }
    

目录结构如下图

snippets

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

自动更新

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

效果演示

React 组件快速创建

snippets

Tea 组件代码自动补全

snippets

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

Tea 组件文档悬停显示

hover-api

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft