Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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

antd antd-design react typescript vscode vscode-extension

Last synced: about 1 month 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 (about 2 months 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

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