VS Code / Typescript: hide .js files

1.  Create a settings.json file under the .vscode folder if it does not exist.
2.  Add the following settings and save

{
"files.exclude": {
// Hide the node_modules folder
"node_modules/": true,
// Hide all files that end in .d.ts
"**/*.d.ts": true,
// Hide all files that end with .js if they have a .ts file
"**/*.js": {
"when": "$(basename).ts"
},
}
}

settingsJson

VS Code / Angular: launch in debug browser

.vscode.zip (1.91 kb)

Figure 1.  Launch debugger in Chrome

  1. Ensure Debugger for Chrome extension is installed (figure 2)
  2. In .vscode folder add launch (figure 3) and tasks (figure 4) json files
  3. From VS Code debug select Launch Chrome or Launch Chrome (Test)


Figure 2.  Visual Studio Code extension for Debugger for Chrome

{
"version": "0.2.0",
"configurations": [

{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm start",
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}",
"trace": true,
},
{
"name": "Launch Chrome (Test)",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm test",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceFolder}"
}
]
}
Figure 3. launch.json file
 
{
"version": "2.0.0",
"tasks": [
{
"label": "npm start",
"type": "npm",
"script": "start",
"isBackground": true,
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": {
"pattern": "$tsc",
"background": {
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "Compiled |compile."
}
}
}
},
{
"label": "npm test",
"type": "npm",
"script": "test",
"problemMatcher": [],
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
Figure 4. tasks.json file