Visual Studio Code

Aka: Visual Studio Code, VS Code

advertisement

II. Precautions: Non-Medical

  1. Not for Medical Care
  2. The author uses several software packages and programming languages to develop FPnotebook content
  3. For convenience, a dozen pages in FPNotebook are dedicated to quick notes on content creation

III. Pitfalls

  1. Node
    1. Wrong Node version
      1. Use LTS (latest stable version), which in 2016 is roughly 4.5 (not 5+)
  2. Typescript
    1. Make sure the environ paths are correct, and that npm path precedes typesccript path
    2. Path for typescript should be most recent version
    3. "Edit Environmental Variables > System Variables > Paths" (Windows)
      1. C:\Users[USERNAME]\AppData\Roaming\npm
      2. C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8

IV. Technique: Starting

  1. Open from command prompt
    1. Type "code ."

V. Technique: IDE Navigation

  1. Command palette
    1. F1 or Ctrl-P
      1. Opens command palette
    2. ?
      1. Help (type within Command palette)
    3. >
      1. Show and run commands (type within Command palette)
      2. Ctrl-Shift-P opens the palette to run tasks/commands
    4. !
      1. Errors and warnings (type within Command palette)
    5. #
      1. Open symbol (type within Command palette)
    6. git
      1. Run git command
    7. task
      1. Run task
    8. task terminate
      1. Terminate task
    9. @
      1. Go to symbol (or "@:" to go to symbol by category)
    10. :
      1. Go to line
  2. Search
    1. Ctrl-P
      1. Search/Navigate for file
    2. Ctrl-Shift-F
      1. Search within all files in current folder
    3. Ctrl-Shift-J
      1. Advanced search option settings
  3. Definitions
    1. F12
      1. Go to definition
    2. Alt-F12
      1. Peek Definition
  4. Side-by-side windows
    1. Ctrl-B
      1. Toggle explorer side-bar visibility
    2. Ctrl-click on a second file in the "explorer" side-bar
      1. Open selected file in side-by-side panel
    3. Ctrl-\
      1. Split the current active panel into two parts
    4. Ctrl-1, Ctrl-2, or Ctrl-3
      1. Switch between panels
  5. Text Editor
    1. Shift-Alt-F
      1. Auto-format code
    2. Ctrl-/
      1. Toggle line comment
    3. Alt-Arrow (up or down)
      1. Moves the current line (or selection) up or down
    4. Ctrl-Space
      1. Opens intellisense (including custom snippets for the given file type)

VI. Technique: IDE Customization in General

  1. Extension
    1. Type "extension"
    2. Helpful extensions
      1. Angular 2 Snippets
        1. https://github.com/johnpapa/vscode-angular2-snippets
      2. Path Intellisense
        1. https://github.com/ChristianKohler/PathIntellisense
      3. Html tag wrap (htmltagwrap)
        1. https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
        2. Use Alt-W to surround with... (then type div or other tag)
  2. Helpful settings
    1. files.autosave
    2. files.exclude
      1. Exclude files from the "explorer" side bar
    3. terminal.integrated.shell.windows
      1. "\\windows\\system32\\WindowsPowerShell\\v1.0\\powershell.exe"

VII. Technique: IDE Customization for Angular 2

  1. Global setup
    1. Add Snippets (https://github.com/johnpapa/vscode-angular2-snippets)
  2. Angular project setup
    1. See AngularJs
    2. Use a starter project
      1. Angular quickstart github
      2. Angular 2 CLI
    3. Delete .git if starter project was cloned
    4. Git install (and git add -A, git commit -m, git push origin master)
    5. Npm install
    6. Copy .vscode directory (launch, settings, tasks) from prior project if already setup (see below)
    7. Set "tsconfig.json", watch=true (as below), "sourceMap": true
    8. Start task tsc (typescript compiler) in VS Code (see below)
    9. Once you have established a stable, customized base project, save to a git repo as base, or create Yoman project
  3. Typescript compilation automation (change from node script to VS task that compiles on save)
    1. Set "tsconfig.json", watch=true
    2. Enter "Tasks: Configure Task Runner", and default TSC task will be added
    3. Change package.json node scripts to not run tsc, as this will now be run as VS Code task
  4. Debugging setup to launch liteserver on run (F5)
    1. Open debug tab and click settings icon (cog) to create the launch.json file
    2. In launch.json, set "program": "node_modules/lite-server/bin/lite-server"
  5. Debugging setup to launch in chrome (allows for chrome breakpoints to be hit in the VS Code debug window)
    1. Install chrome extension in VS Code
    2. Modify tsconfig.json, setting "sourceMap": true
    3. Add another config section to launch.json with following settings
      1. "name": "Launch localhost with sourcemaps",
      2. "type": "chrome",
      3. "request": "launch",
      4. "url": "http://localhost:9222/",
      5. "sourceMaps": true,
      6. "webRoot": "${workspaceRoot}"
    4. Running
      1. Close all chrome instances before Running
        1. Use Task manager, powershell (stop-process -processname chrome) or cmd (killall chrome)
    5. References
      1. http://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code
  6. References
    1. https://dzone.com/articles/completing-the-angular-2-quick-start-in-vs-code-1

VIII. Technique: Tools

  1. Git Setup
  2. Node Tools
    1. Install node and NPM
  3. Task Runner
    1. Type "configure" to "configure task runner" and this will create tasks.json
    2. Ctrl-Shift-B runs build task

Images: Related links to external sites (from Bing)

These images are a random sampling from a Bing search on the term "Visual Studio Code." Click on the image (or right click) to open the source website in a new browser window. Search Bing for all related images

Related Studies

Related Topics in Medical Informatics

advertisement