Total Pageviews

20 Feb 2017

Hide .js and .js.map files when using TypeScript in Visual Studio Code

TypeScript is awesome, but what if I don’t want to see extra .js and .js.map files everywhere that are polluting your file explorer in Visual Studio Code?

Here is an easy solution:

- Open user settings:

image

- Add "files.exclude" property to the user settings or to the workspace settings:
"files.exclude": 
{       
    "**/*.js*": {"when": "$(basename).ts"},
    "**/*.js.map": true    
}

image

Done:

image

AngularJs + TypeScript with SharePoint


Getting intellisense in Visual Studio Code for AngularJs in TypeScript is not as straightforward as one would expect. Follow these steps below to get it working
image
Open Visual Studio Code
Press CTRL+` and run these commands:
tsc –init
npm install typings –global
typings install dt~jquery --global --save
image
typings install dt~angular
image
Now, if you run tsc compiler, your will get errors like so:
image
in order to fix it:
- create a global.d.ts file inside typings folder. It will be a new entry point for your TypeScript
- add import * as angular from "angular" as a first line
- add /// <reference path="index.d.ts" /> following that:
image
Modify tsconfig.json include "files" property to reference the new global.d.ts file: :
{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    },

    "files": [
    "typings/global.d.ts"
  ]
}
image

Let TypeScript compiler know which folder contains your .ts code by adding “include” property to the tsconfig.json file:
"include": ["src/*"]
where src/ is your source code folder image Run TypeScript compiler and start watching the files:
tsc --watch
image
Now you get angular and jQuery intellisense in TypeScript:
image
Well. it’s not really SharePoint specific, but it’s nice to know SharePoint developers can use the same steps.
If you are searching for a quick start with SharePoint and modern tools have a look at these articles by Andrew Koltyakov.