VSCode as Typescript IDE

Backend
Code coverage, Typescript, Unit Test, VSCode, nodejs

This is a setup guide for using VSCode as an IDE for Typescript development.

This article will include what plugin to use for code coverage report, auto code format and hot reload for typescirpt unit tests and application.

VSCode Plugins

You will need these plugins for code coverage report and auto code formatting.

  • Coverage Gutter
  • Prettier

Nodejs

In the project folder, run these commands

1
2
3
4
5
6
7
8
9
10
11
12

npm init

mkdir app # Application folder, store all typescripts

mkdir test # Test folder, store all test scripts

gi node > .gitignore # gitignore from https://www.gitignore.io/

npm i typescript # Typescript compiler

npm i mocha nyc @types/mocha @types/nyc ts-node nodemon -D # Unit Tests and hot reload

package.json

Edit scripts Section

1
2
3
4
5
6
7
8
9
10
11
"scripts": {
    "postinstall": "tsc -p .",
    "watch": "tsc -w -p .",
    "debug":
        "nodemon --watch ./dist --inspect=0.0.0.0:5858 --nolazy ./dist/index.js",
    "docker-debug": "docker-compose up",
    "test": "nyc mocha",
    "watch-test":
        "nodemon -e ts --watch package.json ./app ./test --exec 'npm test'",
    "start": "node ./dist/index.js"
}

Add nyc section

1
2
3
4
5
6
7
8
9
"nyc": {
    "include": ["./app/**.*"],
    "extension": [".ts", ".tsx"],
    "require": ["ts-node/register"],
    "reporter": ["text-summary", "html", "lcov"],
    "sourceMap": true,
    "instrument": true,
    "all": true
}

mocha.opts

Add mocha.opts in ./test

1
2
3
4
--require ts-node/register
--require source-map-support/register
--recursive
test/**/*.tests.ts

Docker Settings

Dockerfile

1
2
3
4
5
6
7
8
9
FROM node:8-slim

WORKDIR /server

COPY . /server
RUN npm install

EXPOSE 3000
CMD [ "npm", "start" ]

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
version: '2'
services:
  web:
    build: .
    command: npm run debug
    volumes:
      - './dist:/server/dist'
    ports:
      - '3000:3000'
      - '5858:5858'

Typescript Settings

settings.json

1
2
3
{
    "editor.formatOnSave": true
}

launch.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch in Docker",
      "preLaunchTask": "tsc-watch",
      "protocol": "auto",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "docker-debug"],
      "port": 5858,
      "restart": true,
      "timeout": 60000,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/server",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

task.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "version": "0.1.0",
  "tasks": [
    {
      "taskName": "tsc-watch",
      "command": "npm",
      "args": ["run", "watch"],
      "isShellCommand": true,
      "isBackground": true,
      "isBuildCommand": true,
      "problemMatcher": "$tsc-watch",
      "showOutput": "always"
    }
  ]
}

Running the project

In VSCode press F5 (fn + F5 if on a mac), every time you change files in ./app, it will reload application.

Unit Tests

1
npm run watch-test

Code Coverage

Start watching lcov report

1
Shift + CMD + 8
Share Comments