Visual Studio Code

Visual Studio Code, or VS Code, is the recommended editor to use for this course. Using VS Code, you can use the Live Server Extension which allows you to easily view the current state of your web pages.

We strongly advise that you and your lab partner meet at one computer to work on the assignments and project. However if this is not possible, the Live Share Extension allows you to share your editor workspace with your lab partner and simultaneusly edit the same files. The local HTTP server that Live Server runs can also be shared using Live Share making remote collaboration easier.

Read below about how to use Live Server and Live Share.

Starting VS Code in the LiU Linux environment

To start VS 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: a brief overview

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.

You can install extensions on both the LiU Linux environment (extensions are installed separately for each user in that user’s home directory) and on your own computer if you choose to run VSCode there. You can download VSCode for your own computer from the official website:

• Download Visual Studio Code

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.

A brief overview of some important aspects of VSCode follows below.

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

Sidebars

• Use the Explore sidebar to navigate open files and directories 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.

Workspace

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

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

Visual Studio Code Extensions

We advise 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. You can read more about it here: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

For remote collaboration using VSCode on your own computer, you can use the Live Share extension. Despite the similar name, Live Share is a different extension than Live Server and provides completely different functionality:

• Live Share: Lets you host and join editing sessions, allowing you to share your workspace, terminal sessions and local servers with other people. You can read more about it here: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

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 and VS Code should automatically open your default web browser to the correct URL or popup a message with a link to the correct URL.

Live Server with Live Share

(Read below for general instructions on Live Share.)

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

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 directory (added that directory 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.

Connect to LiU’s Linux environment through VS Code on your own computer

You can run VS Code on your own computer but be connected through VS Code to LiU’s Linux environment. This way you will have access to all files you normally have access to when you are in a computer lab or using ThinLinc. This usually runs much smoother than using a remote desktop solution like ThinLinc. You can also open a terminal in VS Code (menu option View → Terminal) to run any commands.

In order to connect to LiU’s Linux environment through VSCode you must first connect to LiU’s VPN if you are not on campus (and sometimes even if you are on campus).

Preparations

• If you are using any other operating system than macOS or Windows 11 on your own computer, you might need to install an OpenSSH-compatible ssh client. You will notice this when following the steps below. Check here for instructions if needed.
• Install VS Code on your own computer if you have not already done so (see above).
• Connect to LiU’s VPN if you are not on campus and connected to Eduroam.

When you are connected, you can work with the connected VSCode window in exactly the same way as if you were sitting in a computer lab on campus.

For example, if you try to open a file or directory, you will see that the navigation starts in your home directory on LiU, not in any local directory on your own computer. NOTE: If you open a file or directory via File → Open…, you may need to enter your password again. You can also open a terminal on LiU’s system through the menu option View → Terminal.