Ionic Snippets for VS Code

Boost your Ionic development with snippets for VS Code

✅ Fast templates with snippets of ~100 Ionic components
✅ Easy custom theming with CSS properties
✅ Framework support for angular, stenciljs and vuejs

All code snippets are based on and follow the Ionic 5 Api and Ionic 4 Api

Available for VSCodium at Ionic Snippets.

Overview

• Ionic Snippets for VS Code
  • Using Snippets for Ionic (4 and 5)
  • Framework
  • Snippets
    • HTML Snippets
    • HTML Properties
    • CSS Utilities
    • SCSS Snippets
    • Typescript Snippets

Using Snippets for Ionic (4 and 5)

Type part of a snippet, press enter, and the snippet unfolds.

vscode-ionic-snippet	Ionic
2.x.x	5.x.x
1.x.x	4.x.x

Framework

Framework	Prefix	Status
Angular	i-	✅
Stenciljs	i-	✅
Vanilla Javascript/Html	i-	✅
React	ir-	🚧
Vue	i-	🔶

✅ — Supported
🔶 — Partial support
🚧 — Under development

Snippets

HTML Snippets

Snippet	Purpose
i-app	<ion-app>
i-avatar	<ion-avatar>
i-back-button	<ion-back-button>
i-back-button-default	<ion-back-button> w/ defaultHref
i-backdrop	<ion-backdrop>
i-backdrop-props	<ion-backdrop> w/ properties
i-badge	<ion-badge>
i-button	<ion-button>
i-button-icon-only	<ion-button> icon only
i-button-w-icon	<ion-button> w/ icon
i-buttons	<ion-buttons>
i-card	<ion-card>
i-card-loop	<ion-card *ngFor>
i-card-full	<ion-card> w/ <ion-card-header> and <ion-card-content>
i-card-content	<ion-card-content>
i-card-header	<ion-card-header>
i-card-subtitle	<ion-card-subtitle>
i-card-title	<ion-card-title>
i-checkbox	<ion-checkbox>
i-chip	<ion-chip>
i-chip-avatar	<ion-chip> w/ <ion-avatar>
i-chip-icon-start	<ion-chip> w/ <ion-icon> at the start
i-chip-icon-end	<ion-chip> w/ <ion-icon> at the end
i-col	<ion-col>
i-col-offset	Ionic <ion-col> [offset] property selection
i-col-offset-responsive	Ionic <ion-col> [offset] property selection w/ breakpoints
i-col-pull	Ionic <ion-col> [pull] property selection
i-col-pull-responsive	Ionic <ion-col> [pull] property selection w/ breakpoints
i-col-push	Ionic <ion-col> [push] property selection
i-col-push-responsive	Ionic <ion-col> [push] property selection w/ breakpoints
i-col-size	Ionic <ion-col> [size] property selection
i-col-size-responsive	Ionic <ion-col> [size] property selection w/ breakpoints
i-content	<ion-content>
i-content-events	<ion-content> w/ events
i-datetime	<ion-datetime>
i-fab	<ion-fab> w/ <ion-fab-button>
i-fab-button	<ion-fab-button>
i-fab-list	<ion-fab-list>
i-fab-list-full	<ion-fab> w/ <ion-fab-list>
i-footer	<ion-footer>
i-form	<ion-form> w/ <ion-input> and formGroup
i-form-error	<ion-form> w/ <ion-input> and formGroup including error text
i-form-input	<ion-item> w/ <ion-input> and formControlName
i-form-input-error	<ion-item> w/ <ion-input> and formControlName including error text
i-grid	<ion-grid> w/ <ion-row> and <ion-col>
i-header	<ion-header>
i-icon	<ion-icon>
i-img	<ion-img> lazyily load an image
i-infinite-scroll	<ion-infinite-scroll> w/ <ion-infinite-scroll-content>
i-input	<ion-input> w/ type and placeholder
i-item	<ion-item> w/ <ion-label>
i-item-avatar	<ion-item> w/ <ion-avatar>
i-item-badge	<ion-item> w/ <ion-badge>
i-item-checkbox	<ion-item> w/ <ion-checkbox>
i-item-divider	<ion-item-divider> w/ <ion-label>
i-item-floating-label	<ion-item> w/ <p> and <h2> wrapped by <ion-label>
i-item-group	<ion-item-group> w/ <ion-item-divider> and <ion-item>
i-item-icon	<ion-item> w/ <ion-icon>
i-item-input	<ion-item> w/ <ion-input>
i-item-option	<ion-item-option>
i-item-option-w-icon	<ion-item-option> w/ icon
i-item-option-icon-only	<ion-item-option> w/ icon only
i-item-option-expandable	<ion-item-option> w/ expandable option
i-item-options	<ion-item-options>
i-item-sliding	<ion-item-sliding>
i-item-radio	<ion-item> w/ <ion-radio>
i-item-toggle	<ion-item> w/ <ion-toggle>
i-label	<ion-label>
i-label-floating	<ion-label> w/ <p> and <h2>
i-label-position	<ion-label> w/ position selection
i-list	<ion-list>
i-list-header	<ion-list-header>
i-menu	<ion-menu> w/ <ion-header> and <ion-content>
i-menu-advanced	<ion-menu> w/ <ion-header>, <ion-content> and <ion-footer>
i-menu-button	<ion-menu-button>
i-nav	<ion-nav> standalone Nav component
i-nav-link	<ion-nav-link> navigate to a component
i-note	<ion-note>
i-progress	<ion-progress>
i-radio	<ion-radio>
i-radio-group	<ion-radio-group>
i-range	<ion-range>
i-range-icon	<ion-range> w/ <ion-icon>
i-range-label	<ion-range> w/ <ion-label>
i-refresher	<ion-refresher>
i-refresher-content	<ion-refresher> w/ <ion-refresher-content> options
i-refresher-events	<ion-refresher> w/ all events
i-reorder	<ion-reorder>
i-reorder-icon	<ion-reorder> w/ <ion-icon>
i-reorder-item	<ion-reorder> entire <ion-item>'s
i-reorder-group	<ion-reorder-group>
i-ripple-effect	<ion-ripple-effect>
i-route	<i-route> used inside of <ion-router> and should only be used with vanilla and Stencil JavaScript projects
i-route-redirect	<ion-route-redirect> can only be use inside of <ion-router> and should only be used with vanilla and Stencil JavaScript projects
i-router	<ion-router> only once per App and should only be used with vanilla and Stencil JavaScript projects
i-router-outlet	<i-router-outlet> should only be used with Angular projects
i-row	<ion-row> w/ <ion-col>
i-searchbar	<ion-searchbar>
i-segment	<ion-segment>
i-segment-button	<ion-segment-button>
i-select	<ion-select> w/ <ion-select-option>
i-select-loop	<ion-select> w/ <ion-select-option *ngFor>
i-select-interface-options	<ion-select> w/ interfaceOptions
i-select-interface-options-loop	<ion-select> w/ interfaceOptions and <ion-select-option *ngFor>
i-select-option	<ion-select-option>
i-select-option-loop	<ion-select-option *ngFor>
i-skeleton-text	<ion-skeleton-text>
i-slide	<ion-slide>
i-slides	<ion-slides> w/ <ion-slide>
i-slides-options	<ion-slides> w/ options
i-spinner	<ion-spinner>
i-split-pane	<ion-split-pane>
i-tab	<ion-tab>
i-tab-bar	<ion-tab-bar>
i-tab-button	<ion-tab-button> connected to <ion-tab>
i-tab-button-only-button	<ion-tab-button> just a button
i-tab-button-only-link	<ion-tab-button> just a link
i-tab-content	<ion-tab> custom content
i-tabs	<ion-tabs>
i-text	<ion-text>
i-textarea	<ion-textarea>
i-textarea-w-placeholder	<ion-textarea> w/ placeholder
i-textarea-w-label	<ion-textarea> w/ <ion-label>
i-thumbnail	<ion-thumbnail>
i-title	<ion-title>
i-toggle	<ion-toggle>
i-toolbar	<ion-toolbar>
i-virtual-scroll	<ion-virtual-scroll>
i-virtual-scroll-w-custom-component	<ion-virtual-scroll> with <div> wrapping a custom component
i-virtual-scroll-w-header	<ion-virtual-scroll> with header function

⬆ back to top

HTML Properties

Snippet	Purpose
i-click	(click) event
i-color	Ionic color property w/ selection
i-scrollEvents	Ionic [scrollEvents] binding for <ion-content>
i-slot	Ionic slot property w/ selection

⬆ back to top

CSS Utilities

Snippet	Purpose
i-align-items	CSS Utilities Flex Container Align Items
i-align-self	CSS Utilities Flex Container Align Self
i-flex-wrap	CSS Utilities Flex Container Flex Wrap
i-float-element	CSS Utilities Float Elements
i-float-element-responsive	CSS Utilities Responsive Float Classes
i-hide	CSS Utilities Hide Element
i-hide-breakpoints	CSS Utilities Hide Element with Display Breakpoints
i-hide-sm	CSS Utilities Hide Element sm. Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down).
i-hide-md	CSS Utilities Hide Element md . Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down).
i-hide-lg	CSS Utilities Hide Element lg. Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down).
i-hide-xl	CSS Utilities Hide Element xl. Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down).
i-justity-content	CSS Utilities Flex Container Justify Content
i-margin	CSS Utilities Element Margin
i-margin-type	CSS Utilities Element Margin Type
i-no-border	CSS Utilities Element No Border for <ion-header> or <ion-footer>
i-no-margin	CSS Utilities Element No Margin
i-no-padding	CSS Utilities Element No Padding
i-padding	CSS Utilities Element Padding
i-padding-type	CSS Utilities Element Padding Type
i-text-alignment	CSS Utilities Text Alignment
i-text-responsive	CSS Utilities Responsive Text Classes for Alignment and Transformations
i-text-transformation	CSS Utilities Text Transformation

⬆ back to top

SCSS Snippets

Snippet	Purpose
i-action-sheet-props	Action Sheet CSS custom properties
i-alert-props	Alert CSS custom properties
i-anchor-props	Anchor CSS custom properties
i-avatar-props	Avatar CSS custom properties
i-back-button-props	Back Button CSS custom properties
i-badge-props	Badge CSS custom properties
i-button-props	Button CSS custom properties
i-card-props	Card CSS custom properties
i-card-subtitle-props	Card Subtitle CSS custom properties
i-card-title-props	Card Title CSS custom properties
i-checkbox-props	Checkbox CSS custom properties
i-chip-props	Chip CSS custom properties
i-col-props	Col CSS custom properties
i-color	Ionic scss color variables w/ color selection
i-color-custom	Custom Color can be used as color property color='favorite', add to variables.scss
i-color-custom-root	Custom Color add to :root in variables.scss
i-content-props	Content CSS custom properties
i-dark-theme	Ionic Dark Theme
i-datetime-props	Datetime CSS custom properties
i-fab-button-props	Fab-Button CSS custom properties
i-grid-props	Grid CSS custom properties
i-icon-props	Icon CSS properties
i-input-props	Input CSS custom properties
i-item-props	Item CSS custom properties
i-item-divider-props	Item Divider CSS custom properties
i-item-option-props	Item Option CSS custom properties
i-label-props	Label CSS custom properties
i-list-header-props	List Header CSS custom properties
i-loading-props	Loading CSS custom properties
i-menu-props	Menu CSS custom properties
i-menu-button-props	Menu Button CSS custom properties
i-modal-props	Modal CSS custom properties
i-note-props	Note CSS custom properties
i-picker-props	Picker CSS custom properties
i-popover-props	Popover CSS custom properties
i-prefers-color-scheme	Media query for prefered-color-scheme
i-progress-bar-props	Progress Bar CSS custom properties
i-radio-props	Radio CSS custom properties
i-range-props	Range CSS custom properties
i-rgba	Add opacity to Ionic colors using rgba(...)
i-root	:root { }
i-searchbar-props	Searchbar CSS custom properties
i-segment-props	Segment CSS custom properties
i-segment-button-props	Segment Button CSS custom properties
i-select-props	Select CSS custom properties
i-skeleton-text-props	Skeleton Text CSS custom properties
i-sliders-props	Slides CSS custom properties
i-spinner-props	Spinner CSS custom properties
i-split-pane-props	Split Pane CSS custom properties
i-stepped-color	Stepped colors add to :root
i-tab-bar-props	Tab Bar CSS custom properties
i-tab-button-props	Tab Button CSS custom properties
i-textarea-props	Textarea CSS custom properties
i-thumbnail-props	Thumbnail CSS custom properties
i-title-props	Title CSS custom properties
i-toast-props	Toast CSS custom properties
i-toast-example	Toast CSS custom example style for success, warning or danger toasts
i-toggle-props	Toggle CSS custom properties
i-toolbar-props	Toolbar CSS custom properties

⬆ back to top

Typescript Snippets

Snippet	Purpose
i-action-sheet	Ionic action sheet method
i-action-sheet-ctrl	Ionic ActionSheetController
i-alert	Ionic alert dialog method
i-alert-confirm	Ionic alert confirm dialog method
i-alert-ctrl	Ionic AlertController
i-ctrl-import	Imports Ionic Controller from @ionic/angular package
i-form	Simple form group
i-form-builder	FormBuilder
i-form-group	FormGroup instance
i-form-value	Get value for formControlName form.get('email')
i-infinite-scroll-load-data	Method to load more data with complete and disabled call
i-infinite-scroll-toggle	Method to toggle disabled of InfiniteScroll
i-infinite-scroll-viewchild	Viewchild for InfiniteScroll
i-loading	Ionic loading dialog
i-loading-ctrl	Ionic LoadingController
i-modal	Ionic modal dialog method
i-modal-dismiss	Ionic modal dialog with dismiss
i-modal-ctrl	Ionic ModalController
i-picker	Ionic Picker
i-picker-colum	Ionic Picker Column
i-picker-option	Ionic Picker Option
i-picker-ctrl	Ionic PickerController
i-popover	Ionic popover dialog method
i-popover-ctrl	Ionic PopoverController
i-on-did-dismiss	Ionic onDidDismiss for dialogs
i-on-did-dismiss-data	Ionic onDidDismiss for dialogs returning data
i-on-will-dismiss	Ionic onWillDismiss for dialogs
i-on-will-dismiss-data	Ionic onWillDismiss for dialogs returning data
i-refresher-do-refresh	<ion-refesher ionRefresh> output handler method
i-reorder-do-reorder	<ion-reorder ionItemReorder> output handler method
i-slides-options	Ionic slides options
i-toast	Ionic toast notification method
i-toast-button	Ionic toast button
i-toast-w-buttons	Ionic toast notification w/ buttons
i-toast-w-options	Ionic toast notification w/ options
i-toast-ctrl	Ionic ToastController
i-view-will-enter	ionViewWillEnter (1st) - Fired when entering a page (also if it’s come back from stack), subscribe to Observables here or in ionViewDidEnter
i-view-did-enter	ionViewDidEnter (2nd) - Fired after entering (also if it’s come back from stack), subscribe to Observables here or in ionViewWillEnter
i-view-will-leave	ionViewWillLeave (3rd) - Fired if the page will leave (also if it’s keep in stack), cancel Observables here or in ionViewDidLeave
i-view-did-leave	ionViewDidLeave (4th) - Fired after the page was left (also if it’s keep in stack), cancel Observables here or in ionViewWillLeave
i-view-will-unload	ionViewWillUnload (5th) - In Angular not firing because here you have to use ngOnDestroy
i-virtual-scroll-header-fn	Ionic virtual scroll header function

⬆ back to top