{"id":2664,"date":"2019-03-19T18:07:30","date_gmt":"2019-03-19T18:07:30","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2664"},"modified":"2023-07-18T11:46:32","modified_gmt":"2023-07-18T15:46:32","slug":"10-awesome-vs-code-extensions","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions","title":{"rendered":"10 Awesome VS Code Extensions"},"content":{"rendered":"<p>Do you use <a href=\"http:\/\/code.visualstudio.com\" target=\"_blank\" rel=\"_noopener noopener\">VS Code<\/a> for Ionic and Angular development? Chances are good that you do. It&#8217;s a little app from the unlikeliest of companies that is becoming a big deal.<\/p>\n<p>At its core, VS Code (<a href=\"http:\/\/twitter.com\/code\" target=\"_blank\" rel=\"_noopener noopener\">Code<\/a> from here on), is a code editor that is free, open source, runs on multiple platforms, and has wide support for most major programming languages and environments.<\/p>\n<p>It goes beyond a simple editor, though, and starts to blur the line between a lightweight editor and a full-blown integrated development environment (IDE). Code is super fast, takes seconds to install, and provides key development features most commonly found in large, commercial IDEs.<\/p>\n<p>One of my favorite features of Code is its vast extension ecosystem. There are thousands of extensions out there built by the community that enhances functionality.<\/p>\n<p>In this post, I\u2019m going to share some of my favorite extensions that can help increase productivity when building Ionic and Angular apps.<\/p>\n<p><!--more--><\/p>\n<h2>Extensions for Teams<\/h2>\n<p>First, let&#8217;s talk about a few that will help out development teams. It is important when coding on a team that you maintain consistent coding styles and patterns. These extensions will help teams stay consistent on the really important decisions like tabs vs spaces, and if semicolons should or shouldn\u2019t be used.<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" target=\"_blank\" rel=\"_noopener noopener\">Prettier<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/esbenp.gallerycdn.vsassets.io\/extensions\/esbenp\/prettier-vscode\/1.7.3\/1545129683300\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>Prettier is a library that provides consistent formatting and style choices in code. The Prettier extension for Code will read a common configuration file (.prettierrc) and apply these rules to code whenever you use Code\u2019s built-in formatting. The rules available in Prettier aren\u2019t numerous, but they are beneficial. Below is a sample .prettierrc file:<\/p>\n<pre><code class=\"language-json\">{\n&quot;printWidth&quot;: 80,\n&quot;semi&quot;: true,\n&quot;singleQuote&quot;: true,\n&quot;tabWidth&quot;: 2\n}\n<\/code><\/pre>\n<p>This fairly common ruleset will provide some practical code formatting that your entire team will adopt. Setup Code to format on save, then formatting will always be applied, with no need to run some task to do it later!<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.vscode-typescript-tslint-plugin\" target=\"_blank\" rel=\"_noopener noopener\">TSLint<\/a><\/h3>\n<p>Where Prettier is mainly concerned with the formatting of code, TSLint rules can help enforce certain coding conventions like making sure triple equals is always used for equality checking. This helps make sure code complies with best practices decided by the team (as configured in the tslint.json file). TSLint can also fix common problems automatically:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/tslint.gif\" alt=\"TSLint in action\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/tslint.gif\" alt=\"TSLint in action\"><\/noscript><\/p>\n<p>Installing the TSLint extension shows lint errors in Code immediately, versus waiting for the build system to report them.<\/p>\n<blockquote><p>\n  Note: It was <a href=\"https:\/\/medium.com\/palantir\/tslint-in-2019-1a144c2317a9\" target=\"_blank\" rel=\"_noopener noopener\">recently announced<\/a> by the TSLint team that they plan on deprecating TSLint and focus on making TypeScript work better for ESLint. TSLint is still a good choice, though, until the work on ESLint for TypeScript is complete.<\/p><\/blockquote>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\" target=\"_blank\" rel=\"_noopener noopener\">GitLens<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 640px\" src=\"https:\/\/eamodio.gallerycdn.vsassets.io\/extensions\/eamodio\/gitlens\/9.4.1\/1546934651656\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>GitLens surfaces data from git history directly into the editing surface of Code. With it, you can easily see who last edited a particular line of code, view differences, and easily browse repos on a particular commit. There are so many features here and I only use a small subset of them (much like git itself), but it saves a ton of time when needing to view commit history.<\/p>\n<h2>Extensions for Development in Ionic &amp; Angular<\/h2>\n<p>This next set of extensions will help in your day-to-day coding activities by streamlining development.<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=johnpapa.vscode-peacock\" target=\"_blank\" rel=\"_noopener noopener\">Peacock<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/johnpapa.gallerycdn.vsassets.io\/extensions\/johnpapa\/vscode-peacock\/1.3.1\/1552684418473\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>If you ever work with multiple copies of Code open it can be confusing which project you are currently looking that. Peacock aims to fix that by letting you assign toolbar colors for a particular project. For instance, you can assign your Ionic project a red toolbar, and your backend Node project a blue toolbar, making it much easier to see what project you are working on in a particular window.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"483\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1.png\" alt=\"\" class=\"aligncenter size-full wp-image-2667 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1.png 640w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1-300x226.png 300w\" data-sizes=\"auto, (max-width: 640px) 100vw, 640px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/483;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"483\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1.png\" alt=\"\" class=\"aligncenter size-full wp-image-2667\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1.png 640w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/peacock-1-300x226.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/noscript><\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-rename-tag\" target=\"_blank\" rel=\"_noopener noopener\">Auto Rename Tag<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/formulahendry.gallerycdn.vsassets.io\/extensions\/formulahendry\/auto-rename-tag\/0.0.15\/1509790377763\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>This extension is so simple it&#8217;s a wonder that it isn\u2019t included in the default version of Code yet. With the below extension enabled, you can now rename a tag in HTML and have the closing tag rename with it:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/autorename.gif\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/autorename.gif\"><\/noscript><\/p>\n<p>It also works great on Ionic component tags as well.<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Angular.ng-template\" target=\"_blank\" rel=\"_noopener noopener\">Angular Language Service<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/angular.gallerycdn.vsassets.io\/extensions\/angular\/ng-template\/0.1.11\/1543605835748\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>The Angular Language Service extension is maintained by the Angular team and gives code completion and go-to definition support inside of HTML templates. No more wondering what you named that model object when trying to write our HTML!<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/angularlanguage.gif\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/angularlanguage.gif\"><\/noscript><\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=johnpapa.Angular2\" target=\"_blank\" rel=\"_noopener noopener\">Angular Snippets<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/johnpapa.gallerycdn.vsassets.io\/extensions\/johnpapa\/angular2\/7.0.1\/1541429319641\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>This set of Angular snippets has long been maintained by the great <a href=\"https:\/\/twitter.com\/John_Papa\" target=\"_blank\" rel=\"_noopener noopener\">John Papa<\/a> from Microsoft. Updated with each version of Angular, you will find dozens of snippets (bits of code that can quickly generate by typing a simple command) for the most common Angular tasks.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/angularsnippets.gif\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/ionic-site-assets\/angularsnippets.gif\"><\/noscript><\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=fivethree.vscode-ionic-snippets\" target=\"_blank\" rel=\"_noopener noopener\">Ionic 4 Snippets<\/a><\/h3>\n<p>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. If you are still on Ionic 3, search for Ionic 3 snippets.<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=infinity1207.angular2-switcher\" target=\"_blank\" rel=\"_noopener noopener\">Angular2 Switcher<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/infinity1207.gallerycdn.vsassets.io\/extensions\/infinity1207\/angular2-switcher\/0.2.0\/1540866821361\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>Of all the Angular based extensions, this one is perhaps my favorite. It allows you to quickly switch back and forth between the HTML, code, and CSS files that make up your component with quick keystrokes.<\/p>\n<p>While the switching between files is a nice time saver, another feature this extension has is the ability to either cmd\/ctrl+click (or hit f12) on variables and functions in HTML to quickly take you to the definition for them in the code file.<\/p>\n<h3><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=streetsidesoftware.code-spell-checker\" target=\"_blank\" rel=\"_noopener noopener\">Code Spell Checker<\/a><\/h3>\n<p><img decoding=\"async\" style=\"max-width: 124px\" src=\"https:\/\/streetsidesoftware.gallerycdn.vsassets.io\/extensions\/streetsidesoftware\/code-spell-checker\/1.6.10\/1525284241417\/Microsoft.VisualStudio.Services.Icons.Default\"><\/p>\n<p>This one is self-explanatory but extremely helpful: It catches spelling mistakes in code files. Often I find this helps catch unintended bugs by making a typo in a variable name that TypeScript wouldn\u2019t otherwise catch (like in templates).<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Code is a great editor for any development project. With a vast ecosystem of extensions and plugins, you can greatly customize your development environment. Have any favorite extensions that I didn\u2019t cover here? Post them in the comments down below!<\/p>\n<p>If you are looking for a more full-featured app builder for working on Ionic apps, then you might be interested in <a href=\"https:\/\/ionicframework.com\/studio\" target=\"_blank\" rel=\"_noopener noopener\">Ionic Studio<\/a>. It shares many similarities with Code but offers a deeper integration into Ionic with a drag and drop interface, a properties editor, and on-device testing for quickly building out Ionic apps.<\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you use VS Code for Ionic and Angular development? Chances are good that you do. It&#8217;s a little app from the unlikeliest of companies that is becoming a big deal. At its core, VS Code (Code from here on), is a code editor that is free, open source, runs on multiple platforms, and has [&hellip;]<\/p>\n","protected":false},"author":66,"featured_media":2668,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[60,107],"class_list":["post-2664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-angular","tag-ionic-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>10 Awesome VS Code Extensions - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.\" \/>\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\/10-awesome-vs-code-extensions\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Awesome VS Code Extensions\" \/>\n<meta property=\"og:description\" content=\"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-19T18:07:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:46:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ely Lucas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elylucas\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ely Lucas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\"},\"author\":{\"name\":\"Ely Lucas\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b\"},\"headline\":\"10 Awesome VS Code Extensions\",\"datePublished\":\"2019-03-19T18:07:30+00:00\",\"dateModified\":\"2023-07-18T15:46:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\"},\"wordCount\":1018,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png\",\"keywords\":[\"Angular\",\"Ionic 4\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\",\"url\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\",\"name\":\"10 Awesome VS Code Extensions - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png\",\"datePublished\":\"2019-03-19T18:07:30+00:00\",\"dateModified\":\"2023-07-18T15:46:32+00:00\",\"description\":\"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png\",\"width\":1440,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Awesome VS Code Extensions\"}]},{\"@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\/d4a019b9a30f6c3db51b24803ab2be9b\",\"name\":\"Ely Lucas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"caption\":\"Ely Lucas\"},\"sameAs\":[\"https:\/\/x.com\/elylucas\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/ely\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Awesome VS Code Extensions - Ionic Blog","description":"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.","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\/10-awesome-vs-code-extensions","og_locale":"en_US","og_type":"article","og_title":"10 Awesome VS Code Extensions","og_description":"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.","og_url":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions","og_site_name":"Ionic Blog","article_published_time":"2019-03-19T18:07:30+00:00","article_modified_time":"2023-07-18T15:46:32+00:00","og_image":[{"width":1440,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","type":"image\/png"}],"author":"Ely Lucas","twitter_card":"summary_large_image","twitter_creator":"@elylucas","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ely Lucas","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions"},"author":{"name":"Ely Lucas","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b"},"headline":"10 Awesome VS Code Extensions","datePublished":"2019-03-19T18:07:30+00:00","dateModified":"2023-07-18T15:46:32+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions"},"wordCount":1018,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","keywords":["Angular","Ionic 4"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions","url":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions","name":"10 Awesome VS Code Extensions - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","datePublished":"2019-03-19T18:07:30+00:00","dateModified":"2023-07-18T15:46:32+00:00","description":"Do you use VS Code for Ionic and Angular development? Chances are good that you do. It\u2019s a little app from the unlikeliest of companies that is becoming a big deal.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","width":1440,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/10-awesome-vs-code-extensions#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"10 Awesome VS Code Extensions"}]},{"@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\/d4a019b9a30f6c3db51b24803ab2be9b","name":"Ely Lucas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","caption":"Ely Lucas"},"sameAs":["https:\/\/x.com\/elylucas"],"url":"https:\/\/ionic.io\/blog\/author\/ely"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/vs-code-extensions-for-ionic-devs.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2664","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\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2664"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2664\/revisions"}],"predecessor-version":[{"id":5485,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2664\/revisions\/5485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2668"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}