Visual Studio Code

Visual Studio Code is the recommended editor to use for this course. Visual Studio Code (will be shortened to VSCode henceforth) is a free text editor available for Windows, macOS and Linux. The editor functionality can be exteneded with plugins from within VSCode.

Download Visual Studio Code here.

VSCode: A brief overview

VSCode has a lot of features so you are encouraged to explore and read up on using the editor as this can increase your productivity and make your editing experience better.

Here is a brief overview of some important aspects of VSCode.

The command palette

The command palette first made its appearance in the text editor Sublime Text and has since then made it into the other text editors (e.g. VSCode and Atom). Press Cmd/Ctrl+ Shift + P to bring up the command palette. Here you can type and filter through all availavle commands. The command palette is actually one of the "modes" the palette can have. See below:

• Cmd/Ctrl + Shift + P: Command palette. Type to find commands.
• Cmd/Ctrl + P: Quick open, Go to file. Type to find files.
  • type :followed by a line number to jump to that line.
  • type @ followed by e.g. a function name or other symbol to jump to that symbol in the current file.

Sidebars

• Use the Explore sidebar to navigate open files and folderas added to the workspace.
• Use the Extensions sidebar to find extensions, install and uppgrade them.

Workspace

You can open one or more folders and add them to the Workspace in VSCode from the Explore sidebar. Opening a folder adds it to the workspace and lets you easily navigate between files in that folder.

Recommended extensions: Live Server

We recommend that you install the following extension for VSCode:

• Live Server: Runs an HTTP-server on your local machine with live reload functionality that tells the browser to automatically refresh whenever you save a document. This basically means that you will not have to repeatedly reload the website manually.

Install extentions by going to the Extensions sidebar and search for them.

# Visual Studio Code Visual Studio Code is the recommended editor to use for this course. Visual Studio Code (will be shortened to VSCode henceforth) is a free text editor available for Windows, macOS and Linux. The editor functionality can be exteneded with plugins from within VSCode. Download Visual Studio Code [here](https://code.visualstudio.com/). ## VSCode: A brief overview VSCode has a lot of features so you are encouraged to explore and read up on using the editor as this can increase your productivity and make your editing experience better. Here is a brief overview of some important aspects of VSCode. ### The command palette The command palette first made its appearance in the text editor *Sublime Text* and has since then made it into the other text editors (e.g. VSCode and Atom). Press `Cmd`/`Ctrl`+ `Shift` + `P` to bring up the command palette. Here you can type and filter through all availavle commands. The command palette is actually one of the "modes" the palette can have. See below: - `Cmd`/`Ctrl` + `Shift` + `P`: Command palette. Type to find commands. - `Cmd`/`Ctrl` + `P`: Quick open, Go to file. Type to find files. - type `:`followed by a line number to jump to that line. - type `@` followed by e.g. a function name or other symbol to jump to that symbol in the current file. ### Sidebars - Use the *Explore* sidebar to navigate open files and folderas added to the workspace. - Use the *Extensions* sidebar to find extensions, install and uppgrade them.  ### Workspace You can open one or more folders and add them to the *Workspace* in VSCode from the *Explore* sidebar. Opening a folder adds it to the workspace and lets you easily navigate between files in that folder. ## Recommended extensions: Live Server We recommend that you install the following extension for VSCode: - Live Server: Runs an HTTP-server on your local machine with live reload functionality that tells the browser to automatically refresh whenever you save a document. This basically means that you will not have to repeatedly reload the website manually. Install extentions by going to the *Extensions* sidebar and search for them.