https://github.com/fi3ework/vscode-antd-rush

🌈 Ant Design cheatsheet in VS Code.
https://github.com/fi3ework/vscode-antd-rush

antd antd-design react typescript vscode vscode-extension

Last synced: 3 days ago
JSON representation

🌈 Ant Design cheatsheet in VS Code.

• Host: GitHub
• URL: https://github.com/fi3ework/vscode-antd-rush
• Owner: fi3ework
• License: mit
• Created: 2019-12-18T05:33:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T15:48:31.000Z (almost 2 years ago)
• Last Synced: 2024-10-19T19:58:21.790Z (15 days ago)
• Topics: antd, antd-design, react, typescript, vscode, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=fi3ework.vscode-antd-rush
• Size: 12.4 MB
• Stars: 124
• Watchers: 7
• Forks: 19
• Open Issues: 9
• Metadata Files:
  • Readme: README-zh_CN.md
  • Changelog: CHANGELOG
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ant-design - vscode-antd-rush - Rush to Ant Design in VS Code (Tools)

README

        


  

    

  



Antd Rush



Rush to Ant Design in VS Code





































[Download from Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=fi3ework.vscode-antd-rush)

[English](./README.md) | 中文

## 特性

- 💬 为 Ant Design 组件及属性显示对应官方文档

- ⚡️ 自动插入组件 handler

- 🗂 支持多版本文档（3.x / 4.x）

- 🌐 支持中/英文档

## 提示

- 当前使用的 Ant Design 3.x 版本文档为 **3.26.20** (latest at 2021/06/05)，4.x 版本文档为 **4.16.1** (latest at 2021/06/05)

- 需要用户的项目中安装了 `@types/react`

## 功能

### 切换 antd 版本

同时支持 antd v3 和 v4 版本的文档，默认为 v3（之后会转为 v4），你可以更改使用默认的文档版本，也可以更改每个工作区使用的 antd 版本号。

#### 更改默认版本

1. ⌘ + , (macOS), Ctrl + , (Windows)

2. 输入 `Antd Rush: Default Antd Major Version`

3. 选择默认版本

#### 更改工作区版本

1. ⌘ + shift + P (macOS), Ctrl  + shift + P (Windows)

2. 输入 `antdrush: set antd version of current workspace`

3. 选择当前工作区的版本

### 悬浮提示组件 props 表格

- 悬浮在组件上显示官方文档的组件详情

- 提供链接直接跳转到 Ant Design 的官方文档页面



### 悬浮提示 props 详情

- 悬浮在 props 上显示官方文档的 props 详情



### 自动插入 method handler

- 触发 `!` 自动插入带默认前缀的 handler（默认前缀预置为 `handle`，可配置）

- 触发 `~` 在提示输入 handler name 后插入

- 暂时不会为 TypeScript 自动添加类型标注

- class component 插入的模板为

```jsx

this.handleMethod = () => {}

```

- functional component 插入的模板为

```jsx

const handleMethod = useCallback(() => {})

```



## Contributing

See [CONTRIBUTING](https://github.com/fi3ework/vscode-antd-rush/blob/master/CONTRIBUTING.md)

## Roadmap

See [#1](https://github.com/fi3ework/vscode-antd-rush/issues/1)

## License

MIT