Ionic Snippets installs statistics

<p align="center"> <a href="https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-ionic-snippets" target="blank"><img src="https://raw.githubusercontent.com/fivethree-team/vscode-ionic-snippets/master/images/banner.png" width="460px" alt="Ionic X VS Code Snippets" /></a> </p>

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>…