Ionic 4 Snippets for VS Code

Increase productivity with VS Code Snippets for Ionic 4

261 words. 2 min.
#vscode #ionic #typescript #html #scss

I have started working with Ionic 3 in end of 2017. I switched from IntelliJ Idea to Visual Studio Code n the middle of 2018.

❤️ VS Code

VS Code has a huge community and provides amazing extensions to boost and improve development. I started using angular snippets extensions by John Papa and Mikael Morlund. These snippets are simple and helps me if I have forgotten the correct syntax. At this time, I started my first projects with Ionic 4 which was still in beta. However, I thought snippets for Ionic 4 would be super useful. I searched for an extension, but couldn't find one.

🧩 VS Code Extension

I got the idea to create my own Ionic 4 snippets extension for VS Code. I looked up how easy it is to create an extension for VS Code. I was so suprised, it was super simple.

I had to create a new extension project and enable snippets for the languages I like to support with the extension. I have been adding snippets for Ionic 4 in Typescript, HTML and SCSS. All the input for the snippets comes from the Ionic 4 Api.

I released the extension to the marketplace and open sourced it on github.


Ionic mentioned the extension in their blog post 10 Awesome VS Code Extensions.

Much like the Angular snippets, this gem will complete Ionic component tags in your HTML quickly as well as some special snippets for code and CSS files. This extension saves on having to go back and forth on the docs so much.