Skip to content

fi3ework/vscode-antd-rush

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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