{"id":374,"date":"2015-04-30T14:43:00","date_gmt":"2015-04-30T14:43:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/2015\/04\/30\/using-typescript-in-visual-studio-code\/"},"modified":"2019-02-20T10:46:14","modified_gmt":"2019-02-20T17:46:14","slug":"using-typescript-in-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/using-typescript-in-visual-studio-code\/","title":{"rendered":"Using TypeScript in Visual Studio Code"},"content":{"rendered":"

With the recent announcement of Visual Studio Code<\/span><\/a>, there have been a lot of questions about how to get started writing TypeScript.  In this quickstart, we’ll create a simple TypeScript project.  Out of the box, Visual Studio Code supports TypeScript 1.5 beta<\/a> and using either the node or Visual Studio command-line compilers.  For this quickstart, because of its use of the new tsconfig.json feature, we assume you already have TypeScript 1.5 beta installed.  <\/p>\n

Let’s start by making a new empty folder, MyProject, and opening it in Visual Studio Code. In Window, click “Open Folder”; on OS X, click “Open” and select a folder:<\/span><\/p>\n


\"openfolder.png\"<\/span><\/span><\/span><\/p>\n

Create a new file by clicking “New FIle” in the MyProject row of the Explore Sidebar:<\/span><\/p>\n

\"newfile.png\"<\/span><\/p>\n

Enter “tsconfig.json” as the filename<\/span><\/p>\n

Type { } in the file and hit Ctrl-Space between the braces to trigger completion:<\/span><\/p>\n

\"tsconfigautocomplete.png\"<\/span><\/p>\n

We can configure the project for ES5, AMD modules, and source maps:<\/span><\/p>\n

\"tsconfigcomplete.png\"<\/span><\/p>\n

Using “New File” again, add a TypeScript file and try writing some code in it:<\/span><\/p>\n

\"withletfile.png\"<\/span><\/span><\/p>\n

Before anything else, let’s try compiling with the Ctrl-Shift-B shortcut key. A message appears telling us that we don’t have a task runner enabled for this project yet. Click “Configure Task Runner” to set up a config file:<\/span><\/p>\n

\"notaskrunner2.png\"<\/span><\/p>\n

Remove “HelloWorld.ts” from the “args” array, and add a property called “isShellCommand” with the value ‘true’ in the config file:<\/span><\/p>\n

\"tasksjsonconfig.png\"<\/span><\/span><\/p>\n

While your application is building, you’ll notice an indicator at the bottom left of the screen<\/span><\/p>\n

\"buildinprogress.png\"<\/span><\/p>\n

The icons show source control status, build indicator (spinning), number of errors, and number of warnings.  You can click on the source control, error, and warning indicators for more information.<\/span><\/p>\n

In the lower right corner, you’ll see the rest of the status bar, showing the cursor position, line endings, language, and smiley. Click the smiley to send us feedback!<\/span><\/p>\n

\"\"<\/span><\/p>\n

Visual Studio Code is still a preview release.  If you notice issues or have ideas for feature requests, be sure to use the smiley to let us know.  We look forward to hearing from you.<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

With the recent announcement of Visual Studio Code, there have been a lot of questions about how to get started writing TypeScript.  In this quickstart, we’ll create a simple TypeScript project.  Out of the box, Visual Studio Code supports TypeScript 1.5 beta and using either the node or Visual Studio command-line compilers.  For this quickstart, […]<\/p>\n","protected":false},"author":377,"featured_media":1797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"

With the recent announcement of Visual Studio Code, there have been a lot of questions about how to get started writing TypeScript.  In this quickstart, we’ll create a simple TypeScript project.  Out of the box, Visual Studio Code supports TypeScript 1.5 beta and using either the node or Visual Studio command-line compilers.  For this quickstart, […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=374"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media\/1797"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media?parent=374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}