Skip to content
Teoti Graphix

VSCode Notes

Tips

  • Multi cursor selection
  • Column (box) selection
  • The command code . can be run in any directory to open and scope VSCode.
    • GIT Bash can run the command.

Workspaces

A project that consists of one or more root folders, along with all of the Visual Studio Code configurations that belong to that project.

  • settings that should be applied when that project is open
  • recommended extensions for the project (useful when sharing the configuration files with colleagues)
  • project-specific debugging configurations

.code-workspace

A JSON with Comments file that stores all of the configuration data mentioned above, in addition to the location of all root folders belonging to a workspace.

How do I create a .code-workspace file?

Go to menu File → Save Workspace As…

How do I add root folders to a workspace?

Go to menu File → Add Folder to Workspace…

How do I open a workspace that is defined by a .code-workspace file?

Go to menu File → Open Workspace…

Or, double click the .code-workspace file. Visual Studio Code won’t open the actual file. Instead, it will read that file and open the folders that belong to that workspace.

How do I view the actual .code-workspace file?

Go to menu File → Open… and select the target .code-workspace file.

Or, open the workspace associated with that file. Then open the command palette, search for, and select the Workspaces: Open Workspace Configuration File command.

See

Vertical Rulers

{
  "editor.rulers": [20, 40, 60]
}

Main Features

  • Outline View
  • Transform text commands
  • .eslintrc.json - [[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint|ESLint extension]], [[https://eslint.org/docs/user-guide/configuring|ESLint specification]]
  • package.json - Intellisense
  • Emmet syntax - https://code.visualstudio.com/docs/editor/emmet
  • Snippets - File > Preferences > User Snippets
  • Git integration -
  • Git Diffs -
  • Git Views, Review pane, Edit pending changes -
  • Git Branches -
  • Git Staging -
  • Git Stage file changes, Stage selected -
  • Git Undo last commit -
  • See Git output -
  • Git Gutter indicators -
  • Git Resolve merge conflicts -
  • Git Set VS Code as default merge/diff tool
  • Debugging Breakpoints and stepping through -
  • Debugging Data inspection -
  • Debugging Inline values -
  • Debugging Logpoints -
  • Task runner Auto detect tasks -
  • Task runner Run tasks from the Terminal menu -
  • Task Runner Define keyboard shortcuts for tasks -
  • Task Runner Run npm scripts as tasks from the Explorer -
  • Portable mode -

Key Bindings

Main

  • Toggle Sidebar - (Ctrl + B)
  • Toggle Panel - (Ctrl + J)
  • Explorer - (Ctrl + Shift + E)
  • Run - (Ctrl + Shift + D)
  • Search - (Ctrl + Shift + F)
  • Source Control - (Ctrl + Shift + G)
  • Extensions - (Ctrl + Shift + X)
  • Close the currently opened folder - (Ctrl + F4)
  • Switch between editors - (Ctrl + 0..9)
  • Side by side editing - (Ctrl + \)
  • Zen Mode - (Ctrl + K Z)
  • Zen Mode Exit (Esc) Twice
  • Navigate entire history - (Ctrl + Tab)
  • Navigate back (Alt + Left)
  • Navigate forward (Alt + Right)
  • Fast Scrolling - Alt
  • Column Box - (Shift + Alt)
  • Shrink / expand selection - (Shift + Alt + Left) or (Shift + Alt + Right)
  • Go to Symbol in File - (Ctrl + Shift + O)
  • Go to Symbol in Workspace - (Ctrl + T)
  • Navigate to a specific line - (Ctrl + G)
  • Undo cursor position - (Ctrl + U)
  • Trim trailing whitespace - (Ctrl + K) (Ctrl + X)
  • Code folding - (Ctrl + Shift + [) (Ctrl + Shift + ])
  • Fold All - (Ctrl + K) (Ctrl + 0)
  • UnFold All - (Ctrl + K) (Ctrl + J)
  • Select current line - (Ctrl + L)
  • Navigate to beginning and end of file - (Ctrl - Home) (Ctrl + End)
  • Open Markdown preview - (Ctrl + Shift + V)
  • Side by side Markdown edit and preview - (Ctrl + K V)
  • IntelliSense - (Ctrl + Space)
  • Peek - (Alt + F12)
  • Go to Definition - (F12) (Ctrl + LMB)
  • Go Back - (Alt + Left)
  • Go to References - (Shift + F12)
  • Find All References view - (Shift + Alt + F12)
  • Rename Symbol - (F2)
  • Search and modify - (Alt - R)

Run/Debug

  • Run/Debug - (F5)
  • Run Code - (Ctrl + Alt - N)
  • Split Editor - (Ctrl + \)

NPM Tips

Simple Nodejs tutorial - https://code.visualstudio.com/docs/nodejs/nodejs-tutorial

  • npm install
  • npm upate
  • npm outdated

npm update

  • The -g switch installs the Express Generator globally on your machine so you can run it from anywhere.

Expressjs

Web Applications - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

APIs - With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.

Performance - Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.

Frameworks - Many popular frameworks are based on Express.

Links

  • [[https://expressjs.com/|Node JS Express Web Framework]]
    • npm install -g express-generator
    • Scaffold new Web App - express myExpressApp --view pug