Alteryx UI-Core React Code Snippets for VS Code
This extension for Visual Studio Code adds Alteryx UI-Core code snippets for ReactJS. This extension
was forked from vscode-material-ui-snippets,
an MIT licensed extension aimed at supporting a similar set of snippets for Material-UI (MUI). UI-Core
is based on MUI so this makes for a logical starting point.
See the CHANGELOG for the latest changes
Usage
Type part of a snippet, press enter
, and the snippet unfolds.
NOTE: You will still need to add the components imports manually.
UI-Core Snippet Shortcodes
Snippet |
Purpose |
uic-appbar-simple |
Simple appbar |
uic-appbar-button |
App bar with button |
uic-avatar-simple |
Simple avatar |
uic-avatar-icon |
Avatar with icon |
uic-badges |
Badges |
uic-btn |
Simple button |
uic-btn-float |
Float button |
uic-btn-icon |
Icon button |
uic-card-simple |
Simple card |
uic-card-media |
Media card |
uic-checkbox |
Checkbox |
uic-dlg-simple |
Simple dialog |
uic-dlg-alert |
Alert dialog |
uic-dlg-fullscreen |
Fullscreen dialog |
uic-dlg-form |
Form dialog |
uic-dlg-responsive |
Responsive dialog |
uic-dlg-scroll-paper |
Scroll paper dialog |
uic-dlg-scroll-body |
Scroll body dialog |
uic-exp-panel |
Expansion panel (Accordion) |
uic-grid-split |
Simple 50/50 split grid layout |
uic-grid-breakpoints |
Grid with breakpoints |
uic-list-simple |
Simple List |
uic-list-folder |
Folder List |
uic-list-inset |
Inset List |
uic-list-nested |
Nested List |
uic-list-checkbox |
Checkbox List |
uic-list-switch |
Switch List |
uic-menu-simple |
Simple menu |
uic-modal-simple |
Simple Modal |
uic-paper |
Paper |
uic-popover-simple |
Simple Popover |
uic-progress-circular |
Progress circular |
uic-radio |
Radio button |
uic-switch |
Switch button |
uic-select |
Select option |
uic-snackbar |
Toastr messages |
uic-table |
Simple table |
uic-tabs |
Simple tabs |
uic-textfield |
Simple textfield |
uic-tooltip |
Tooltip |
Alternatively, press Ctrl
+Space
(Windows, Linux) or Cmd
+Space
(OSX) to activate snippets from within the editor.
Installation
See - https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix
Debugging
See - https://code.visualstudio.com/docs/extensions/example-hello-world#_running-your-extension
Local Packaging
Run the following from within the projects root directory:
vsce package --baseContentUrl
Publishing
See - https://code.visualstudio.com/docs/extensions/publish-extension