4/29/2018 - 3:47 AM

Typescript Development Environment Setup

Typescript Development Environment Setup


Run npm install again npm install

Linting for VSCode

  1. Globally install tslint and typescript on your system:

npm install -g tslint typescript htmlhint stylelint

  1. Install vscode for your environment:

  2. Install the following vscode plugins by pressing f1 and entering the following commands

ext install EditorConfig
ext install tslint
ext install HTMLHint
ext install stylelint
  1. Go to File > Preferences > User Settings and entering the following in your settings.json (This shouldn't be needed, but in case the .editorconfig file doesn't work for you these are the defaults)
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,

If you relaunch your editor you should now have linting enabled and the .editorconfig file should overwrite your settings. There will probably be a ton of warning in your files if you haven't been working with tslint enabled. Fix them.

Running Unit Tests

Running the command npm test in your project folder should run all unit-tests in the project and generate a coverage overview at the end, the goal is to have 100% coverage on everything.

If you browser to the file location of

ie: C:/Users/jonbo/code/biznas/jbf/jbf-club-app/coverage/lcov-report/index.html

in your browser you can click into each tested file and get a detailed breakdown of what is missing tests

Running e2e Tests

  1. Install typings globally if you haven't already npm i -g typings
  2. Run the webdriver-update npm run-script webdriver-update
  3. Start the ionic server npm start
  4. Renametest/protractor.conf.template.js to test/protractor.conf.js
  5. Configure test/protractor.conf.js to use the correct base url (the url you have ionic setup to use, might be localhost) on line 2: baseUrl: 'http://10.0.1.XX:8100'
  6. Run the e2e tests npm run-script e2e

You should see a browser window open, run all the tests, and then report the results in your console.