Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>hiui-component-snippetsNew to Visual Studio Code? Get it now.
hiui-component-snippets

hiui-component-snippets

dasenge

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

这个是一个基于HiUi组件库开发的代码提示的小工具

支持文件格式为:js 、jsx 、ts 、tsx

命令汇总:

导入组件命令:

[
  'hbtn',               'hbtna',              'hbtni',
  'hbtnl',              'hgrid',              'hspace',
  'hbread',             'hdrop',              'hmenu',
  'hpage',              'hstep',              'htabs',
  'hcheck-select',      'hcheck-cas',         'hcheck',
  'hcheck-tree-select', 'hcounter',           'hdate-picker',
  'hform',              'hcascader',          'hfilter',
  'hinput',             'hinput-auto-focus',  'hnum-input',
  'hrate',              'hsearch',            'hslider',
  'hradio',             'hselect',            'htime-picker',
  'htextarea-picker',   'htransfer',          'htree-select',
  'hswitch',            'hupload',            'hinput-group',
  'hcarousel-group',    'havater',            'hcard',
  'hcollapse',          'hdesc',              'hlist',
  'hpopover',           'hpreview',           'htable',
  'htable-data',        'htable-data-render', 'htimeline',
  'htooltip',           'htree',              'hellipsis-tooltip',
  'halert',             'hempty-state',       'hdraw',
  'hbadge',             'hloading',           'hmessage',
  'hmodal',             'hpop-confirm',       'hnotification',
  'hprogress',          'hprogress-type',     'hresult',
  'htag',               'hlight',             'hsvg-icon',
  'hwater-mark',        'hzen-mode',          'hscrollbar',
  'hanchor',            'hback-top-by-id',    'hback-top',
  'ssbase',             'searchFormRef',      'formRef',
  'goodsId',            'pinput',             'fLable',
  'ssInput',            'ssCustom',           'ssCheckSelect',
  'ssSelect',           'ssCheckTreeSelect',  'ssTypeDatePicker',
  'factorySelect',      'goodsSelect',        'opSelect',
  'pastefilterSelect',  'categorySelect',     'warehouseSelect'
]

导入包的命令:(当然,导包也可以 由vscode自动导入)

[
  'hbtn-import',  
  'hicon-import', 
  'hgrid-import', 
  'hspace-import',
  'hbread-import',
  'hdrop-import', 
  'hmenu-import', 
  'hpage-import', 
  'hstep-import', 
  'htabs-import',
  'hcheck-select-import',
  'hcheck-cas-import',
  'hcheck-import',
  'hcheck-tree-select-import',
  'hcounter-import',
  'hdate-picker-import',
  'hform-import',
  'hcascader-import',
  'hfilter-import',
  'hinput-import',
  'hnum-input-import',
  'hrate-import',
  'hsearch-import',
  'hslider-import',
  'hradio-import',
  'hselect-import',
  'htime-import',
  'hselect-import',
  'htransfer-import',
  'htree-select-import',
  'hswitch-import',
  'hupload-import',
  'hinput-group-import',
  'hcarousel-group-import',
  'havater-import',
  'hcard-import',
  'hcollapse-import',
  'hdesc-import',
  'hlist-import',
  'hpopover-import',
  'hpreview-import',
  'htable-import',
  'htimeline-import',
  'htooltip-import',
  'htree-import',
  'hellipsis-tooltip-import',
  'halert-import',
  'hempty-state-import',
  'hdraw-import',
  'hbadge-import',
  'hloading-import',
  'hmessage-import',
  'hmodal-import',
  'hpop-confirm-import',
  'hnotify-import',
  'hprogress-import',
  'hresult-import',
  'htag-import',
  'hlight-import',
  'hsvg-icon-import',
  'hwater-mark-import',
  'hzen-mode-import',
  'hscrollbar-import',
  'hanchor-import',
  'hback-top-import'
]

代码提示使用方式:

code-tip

导入包提示:

header-tip-gif图

跳转到对应官网组件方式:

header-tip-gif图

如何消除每次跳转的弹窗:

点击配置受信任的域即可 header-tip-gif图

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