{"id":26365,"date":"2016-04-21T21:01:38","date_gmt":"2016-04-21T13:01:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26365"},"modified":"2016-04-21T20:28:40","modified_gmt":"2016-04-21T12:28:40","slug":"visual-studio-code-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/","title":{"rendered":"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner"},"content":{"rendered":"

Visual Studio Code<\/a> is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I\u2019ve tried it for some times while it was in Beta, and I\u2019m impressed with all it has brought to table this far.<\/p>\n

Visual Studio Code (VSC) is lightweight and fast, and if you have used SublimeText<\/a> or Atom<\/a> before, you will immediately feel at home. VSC comes with a command palette, multiple cursor selection, snippets, and code auto-completion<\/strong> \u2013 the features that you surely are familiar with already.<\/p>\n

Nonetheless, it also comes with its own signatures that makes it stand-out among the current players on the market. So, without further ado, let\u2019s take a look.<\/p>\n

1. Intellisense<\/h2>\n

IntelliSense is code auto-complete meets artificial intelligence<\/strong>. This utility provides a list of suggestions along with a short hint or description as we are writing codes. These is derived from several contextual factors<\/strong> such as the programming language, the syntax, the variables, the functions as well as all the codes within the file.<\/p>\n

IntelliSense supports a number of programming language out-of-the-box, including Sass, LESS, JavaScript, TypeScript, and PHP. Some extensions to include IntelliSense for other programming languages are also available. It is a great feature to improve productivity.<\/p>\n

\"Intellisense\"<\/figure>\n

2. Peek<\/h2>\n

While coding, you may often forget a particular function, where the function is initially defined, and what are the required parameters.<\/p>\n

With Peek<\/strong>, you can select a function then hit Shift<\/span> + F12<\/span>. The selection expands into an inline window showing the complete definition of the function<\/strong> as well as where the function is defined. The feature currently works in C, C#, JavaScript, TypeScript, .NET, and a few other programming languages.<\/p>\n

\"The<\/figure>\n

3. CLI<\/h2>\n

Similar to SublimeText with its subl<\/code> command line, Visual Studio Code is equipped a CLI named code<\/code> and it is easy to install.<\/p>\n

In Windows, the CLI will have already been installed along with the app. The CLI is accessible through the Command Prompt. In OS X, it can be installed and uninstalled through the Command Palette.<\/p>\n

You can use the CLI to open a particular directory to Visual Studio Code, or open your current project directory in Terminal or Command Prompt directly from the editor.<\/p>\n

\"Installing<\/figure>\n

4. Built-in Git<\/h2>\n

Visual Studio Code has Git built right in the editor. On the left of the sidebar, you will find the Git icon where you can initialize Git<\/a> as well as perform several Git commands<\/strong> such as commit<\/em>, pull<\/em>, push<\/em>, rebase<\/em>, publish<\/em>, and look into the changes within the file.<\/p>\n

In addition, if you are making changes on a Git repository, the Visual Studio will show color indicators in the code editor gutter<\/strong>, indicating where you have made the modifications.<\/p>\n

\"Git<\/figure>\n

We will dive into Git in Visual Studio Code in the next post, so stay tuned.<\/p>\n

5. Task Runner<\/h2>\n

Last but not least, Visual Studio Code also has a built-in Task Runner, which provides some level of convenience.<\/p>\n

To use this feature, we can either set a tasks.json<\/code> file or through some popular Task configuration like Grunt, Gulp, or MSBuild if provided. Once the configuration is set, we can run the Task Runner through the Command Palette by typing Run Task<\/strong>. Typing Tasks<\/strong> will list all related commands.<\/p>\n

\"Task<\/figure>\n

Wrapping Up<\/h2>\n

The Visual Studio Code interface, the key combinations, as well as the command palette are intuitive and familiar. All in all, Visual Studio Code is a promising code editor even though there are a couple of features missing.<\/p>\n

Nevertheless, I\u2019m considering switching and adapting my workflow to Visual Studio Code. I\u2019m looking forward to the next releases, hopefully, with substantial improvements.<\/p>","protected":false},"excerpt":{"rendered":"

Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I\u2019ve tried it for some times while it was in Beta, and I\u2019m impressed with all it has brought to table this far. Visual Studio Code (VSC) is lightweight and fast, and if you…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3397],"tags":[3772,511],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n5 Visual Studio Code Features That Make it a Frontrunner<\/title>\n<meta name=\"description\" content=\"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner\" \/>\n<meta property=\"og:description\" content=\"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-21T13:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner\",\"datePublished\":\"2016-04-21T13:01:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/\"},\"wordCount\":601,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/visual-studio-code-features\\\/vscode-intellisense.jpg\",\"keywords\":[\"visual studio code\",\"Web Developers\"],\"articleSection\":[\"Coding\",\"Desktop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/\",\"name\":\"5 Visual Studio Code Features That Make it a Frontrunner\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/visual-studio-code-features\\\/vscode-intellisense.jpg\",\"datePublished\":\"2016-04-21T13:01:38+00:00\",\"description\":\"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/visual-studio-code-features\\\/vscode-intellisense.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/visual-studio-code-features\\\/vscode-intellisense.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/visual-studio-code-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Visual Studio Code Features That Make it a Frontrunner","description":"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it","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:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/","og_locale":"en_US","og_type":"article","og_title":"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner","og_description":"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it","og_url":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-21T13:01:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner","datePublished":"2016-04-21T13:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/"},"wordCount":601,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg","keywords":["visual studio code","Web Developers"],"articleSection":["Coding","Desktop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/","url":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/","name":"5 Visual Studio Code Features That Make it a Frontrunner","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg","datePublished":"2016-04-21T13:01:38+00:00","description":"Visual Studio Code is a new a code editor from Microsoft. It has recently hit its first major release cycle, 1.0.0. I've tried it for some times while it","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/visual-studio-code-features\/vscode-intellisense.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visual Studio Code: 5 Awesome Features That Make It A Frontrunner"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Rf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26365"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26365\/revisions"}],"predecessor-version":[{"id":26366,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26365\/revisions\/26366"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26365"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}