Visual Studio Code – Linux installation

Elementary OS – linux distribution

On one of my machines I use ElementaryOS linux. This flavor of linux does not support DEB or RPM packages directly so I will use tar.gz file as installation medium.


Download code***.tar.gz file from address. Link to .tar.gz is under the “deb” square.


Open terminal and go to /usr/local directory. Unpack tar.gz file into default folder and create soft-link to code application:

cd /usr/local
sudo tar xvfz ~/Download/code****.tar.gz 
ln -s /usr/local/VSCode-linux-x64/Code /usr/local/bin/code


To update with a new version just download latest version of tar.gz package and unpack it to the same location. It is wise to delete (or rename) original folder first and then unpack new one.

sudo mv VSCode-linux-x64/ VSCode-linux-x64-OLD/
sudo tar xvfz ~/Download/code****.tar.gz 
sudo rm -rf VSCode-linux-x64-OLD/

Run and keep shortcut in the dock

We run code editor with “code” command. With the right click on the running program icon (in the dock), we change settings for “keep in Dock” and the program shortcut will stay in the dock.







Setting up the Environment for Node.js and TypeScript

To be productive as a programmer the write/run/debug cycle should be as fast as possible.

Because I am a little spoiled by angular-cli setup for client side web development I search for similar experience in the server side. It means that transpiling the typescript to javascript and node server restarts should be automatic and with hassle free debugging.

Install prerequisites

To create basic node application in the current folder use this command :

npm init

Install additional features needed for the application:

npm install typescript --save-dev
npm install @types/node --save-dev
npm install nodemon --save-dev

If you wish to write with express framework you will need additional libs:

npm install express --save
npm install @types/express --save-dev


The structure of the project folder

Server application is running in completely different project (folder) as angular client application. To develop client and server I will run two instances of vscode editors, each open corresponding folder.

The server folder contains this base structure:

I created src sub-folder where all source files will reside. For now I put index.ts file in it.

Setup typescript compiler

Create tsconfig.json file in the root folder of the project :

    "compilerOptions": {
        "target": "es2017",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
        "sourceRoot": "src",
        "outDir": "dist"
    "typeRoots": [
    "include": [
    "exclude": [

Compile and run the node application

Transpile (compile) typescript into javascript and watch any changes (use local tsconfig.json configuration):

tsc --watch

Start node with debug (inspect) and in auto restart mode (nodemon) :

nodemon --inspect ./dist/index.js --watch dist

Create combined npm command in package.json file

To specify multiple commands in the npm  under one script command, divide them with && character. Let’s create a “server” command:

"server": "tsc --watch | nodemon --inspect ./dist/index.js --watch dist",
  •  “tsc“: start typescript compiler in watch mode,
  •  “|” : pipe character allow to add aditional command in same script
  • nodemon“:  this command will start and restart “node” server after each detected change made by tsc compiler. Nodemon watch destination folder because it need to restart only after javascript files are changed (after transpile).

Before running nodemon for the first time in the project, you need to have compiled index.js at the required place (“dist folder”) so you need to compile at least first time the whole application manually (run tsc from the command line). After that initialization the watchers will watch for changes in source file automatically.

Run combined command from the terminal:

npm run server

Be aware of the small problem, if you ran the server inside vscode terminal window and then close the editor after that, without canceling the running process (with Ctrl+C), the node server will not automatically stop. You will need to find it between the running processes and stop it manually. To eliminate this obstacle create task and run combined command as task.


To ease start and stop of “npm run server” command and to have better control over all started processes, create a task and a task runner for the “server” command.

if you do not have “.vscode” folder  and tasks.json file yet you create it with /Tasks/Configure tasks menu option.

Inside tasks.json file (in .vscode folder) define the command in that form (use version 0.1.0, the version 2.0.0 has problem with task termination on exiting editor):

    "version": "0.1.0",
    "isShellCommand": false,
    "showOutput": "always",
    "tasks": [
            "taskName": "run server",
            "isBackground": true,
            "showOutput": "always",
            "promptOnClose": true,
            "command": "npm",
            "args": [

To run the task in vscode editor, open Tasks menu, open Run task and select run server task.

When you want to terminate the task, it means that stop will terminate the tsc instance and all node instances started by the “server” command.  From the Tasks menu select  Terminate task… .

If you close the editor with File/Exit , the program should also ask to terminate still running task.

If you omit “promptOnClose” setting you will not be interrupted at the exit from the editor and the processes will close as expected.


Keyboard shortcuts

Find command (F1)  “Open keyboard shortcuts file” and add definition to it.

// Place your key bindings in this file to overwrite the defaults
        "key": "ctrl+t",
        "command": "workbench.action.tasks.terminate",
        "args": "run server"
        "key": "ctrl+r",
        "command": "workbench.action.tasks.runTask",
        "args": "run server"

Press F1 and search for keyboard … The file is located in the Roaming folder in usual windows users location.


Create attach debuger command

To intercept debug breakpoints in code you need to attach to running node process with a debugger session in the vscode editor. Create new “attach” launch configuration in .vscode/launch.json file:

 "configurations": [
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "outFiles": [
            "skipFiles": [

Start debugging with “Attach by Process ID” configuration, then select the running node server instance . You can use F5 key when staying in the source file.

Now execution should stop at defined breakpoints as expected.

Debugging doesn’t stop the tsc & nodemon processes ! In fact you are only attached to your running server process. If you detach from it, you will be able to work forward as you never dive into debugging.  If you change any typescript file and save the file, watchers will detect change and restart all processes. Though you will be automatically detached from the debugging session.

Sample index.ts file

The file is a simplest REST service example in express/node program written in typescript, needed to test compiling, debugging environment.

import  * as express from 'express';

const app: express.Express = express();

app.get('/', (req: express.Request, res: express.Response) => {

    let person = { name : 'Igor Babič' };

    person = Object.assign(person, req.query);


app.listen('3002',() => console.log('Server listening on port 3002'));

Final version of package.json file:

  "name": "wodia",
  "version": "1.0.0",
  "description": "Work Diary",
  "main": "dist/index.js",
  "scripts": {
    "server": "tsc --watch | nodemon --inspect --watch dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "Igor Babic",
  "license": "MIT",
  "dependencies": {
    "express": "^4.15.4"
  "devDependencies": {
    "@types/express": "^4.0.36",
    "@types/node": "^8.0.24",
    "nodemon": "^1.11.0",
    "typescript": "^2.5.1"

Not sure if is important in this setup, but I use next workspace vscode settings:

    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true
    "typescript.referencesCodeLens.enabled": true,
    "tslint.ignoreDefinitionFiles": false,
    "tslint.autoFixOnSave": true,
    "tslint.exclude": "**/node_modules/**/*" 

And the user settings for vscode :

// Place your settings in this file to overwrite the default settings
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontSize": 14,
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Default Dark+",
    "": "C:\\Programs\\PortableGit-2.12.0\\bin\\bash.exe",
    "": ["--init-file", "c:\\Users\\igorb\\.bash_profile"],
    "git.enableSmartCommit": true,
    "workbench.startupEditor": "newUntitledFile",
    "editor.renderWhitespace": "none",
    "window.restoreFullscreen": true,
    "window.restoreWindows": "all"

Installed visual studio code extensions

Setup GIT BASH as internal terminal inside code

Download and install portable GIT Bash .

Create .bash_profile in /Users/_user_name_/ folder.

echo "RUN: .bash_profile | GIT: SSH agent | PATH: ./node_modules/.bin"

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
    (umask 077; ssh-agent >| "$env")
    . "$env" >| /dev/null ; }


# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2= agent not running
agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)

if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then

unset env

export PATH="$PATH:./node_modules/.bin"


Add current project node modules binary folder to the path

Add at least “./node_modules/.bin/” folder to bash profile, to be able to call locally installed modules directly inside internal terminal window. The internal terminal window will open in the project root folder.

export PATH="$PATH:./node_modules/.bin"

To be able to use git bash terminal inside visual studio code we add the terminal setup command in user settings:

"": "C:\\Programs\\PortableGit-2.12.0\\bin\\bash.exe", 
"": ["--init-file", "c:\\Users\\igorb\\.bash_profile"],

Don’t forget to define .bash_profile file in the shell arguments.

After everything is properly set up you will be able to use internal projects node programs directly from the command line:

How to setup git to run with ssh I described here.


Angular and Bootstrap 4 with Sass

Create angular project with Sass support

Angular has support for Sass build in. To create angular project with Sass support use the command:

ng new my_app --style=scss

If you update existing project use the command:

ng set defaults.styleExt scss

Install Bootstrap 4 with prerequisites

To install bootstrap use command:

npm install bootstrap@4.0.0-beta --save

Bootstrap 4 require jquery & popper.js lib to be installed:

npm install jquery --save
npm install popper.js --save

To check if everything is in place to start using bootstrap check npm modules :

 // list modules installed by user 
npm list -depth=0

The command “npm list” should not print out any errors.

Using bootstrap and customize it

We need project’s scss main file and import bootstrap in it. Under assets folder create new subfolder “scss” and place new “main.scss” file in it.

Add main.scss file into styles array in the .angular-cli.json file.

      "styles": [

Add import statement for bootstrap and the file with customized variables to main.scss.

You can also copy content of the node_modules/bootstrap/scss/_variables.scss file to your project custom _variables.scss file and change it as you wish. Some variables use computational functions for colors etc., so you will need to import file with functions first.

@import "~bootstrap/scss/functions";
@import '~assets/scss/_custom.scss'; 
@import '~bootstrap/scss/bootstrap';
Underline as first character of scss files – partials

If the name of the scss file begin with the underline character, it means that file will not be compiled to CSS file. The file represent partial scss file and it must be imported in primary scss file.  So the variables file is actually named “_custom.scss” and is placed in the assets/scss folder. It is imported into main.scss.

Font-Awesome Sass integration

Bootstrap 4 does not bring any icon font any more so you can use font awesome for example.

npm install font-awesome --save-dev

Add import statement into main.scss file :

/* adjust path as needed */
@import '~font-awesome/scss/font-awesome.scss';

Sample usage:

    <button (click)="onTake()" *ngIf="!isCamera">
        <i class="fa fa-camera-retro"></i>
        Take a picture

Separate style from html

To simplify html I prefer to write style information in separate files.

When we use large CSS libraries as Bootstrap, chances are very high, that we will need to replace them later with another css library or our own developed style theme.

So if you wish to be able to change Bootstrap in the future for something more advanced or modern and still use it today, you create your own CSS class definitions and extend bootstrap classes.


For each angular component create separated partial scss file and import it in the main.scss file.

@import "~bootstrap/scss/functions";
@import '~assets/scss/_custom.scss'; 
@import '~bootstrap/scss/bootstrap';

/* adjust path as needed */
@import '~font-awesome/scss/font-awesome.scss';

@import '~app/currency/currency-list/_currency-list.component.scss';
@import '~app/currency/currency-edit/_currency-edit.component.scss';

#app {
    @extend .container-fluid;
    padding: 0.5rem;


Name root html tag of each component with an ID so you can create styles in the hierarchy, valid only for the specific component, without leaking to any other part of the application.

<div id="app-currency-list">

  <h5 class="currency-list-title">
  <div class="currency-list-content">

    <div class="currency-list-toolbar">
      <button (click)="onAdd()" *ngIf="!isEdit">

    <div currency-list-message>
      <span *ngIf="errorMessage!=''">

    <app-currency-edit *ngIf="isEdit" (cancel)="onCancel($event)" (save)="onSave($event)" [currency]=currency>

        <tr *ngFor='let currency of currencies'>
              <button class="edit-button" (click)="onEdit($event, currency.rowId)">
                <span aria-label="Edit"></span>
              <button class="delete-button" (click)="onDelete($event, currency.rowId)">
                  <span aria-label="Delete"></span>

Styles are created in SCSS files inside component id selector:

#app-currency-list {
    @extend .card;

    .currency-list-content {
        @extend .card-body;

    .currency-list-title {
        @extend .card-header;

    .currency-list-toolbar {
        @extend .btn-toolbar; 

        button {
            @extend .btn;
            @extend .btn-outline-primary;
        i { 
            @extend .fa; 
            @extend .fa-plus;
            padding-right: 0.5rem;
    table {
        margin-top: 10px;
        @extend .table;

        thead {
            @extend .thead-default;

    .edit-button {
        @extend .btn;
        @extend .btn-outline-secondary;
        @extend .btn-sm;
        i {        
            @extend .fa; 
            @extend .fa-pencil;

    .delete-button {
        @extend .btn;
        @extend .btn-outline-secondary;
        @extend .btn-sm;

        i {
            @extend .fa; 
            @extend .fa-remove;


To use specific bootstrap class as your own, you need to extend it. You can use one or more classes in the single @extend statement.

Create your css selector names with semantic naming, that way your html code will become self descriptive and maintainable in the future.

Component declaration doesn’t use the scss files and we retain default view encapsulation of the component.

import { Component, OnInit } from '@angular/core';
import { Currency } from "app/currency/currency";
import { CurrencyService } from "app/currency/currency.service";
import { Observable } from "rxjs/Observable";

  selector: 'app-currency-list',
  templateUrl: './currency-list.component.html',
  providers: [ CurrencyService ]
export class CurrencyListComponent implements OnInit {
  title: string = 'Currency List';
  errorMessage: string;
  currencies: Currency[];
  currency: Currency;
  isEdit: boolean;

  constructor(private currencyService: CurrencyService) { }

  ngOnInit() {
    this.isEdit = false;

  refreshList() {
      currencies => this.currencies = currencies, 
      error=> this.onError(error)

  readCurrency(rowId: number) {
      newValue => {
        this.currency = newValue;
        this.isEdit = true;
      error => this.onError(error)

  onCancel(value: boolean) {
    this.isEdit = !value; 

  onAdd() {
    this.currency = new Currency();
    this.isEdit = true;

  onSave(value: Currency) {
      success => {
        this.isEdit = false;     
      error => this.onError(error)

  onEdit(event: Event, rowId: number) {

  onDelete(event: Event, rowId: number) {
    var ret: boolean;
    ret = confirm("Are you sure to delete record ?");
    if(ret == true) {
        success => this.refreshList(),
        error => this.onError(error)    

  onError(errorMsg: string) {
    this.errorMessage = errorMsg;

  log(msg: string, val?: any) {

The compiled CSS file is only one for whole application.

Redesigned currency example now looks like this :







Angular and Sass with Bootstrap 3 style support

Integrating Sass and Bootstrap 3 to angular project

If you want to customize default bootstrap 3 CSS theme, you will need to change it. But to be able to do that you will need to install CSS extension language Sass and bootstrap-sass definitions and then compile custom bootstrap CSS within your angular application.  This is officially supported by angular-cli tools.

Setup angular project for Sass

If you create new angular project you can add option “–styles=scss” to “new” command. Yo can also change existing project style settings with “set” command:

$ ng new my_app --style=scss
$ ng set defaults.styleExt scss 

To compile scss files to css files we need node-sass compiler :

npm install node-sass --save-dev

Next we install bootstrap-sass in our project :

npm install bootstrap-sass --save

Writing CSS with Sass

First we create “scss” subfolder under the “assets” folder and create main.scss file in it.

 !--- assets
      !--- scss

Angular project expect your main.scss file defined in the .angular-cli.json file:

"styles": [

Start the project and angular-cli will compile SCSS and include result CSS into your application.

Test Sass compiler and angular integration

Add some simple scss definition to main.scss:

$default-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$default-font-size: 16px;
$default-title-size: 200%;
$default-title-weight: bold;

.mytitle {
   font: $default-title-weight $default-title-size $default-font;

Now add a paragraph with “mytitle” class to your index.html :

  <p class="mytitle">This is a test</p>

If everything works  as expected you will see a test paragraph with correct font and weight as defined by scss:

Scss compiler create proper CSS definition and angular with webpack create styles.bundle.js file where we can find our “mytitle” class defined as :

// module
exports.push([module.i, ".mytitle {\n  font: bold 200% \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif; }\n", ""]);

Import Bootstrap Sass definitions

I am changing my existing seed project so you can get source code of this project from github repository “ANGULARMYAPP” .

Immediately after changing style definition to SCSS in our project, we lost all bootstrap CSS formating and the page looks like :

As we see from the screen above, there is no bootstrap formatting anymore, buttons are missing images (font_awesome as part of bootstrap also missing).

Now we will add bootstrap-scss and compile our own version of bootstrap css.

First we create new custom variables file and copy  all bootstrap theme variables to it. That way we will be able to customize any bootstrap setting simply by changing our copy of variable.

Create new file “_custom_variables.scss” and copy content of the bootstrap _variables.scss file into it or just copy a file into your scss folder. All files named with underscore are meant to be imported in another scss file by the Sass standard. Files without underscore are compiled to CSS format.

$cp node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss src/assets/scss/_custom_variables.scss

Now we import bootstrap and you variables file into main.scss file:

// Sass compiler need information where icons/fonts are with absolute path definition, tilde character (~) works from any project folder  
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';

@import "_custom_variables.scss";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

If everything works as expected we will get our original bootstrap design back and we can start modifying it, for example we will change primary button color to red. Change variable  $brand-primary in the file _custom_variables.scss to red color:

And the result should be visible immediately on the screen :

The button defined in the currency-list component with the class “btn-primary”  is now red as expected.