Visual Studio Code

What is Visual Studio Code

Visual Studio Code is an open source, free text editor created by Microsoft. Visual Studio Code is growing in popularity and already has a large library of extensions and themes. It is available for Windows, macOS and Linux.

Installing Visual Studio Code

Installing Visual Studio Code is as simple as downloading the latest from the website, https://code.visualstudio.com.

Visual Studio Code Website

Configuring Visual Studio Code

A set of predefined settings and extensions has already been created for the Interactive Media and Design program. These settings and extensions will be used using the Settings Sync extension.

The following tutorial will walk you through installing and using Settings Sync to configure your version of Visual Studio Code.

Installing Settings Sync

The easiest way to install the Settings Sync extension is click the link above, and click the "Install" button. When asked if want to allow "Visual Studio Code" to open this page, click "Allow".

Visual Studio Code will launch and open the Settings Sync page. A dialog box will popup asking if you would like to install the 'Settings Sync' extension. Click "Install".

When the Installation is complete, click the "Reload" button. This will force Visual Studio Code to reload the window.

After the window has reload, you may see some alert boxes related to Setting Sync. You can close these alerts by click on the "x" in the top right corner of each alert.

Configuring Settings Sync

The next step is to configure Settings Sync. We will be doing this using the Command Palette. The Command Palette allows you to run commands using only the keyboard. The easiest way to access the Command Palette is to use the keyboard shortcuts: Ctrl+Shift+P (windows) or Cmd+Shift+P (macOS).

Open the Command Palette and type "Sync". Then select the option "Sync: Download Settings" and hit Enter. This should immediately open a browser window to GitHub.

If you are not already signed into GitHub, you will be presented with the Sign In Screen.

Once you are signed in to GitHub or if you were already signed into GitHub, you should see your "Personal access token" page.

In order to use Settings Sync, you will need generate a personal access token. To do this click on the "Generate new token" button. This will take you to the "New personal token" page.

In the "Token description" box, type "code-settings-sync".

Then scroll down until you find the "gist" section under "Select scopes". Check the box.

Then scroll to the bottom of the page and click the "Generate Token" button. This will generate the token and take you back to your "Personal access tokens" page.

On your "Personal access tokens" page you should see you newly create token. IMPORTANT. You must copy your token now! Tokens are never revealed again. You can copy the token by clicking on the clipboard icon.

With your token copied, go back to Visual Studio Code. You should see the Command Palette is still open. In the box, paste your Personal access token and hit Enter.

After hitting enter the Command Palette will ask for a Gist ID. Copy and paste the ID below. Then hit Enter.

e3230434e4f18b565e47e04d2175ffae

Settings Sync will download and install all of the settings, themes, and extensions associated with the IMD Package. You can monitor the progress from the Status Bar at the bottom the Visual Studio Code window.

Once the everything has been downloaded and installed. Open the Command Palette and type "Reload". Select the "Reload Window" option and hit Enter.

After the window has reloaded go to the extensions view and in the search box type "Standard". Find the "JavaScript Standard Style" extension and click the "install" button.

After the extension has been installed, click "Reload" button.

After the window has reloaded, open the Terminal by going to View menu item and selecting "Integrated Terminal".

With the Terminal open, type the following command and hit Enter: npm install -g standard

For macOS Only

You may need to include sudo in front of the command.

sudo npm install -g standard

For macOS Only

After hitting enter you will be prompted for your computer password.

For macOS Only

The cursor will not move as you type your password.

Using Visual Studio Code

Just like any tool, the more you know about it, the better you can utilize it. The following links are documentation and tutorials on how to use Visual Studio Code.