• Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŒˆ Ant Design cheatsheet in VS Code.

Antd Rush

Rush to Ant Design in VS Code

Download from Visual Studio Marketplace

If this extension is helpful to you, please vote โญ๏ธโญ๏ธโญ๏ธโญ๏ธโญ๏ธ at Marketplace ๐Ÿ˜‰.

English | ไธญๆ–‡

Feature

  • ๐Ÿ’ฌ Show official documentation for Ant Design component and props
  • โšก๏ธ Insert component method handler automatically
  • ๐Ÿ—‚ Support multiple version documentations (3.x / 4.x)
  • ๐ŸŒ Support Chinese and English documentation

Caveat

  • Currently used version of the Ant Design 3.x documentation is 3.26.20 (latest at 2021/06/05), 4.x uses 4.16.1 (latest at 2021/06/05)
  • @types/react is required to be installed in userland project

Usage

Switch antd major version

Extension support both v3 and v4 documentation, v3 by default (it will changed to v4 in the future). You can change the default version and set version of each workspace.

Change default version

  1. โŒ˜ + , (macOS), Ctrl + , (Windows)
  2. Input Antd Rush: Default Antd Major Version
  3. Select default version

Change workspace version

  1. โŒ˜ + shift + P (macOS), Ctrl + shift + P (Windows)
  2. Input antdrush: set antd version of current workspace
  3. Select version of current workspace

Component props table hover hint

  • Hover on component to get component description hint
  • Provide Ant Design documentation page link of component

Props detail hover hint

  • Hover on component props to get props description hint

Insert method handler automatically

  • Trigger ! to auto insert handler with default prefix (default prefix is handle, it's configurable)
  • Trigger ~ to insert handler after handler name inquiry
  • TypeScript type annotation will not be added for now
  • class component insertion template is
this.handleMethod = () => {}
  • functional component insertion template is
const handleMethod = useCallback(() => {})

Contributing

See CONTRIBUTING

Roadmap

See #1

License

MIT

More Repositories

1

hexo-theme-archer

๐ŸŽฏ A smart and modern theme for Hexo.
SCSS
1,524
star
2

blog

๐Ÿ“
861
star
3

vite-plugin-checker

๐Ÿ’ฌ Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, Stylelint and more.
TypeScript
807
star
4

react-live-route

๐Ÿ“Œ An enhanced react-router-v4/5 Route that keeps route alive.
TypeScript
217
star
5

react-cloud-music

๐ŸŽถ NetEase Cloud Music based on React.
TypeScript
155
star
6

react-douban-movie

Douban movie based on React
JavaScript
96
star
7

react-resume

๐Ÿ—ณ online editable resume based on React
JavaScript
25
star
8

postcss-rename-selector

๐ŸŒ– Rename CSS selectors effortlessly
TypeScript
7
star
9

react-mindnode

๐Ÿ—บworking in progress
JavaScript
6
star
10

restricted-antd-style-demo

An example repository to show how to restrict antd global style
JavaScript
6
star
11

vite-plugin-web-components-hmr

Provides Vite HMR for web components(vanilla, Lit, Fast, List, Haunted).
JavaScript
6
star
12

redux-analysis

๐Ÿ”ฌ redux ๆบ็ ๅˆ†ๆž
JavaScript
6
star
13

fullpage-resume

๐Ÿ“œ configuration fullpage resume
JavaScript
5
star
14

rollup-plugin-fork-ts-checker

๐Ÿš€ Rollup plugin that runs typescript type checker on a separate process.
TypeScript
5
star
15

React-decorator-HOC

๐Ÿ“ฆ a simple practice of decorator based HOC
JavaScript
2
star
16

active-detector

๐Ÿฆ‰Detect whether browser user is still active.
TypeScript
2
star
17

hexo-theme-ares

๐Ÿšง an unfinished Hexo theme
CSS
2
star
18

archer-demo

๐ŸŽ‰ demo for hexo-theme-archer http://fi3ework.github.io/archer-demo
1
star
19

histor

๐Ÿ’พ Save the history mutation of state.
TypeScript
1
star
20

fi3ework

1
star
21

FE-wheels

โš™๏ธ front-end wheels
JavaScript
1
star
22

me

๐Ÿ“„ README of me
1
star
23

useProState

๐Ÿ”ฉConvenient way to play with `useState` hook
TypeScript
1
star
24

react-live-route-demo

๐Ÿฅ demo for react-live-route
JavaScript
1
star
25

baidu-ife-2016

JavaScript
1
star
26

mova

[WIP] more easy and better way to play with MobX
JavaScript
1
star
27

fgm

HTML
1
star
28

vite-ts

JavaScript
1
star
29

fi3ework.github.io

๐Ÿ“ blog
HTML
1
star
30

10x-list

JavaScript
1
star
31

es6-promise-annotated

JavaScript
1
star