Graduate Program KB

How to Become a VS Code Master

What is Visual Studio Code

  • An open source code editor created by Microsoft in 2015

The Basics

  • First we can open a folder in a workspace ctrl+k ctrl+o
    • A workspace is the collection of one or more folders that are opened in a vs code window instance

Lets take a quick tour around

  • On the far left is the Activity Bar

    • File Explorer: To see your files and folders
    • Magnifying glass: To search find and replace text across your whole workspace
    • Source control To track changes with git and github
    • Run and debug: To execute code and debug it using breakpoints
    • Extensions: Search the marketplace

  • The command pallette (Ctrl+Shift+P): TThe control center for all commands in VS Code

Editing Basics and Shortcuts

File Explorer

  • Side bar is split into multiple different sections
  • First section: Shows root folder, sub folders and accompanying files
  • Second section (outline): Uses symbols to represent an outline of the code. Outline provides an easy way of seeing your code structure at a glance. Icons Table
  • Third section (Timeline): Shows a diff between the current file a a point in time the file was saved. This can be very useful for short changes that you want to revert, or if you want to see a previous implementation. Git commits depeing on how frequently you commit keep a history of what has changed at a major level. Timeline can be thought of in a similar way at a minor scale.

Basic Navigation

  • Go to the Declaration F12 or Ctrl+Click
  • Go to Symbol Ctrl+Shift+O
  • Go to line: Ctrl+G

Editing

  • Cut, Copy, Paste = Ctrl+X, Ctrl+C, Ctrl+V
  • Duplicate a line: Shift+Alt+(Down or Up Arrow) Note: Linux must use numpad
  • Delete line: Ctrl+Shift+K
  • Move a line up or down: Alt+(Up or Down Arrow)

Comments

  • Toggle Line: Ctrl+/
  • Toggle block comment: Shift+Alt+A

Multi Line Cursor

  • Create a new cursor (mouse): Mouse+Alt
  • Create multi cursor above or below: Ctrl+Shift(Up or Down Arrow)
  • Select all words that match your selection: Ctrl+Shift+L

Find and Replace

  • Find: Ctrl+F
  • Replace: Ctrl+H
  • Find next F3

Folding

  • Fold All: Ctrl+K Ctrl+0
  • Unfold All: Ctrl+K Ctrl+J
  • Fold region and unfold: Ctrl+Shift+(square brace)

Open Terminal: Ctrl+`

  • To open the search tab use Ctrl+Shift+F
  • You have the ability to search and replace all across your code base using this feature. This can be very dangerous so be careful when using the replace here.
  • The Search activity lets you preview your replace, shows all files effected and gives you the ability to replace or dismiss the replace on any result

Extensions

  • Two products that get confused

    • Visual Studio: An Integrated Development Enviroment (IDE)
    • VS code: A code or text editor

  • This is because Visual Studio come with built in support for editors, compilers, interpreters and many other features, whereas vs code does not

  • The only way to get these features in VS Code is through the use of extensions to download packages that provide specilized tooling

  • However, that said VS Code with manually configured extensions and its built in basic code editing features, can act as a light weight alternative that is more than enough for developing software

Code Snippets

  • These are templates you can use to reduce typing out boilerplate code

  • VS Code has built in snippets for many common structures

  • Some of the most useful snippets

    • Console: log, warn, error
    • Conditionals: if, ifelse, switch
    • Loops: for, foreach, forin, fof while, dowhile
    • Function: func

  • Note: To jump between placeholders you can use Tab

  • How to create custom snippets

  • A snippet can be scoped globally to a language or scoped to a project / workspace

  • Custom Snippet Features

    • Name
    • Scope: The languages this snippet applies to
    • Prefix: How to find the snippet, this can be an array of strings
    • Body: This is the template structure
    • Description: optionally for intellisense to display
"For Loop": {
	"prefix": ["for", "for-const"],
	"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
	"description": "A for loop."
}

{
	"Welcome Message": {
		"scope": "javascript,typescript",
		"prefix": ["_w", "_welcome", "_wlc"],
		"body": [
			"console.log('Hello\t${1:name}');",
			"console.log('Welcome to the ${2:year} Grad Program!!!!')",
			"$0",
		],
		"description": "Welcome Message"
	},
	
}

Dev Containers

  • The Dev Containers extension lets you use a docker container as a development enviroment in VS code

  • Prerequsites: Docker installed and you are part of the docker group, the extension

  • To open an existing folder in a container

    1. Run the command: dev container: Open folder in container
    2. Either select a base dev container template or use an existing Docker or Docker compose file
    3. VS Code automatically adds the dev container configuration files to your project
    4. Window will reopen in the dev container

  • To exit a dev container simply reopen folder locally using the command palette

  • Editing the devcontainer.json

References / Resources