Visual Studio Code

Good Docs

Installation

Points

  • Interface overview & theming from welcome/ startup page
  • Watch into videos from docs
  • Default git exists
  • Use inbuilt terminals
  • use setting files to configure specific for project like jsconfig.json & launch settings file

Emmet syntax

Extensions Installed

  • Debugger for chrome //big impact
  • Beautify : to beautify spacing, indentation ..etc
  • Better Comments : colored comments
  • Code Spell Checker
  • Document This : for JSDoc
  • Import Cost : size of imported library
  • node-readme : check library documentation with in editor
  • npm : library versioning validation & intellisense of available library + version
  • REST Client : test rest api as a normal code file
  • Aurelia, Aurelia snippets: Our framework intellisense & snippets
  • Path Intellisense
  • open in browser (TechER)
  • snippet-creator (by vincentkos)
  • Markdown Table Prettifier
  • HTML Preview by Thomas Haakon Townsend
  • Live Server by ritwickdey
  • Live Share Extension Pack by Microsoft (live editing + audio calls)
  • More Info
  • Video
  • Git History By Don Jayamanne

ESLINT

  • disable eslint indentation as it conflicts with beautify //C:\Users\xyz\AppData\Roaming\Code\User\settings.json
"eslint.options": {
"rules":{
"indent": "off",
"radix": "off"
}
}

can use following to disable eslint for a section / file (.)

/* eslint-disable */

Note : eslint npm package must be globally available

npm install -g eslint

Extensions later

  • Docker related

  • Remote debugging upcoming by facebook

  • Machine Learning related

  • Browser Preview : Open browser within editor

  • CodeQL

  • Time Travel Debugger

markdownlint

C:\Users\someUser\AppData\Roaming\Code\User\settings.json (or BY UI - go to settings)

//to suppress some setting
"markdownlint.config": {
"MD033": false,
}

Note : MarkdownLint rules

Debugging

docs

  • can add breakpoint as well as log point
  • Debugging console has REPL feature

NodeJS (Direct Debug == Launch)

.vscode -> launch.json

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch", //launch or attach
"name": "Launch Program", //custom name
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\server.js",
"runtimeArgs": ["-r","esm"]
}
]
}

On debugging icon click, above settings executes "node.exe -r esm --inspect-brk=46094 server.js " . Can debug within the editor.

  • "request" = "launch" means launching a program with debugging mode (typical server application style)

NodeJS (attach existing Debug == attach)

.vscode -> launch.json

{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}

say execute 'npm run-script debug', which executes internally ' node --inspect-brk -r esm server.js'

We see some output like 'Debugger listening on ws://127.0.0.1:9229/15c25267-95fc-4e20-a445-702b90964386'

  • Now click on VS Code debug -> attach mode

    Can debug within the editor.

  • "request" = "attach" means To attach existing node debugger to VS code

Chrome (Aurelia example)

.vscode -> launch.json

//code from aurelia cli
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.chrome",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
  • FIrst run 'npm start' -> which executes 'au run'.
  • Now click on VS CODE debug icon - it launches chrome with particular URL 'http://localhost:8080'; Can debug within the editor.

local & Remote Browser debugging aurelia app

  • do local npm start
//in web pack have same file name for dev & prod
new SourceMapDevToolPlugin({
...
filename: production ? '[name].[chunkhash].bundle.map' : '[name].[chunkhash].bundle.map', //to allow remote debugging
...
}),
  • open remote or local site in browser , open dev tools (F12), in source tab -> webpack:// -> . -> entire code exists, add break points & use it

Note : For remote debugging, dist folder should contain entire build to see webpack in dev tools

Gulp Tasks (md to html)

docs

install globally

npm install -g gulp

install locally

npm install gulp gulp-markdown-it --save

Note : We need to install gulp both globally (-g switch) and locally

create a gulp file at root

//gulpfile.js
const { series, parallel, watch, src, dest } = require('gulp');
var markdown = require('gulp-markdown-it');
function fnMarkdown() {
return src('**/*.md')
.pipe(markdown({ //point A
preset:"commonmark",
options:{ //point B
html :true
}
}))
.pipe(
dest(function(f) {
return f.base;
})
);
}
exports.markdown = series(fnMarkdown);
exports.default = function() {
watch('**/*.md', series(fnMarkdown));
};
/**
* point A : function params from https://www.npmjs.com/package/gulp-markdown-it
* point B : options from https://markdown-it.github.io/markdown-it/#MarkdownIt.new
* */

create tasks.json file in .vscode folder

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "MD to HTML",
"type": "gulp",
"task": "default"
}
]
}

manually run task

gulp default

From VSCODE

f1 -> Tasks : Run Task -> MD to HTML

Binding keyboard shortcuts

docs

  • sample beautify file

f1 -> keyboard shortcuts or go to file directly '\Users\someUser\AppData\Roaming\Code\User\keybindings.json'

// Place your key bindings in this file to override the defaults
[
{
"key": "ctrl+b",
"command": "HookyQR.beautify",
"when": "editorFocus"
}
]

User defined snippets

docs

  • F1 -> (type) snippets -> (select) Configure User snippets -> (select some language - say) MarkDown
File created at C:\Users\someUser\AppData\Roaming\Code\User\snippets\markdown.json.
This file will have all snippets for *.md extension
{
"customSnippetName" : {
"prefix": "snipReadmeComp", // triggers the snippet
"description": "Readme file of component",
"body": " snippet code "
}
}

Note : (check docs) for multi line content , body must be added in array form & double quotes must be escaped/ use single quote.

snippet-creator extension can be used.

  • select some content, f1 -> create snippet & fill required questions

Team VS Code Settings

Git Source :
repo/mobility_dept/misc/sample_codes/vscode_settings/roaming_code_user/
Target destination :
C:\Users\{user}\AppData\Roaming\Code\User\

commands

f1 -> fold all block comments

user settings file

//C:\Users\some\AppData\Roaming\Code\User\settings.json
//ignoring experimentalDecorators error (in user settings file)
"javascript.implicitProjectConfig.experimentalDecorators": true
//to use typescript validations for normal JS
"javascript.implicitProjectConfig.checkJs": true,

docs- type check JS files

VSCODE JS

disable the type checks per line by adding the following comment

// @ts-ignore

To disable type checks on an entire you can use

// @ts-nocheck

//au run issue as debugger

//https://stackoverflow.com/questions/43379296/how-to-implement-au-run-watch-task-debugging

//shared tasks globally (open issue) https://github.com/Microsoft/vscode/issues/1435

  • code filename.js //in vscode terminal opens the file
  • json schema is used for intellisense in VSCODE config files //can't we use that concept
  • (in typescript files) right click -> format document