fivethree-team/vscode-ionic-snippets

🧩 Ionic Snippets for VSCode

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

vscode-ionic-snippets's Issues

Unable to install this extension in my VS code editor

I am facing this issue while installing this Ionic Snippets extension in vs code

Error:
Unable to install because, the extension 'fivethree.vscode-ionic-snippets' compatible with current version '1.19.3' of VS Code is not found.

Could anyone can help me to resolve this issue or install this extension in my vs code editor.

Open VSX Listing: Signing the Publisher Agreement

Thank you for being part of the Open VSX community by adding your extensions to the Open VSX Registry. Please note that the service was recently transferred to the Eclipse Foundation and urgent action on your part is needed so we can continue to list your extensions. To ensure uninterrupted service, please sign the Eclipse Publisher Agreement on or before January 8, 2021. If not signed by that date, your extensions will be delisted and will no longer appear on the site nor be available via the API. If you sign at a later date, your extensions will then be re-activated. The signing process is explained in the Wiki (steps 1 and 2).

Please also note that all extensions MUST have a license in order to be listed.

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. Thanks for joining us on this journey as we continue to build the Open VSX community. We look forward to continued innovation from you in 2021!

Ionic 6

May you please support current version of ionic.

$ ionic --version
6.12.4

Autocomplete dont work in JS Strings

Autocompletion dont work in JS strings. It should work, because Vanilla JS Router uses strings to output.

For example:

customElements.define('page-test', class extends HTMLElement {
	connectedCallback() {
		this.innerHTML = /*html*/`
			<ion-header>
				<ion-toolbar>
					<ion-title>Test</ion-title>
				</ion-toolbar>
  			</ion-header>
			<ion-content force-overscroll="true" class="ion-padding" color="light">
			
				test

			</ion-content>
		`;
	}

});

Loops for Ionic Components

Feature Request

Add HTML snippets with *ngFor-loops over ionic components.

Components

TODO add more components to loop over

• ion-card
• ion-item, ion-item in ion-list
• ion-select-option, ion-select-option in ion-select

CSS Custom Properties

Feature Request

Add CSS Custom Properties for all component as snippet.

Ionic Components

TODO add remaining components

• ion-anchor
• ion-action-sheet
• ion-alert
• ion-badge
• ion-button
• ion-card
• ion-card-subtitle
• ion-card-title
• ion-checkbox
• ion-chip
• ion-col
• ion-content
• ion-datetime
• ion-picker
• ion-fab-button
• ion-grid
• ion-item
• ion-item-divider
• ion-item-option
• ion-input
• ion-label
• ion-list-header
• ion-loading
• ion-note
• ion-picker
• ion-progress-bar
• ion-range
• ion-skeleton-text
• ion-slides
• ion-split-pane
• ion-spinner
• ion-tab-bar
• ion-tab-button
• ion-textarea
• ion-thumbnail
• ion-title
• ion-toast
• ion-toggle
• ion-toolbar

HTML files lost intellisense after VSCode upgrade

After latest update of VSCode:
Version: 1.41.1 (system setup)
the extension stopped working for HTML files

Add support for vue.js (vue single file component)

Hi. Are there any settings for this plugin.
I'd like to use it in *.vue file, ionic 4 officially supports react and vue.js.

Very slow

Issue Type: Bug

Some time is working and some time not working.

Extension version: 1.4.0
VS Code version: Code 1.36.1 (2213894ea0415ee8c85c5eea0d0ff81ecc191529, 2019-07-08T22:59:35.033Z)
OS version: Windows_NT x64 10.0.17134

System Info

Item	Value
CPUs	Intel(R) Core(TM) i3-2120 CPU @ 3.30GHz (4 x 3293)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software oop_rasterization: unavailable_off protected_video_decode: unavailable_off rasterization: unavailable_off skia_deferred_display_list: disabled_off skia_renderer: disabled_off surface_synchronization: enabled_on video_decode: enabled viz_display_compositor: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	7.90GB (0.50GB free)
Process Argv
Screen Reader	no
VM	0%

Ionic Components

Feature Request

Provide snippets for each Ionic component.

Missing Ionic components

List of Ionic components not supported:

• ion-picker
• ion-picker-controller

Add support tsx files 'typescriptreact'

Currently ionic can be used in stenciljs projects also. And there is a typescript with jsx syntax.
Would be nice to have snippets inside jsx.

thanks