Using TypeScript in Visual Studio Code

Luke Hoban [MS]

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, because of its use of the new tsconfig.json feature, we assume you already have TypeScript 1.5 beta installed.  

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:


openfolder.png

Create a new file by clicking “New FIle” in the MyProject row of the Explore Sidebar:

newfile.png

Enter “tsconfig.json” as the filename

Type { } in the file and hit Ctrl-Space between the braces to trigger completion:

tsconfigautocomplete.png

We can configure the project for ES5, AMD modules, and source maps:

tsconfigcomplete.png

Using “New File” again, add a TypeScript file and try writing some code in it:

withletfile.png

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:

notaskrunner2.png

Remove “HelloWorld.ts” from the “args” array, and add a property called “isShellCommand” with the value ‘true’ in the config file:

tasksjsonconfig.png

While your application is building, you’ll notice an indicator at the bottom left of the screen

buildinprogress.png

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.

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!

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.

0 comments

Discussion is closed.

Feedback usabilla icon