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)

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

Ionic Snippets

fivethree

Ionic Snippets for VS Code

Overview

Using Snippets for Ionic (4 and 5)

Framework

Snippets

HTML Snippets

HTML Properties

CSS Utilities

SCSS Snippets

Typescript Snippets