{"id":4090,"date":"2022-03-18T15:34:36","date_gmt":"2022-03-18T15:34:36","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4090"},"modified":"2022-03-29T14:47:24","modified_gmt":"2022-03-29T14:47:24","slug":"a-visual-studio-code-extension-for-ionic","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic","title":{"rendered":"A Visual Studio Code Extension for Ionic"},"content":{"rendered":"

Historically, when working with Ionic\/Capacitor, the CLI is the main interface developers use to invoke various functions. Want to build your app? Want to add a platform? What about deploying to the simulator? All this is made possible by Ionic and Capacitor CLIs. Well, today we’re thrilled to announce a new extension for Visual Studio Code that handles all of this, and so much more!<\/p>\n

<\/p>\n

Getting started<\/h2>\n

With the extension installed<\/a>, you’ll notice a new Ionic logo in the activity bar. When you click this, you’ll get one of two views.<\/p>\n

If you’re in an empty directory, you can create a new Angular, React, or Vue project.<\/p>\n

\"Staring

If you click the drop-downs for each option, you’ll see a list of different templates that are available. Click one of the templates and will prompt you to enter an app name.<\/p>\n

\"Creating

So far, this all very similar to the starting experience to the ionic start<\/code> command.<\/p>\n

This changes however once the project is done being generated.<\/p>\n

Working with Projects<\/h2>\n

If you’ve created a new project through the extension or have one that you’ve created via the Ionic CLI, you’ll see a bunch of new capabilities in the extension’s view.<\/p>\n

\"Running

For starters, you can perform common actions that devs perform when developing their apps. You can perform a build, start the development server, or sync your web assets with the native projects. But that’s not all, you can also perform various tasks declared in your package.json<\/code>. So whatever you need to do when developing your app, this extension will give you full access to it.<\/p>\n

\"Running

Moving on, there’s also a feature to be able to generate your own Icons and splash screens for iOS and Android via the Capacitor Asset tool chain. This includes not only static icons, but adaptive icons for Android.<\/p>\n

\"Generating

Probably the most interesting feature available is the Recommendations drop down. Here you’ll get various suggestions for your project that are based on deprecated packages or if your project uses Cordova plugins when there are Capacitor versions available. This will help many developers who are in the process of migrating their apps from Cordova to Capacitor.<\/p>\n

\"Seeing

What about my Editor<\/h2>\n

Chances are, this extension will be a Visual Studio Code exclusive (at least for now). VS Code provides a lot of powerful features that make building Ionic apps really painless. With its default configuration, you can start working with HTML, CSS, and TypeScript (or JavaScript) without having to do anything. It’s so great that when working with community members who aren’t sure what editor to use, we often just suggest the use VS Code.<\/p>\n

But if you are really interested in seeing this extension in other editors, reach out and let us know<\/a>!<\/p>\n

Well that’s all for now folks. I hope you enjoy the extension and give it a try! Remember, we’d love to hear if you have any feedback or suggestions, please click the “Provide Feedback” button in the extension, or open an issue on the extension issue tracker<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Historically, when working with Ionic\/Capacitor, the CLI is the main interface developers use to invoke various functions. Want to build your app? Want to add a platform? What about deploying to the simulator? All this is made possible by Ionic and Capacitor CLIs. Well, today we’re thrilled to announce a new extension for Visual Studio […]<\/p>\n","protected":false},"author":5,"featured_media":4144,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"544099","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/a-visual-studio-code-extension-for-ionic\/221535","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[122],"tags":[247,245,246],"class_list":["post-4090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product","tag-extension","tag-visual-studio-code","tag-vs-code"],"acf":[],"yoast_head":"\nA Visual Studio Code Extension for Ionic - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Visual Studio Code Extension for Ionic\" \/>\n<meta property=\"og:description\" content=\"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-18T15:34:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-29T14:47:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"A Visual Studio Code Extension for Ionic\",\"datePublished\":\"2022-03-18T15:34:36+00:00\",\"dateModified\":\"2022-03-29T14:47:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\"},\"wordCount\":521,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png\",\"keywords\":[\"Extension\",\"Visual Studio Code\",\"VS Code\"],\"articleSection\":[\"Product\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\",\"url\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\",\"name\":\"A Visual Studio Code Extension for Ionic - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png\",\"datePublished\":\"2022-03-18T15:34:36+00:00\",\"dateModified\":\"2022-03-29T14:47:24+00:00\",\"description\":\"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Visual Studio Code Extension for Ionic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Visual Studio Code Extension for Ionic - Ionic Blog","description":"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic","og_locale":"en_US","og_type":"article","og_title":"A Visual Studio Code Extension for Ionic","og_description":"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.","og_url":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic","og_site_name":"Ionic Blog","article_published_time":"2022-03-18T15:34:36+00:00","article_modified_time":"2022-03-29T14:47:24+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","type":"image\/png"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"A Visual Studio Code Extension for Ionic","datePublished":"2022-03-18T15:34:36+00:00","dateModified":"2022-03-29T14:47:24+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic"},"wordCount":521,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","keywords":["Extension","Visual Studio Code","VS Code"],"articleSection":["Product"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic","url":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic","name":"A Visual Studio Code Extension for Ionic - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","datePublished":"2022-03-18T15:34:36+00:00","dateModified":"2022-03-29T14:47:24+00:00","description":"Check out the new Visual Studio Code Extension for Ionic and see how it can help you in app development process.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/a-visual-studio-code-extension-for-ionic#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"A Visual Studio Code Extension for Ionic"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionc-vscode-extension-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4090"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4144"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}