[TypeScript] Dev. Environment Configuration with VS Code

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It offers classes, modules, and interfaces to help you build robust components.

Installation

NPM Module

If you want to use TypeScript compiler wherever, install it globally.

$ yarn globally add typescript
  or
$ npm i -g typescript

If you want to use TypeScript only in a specific project, you can install it locally.

$ yarn add -D typescript
  or
$ npm i -D typescript

VS Code Extension

Install the below extensions.

Project Configuration

Create a folder for practice.

$ yarn init -y

I'm assuming you will use TypeScript locally. If you use it globally, it is easier than this.

$ yarn add -D typescript tslint

Config a TypeScript.

$ ./node_modules/.bin/tsc --init

If you installed TypeScript globally, you can just type tsc.

Config a TSLint.

$ ./node_modules/.bin/tslint --init

 

Now, all the necessary files have been created.

An example setting is given below.

Refer to the below sample and set up those files as you want.

 

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./out",
    "removeComments": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

 

tslint.json

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

VS Code Configuration

Create .vscode folder

And create some files inside the folder.

 

setting.json

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.exclude": {
    "**/node_modules": true
  }
}

Please refer to this file, make your own VS Code setting.

 

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build - tsconfig.json",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "tsc: watch - tsconfig.json",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": ["$tsc-watch"],
      "group": "build"
    }
  ]
}

This file is used when building a project.

I created two tasks, one is for a one-time building, and the other is watching mode building.

 

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

This file is used when debugging a project.

Usage

Now, let's use those stuff that we have made.

Create a file for example.

 

src/index.ts

let message: string = 'Hello World';
console.log(message);

 

If you have followed up to this point, Linter would have already been applied.

 

Press the Tasks: Run Build Task shortcut key.

If you use the MAC, the key is ⇧⌘B.

And Windows or Linux maybe ⇧⌃B.

Our project is built as we configured, and the resulting stuff is in the out folder.

 

We can also build as a watching mode.

Press ⇧⌘P (⇧⌃P), and select Tasks: Run Task.

You can see the tasks that we made.

Select tsc: watch - tsconfig.json.

Now, our project is built by watching mode.

 

Press F5 for debugging our project.

VS Code is under evolution. It is containing more useful tools like the inspector tool and debugger for chrome.

I'm planning to use them after stabilization.

At that time, I'll post about it.

 

Every configuration is finished!!

Refer to this post, create your own development environment.