Skip to content
729G87 - Interaction Programming
GitLab

Visual Studio Code

Visual Studio Code is the recommended editor to use for this course. Using Visual Studio Code, you can use the Live Share Extension to share your editor workspace and simultaneusly edit the same files. The Live Server Extension allows you to easily view your results. The running local HTTP server can also be shared using Live Share making remote collaboration easier.

Information about using Live Share can be found below.

Starting Visual Studio Code in the LiU Linux environment

To start Visual Studio Code in the Linux environment, type code in a terminal window. Before this command works, you have to type in the following to lines in a terminal window once.

$ module add prog/vscode
$ module initadd prog/vscode

(Do not type in the $ characters, they represent the shell prompt.)

Visual Studio Code

Visual Studio Code (will be shortened to VSCode henceforth) is a free text editor available for Windows, macOS and Linux. Editor functionality can be extended using which can be installed from within the program.

Visual Studio Code: a brief overview

VSCode has a lot of features so your 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 other text editors (e.g. VSCode and Atom). Press Cmd/Ctrl+Shift+P (Cmd on a Mac, Ctrl on Windows/Linux) to bring up the command palette. Here you can type and filter through all available commands. The command palette is actually one of the “modes” of 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
  • Use the Explore sidebar to navigate open files and folders added to the Workspace (see below)
  • Use the Extensions sidebar to find extensions, install and upgrade them.
  • Use the Live Share sidebar (available after installing the Live Share extension) to host or join a session.
The extensions sidebar in Visual Studio Code

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.

The workspace is also important when you use Live Share as you cannot share single files, only workspaces.

Visual Studio Code Extensions

We recommend that you install the following extension for VSCode:

  • Live Server: Runs a sharable HTTP-server on your local machine with live reload functionality that tells the browser to automatically refresh whenever you save a document.

For remote collaboration using VSCode on your own computer, you can use the follwoing extension:

  • Live Share: Lets you host and join editing sessions, allowing you to share your workspace, terminalsessions and local servers with other people.

Install the extension by going to the extensions sidebar and searching for them.

Using Live Server

After installing Live Server, press the Go Live button in the status bar. This will start the local web server on port 5500.

If you are already hosting a Live Share or when you start a Live Share session, you will get a notification allowing you to share your locally running web server with your collaborators.

If you do not get the sharing notification, go do the Live Share tab (the icon in the left sidebar that looks like an arrow and a circle underneath) and check if the Live Server is being shared (listed under Shared Servers). If it is, you can hover over the name Live Server and click on the clipboard icon that appears to get a link to share.

If it is not listed as a shared server, you can add it. Type in the port 5500 when you are asked for it. Then follow the instructions in above paragraph to get a link to share.

Using Live Server, your web browser will reload the page whenever a change is saved in your editor.

Using Live Share {#liveshare}

To use Live Share, you need to:

  1. Sign in
  2. Host or join a session

Signing in

After installing Live Share, log in by pressing Cmd/Ctrl+Shift+P, then typing “sign” then selecting “Sign in with browser”. Then choose “Sign in with Microsoft” to sign in with your LiU-ID.

Host or join a session

Before you host a Live Share session, make sure you have opened a folder (added that folder to your workspace), since you cannot share single files, only workspaces.

To host a session, go to the Live Share sidebar and click “Share (Read/Write)“. You will be given a URL which you then can send to whoever you want to join your session.

When you host a session, the files will remain on your computer, but anybody joining the session is able to navigate and edit these files in their own local instance of VSCode.