The Incomplete Jump Start VS Code Tutorial 1

The Incomplete Jump Start VS Code Tutorial for Beginners

Part 1: General

Introduction

This is a tutorial guide for beginners, a jump start to learn VS Code. It is based on an older version of VS Code, to be installed on older machines and software, eg. Mac OS X 10.9 Mavericks and 32bits Linux system.

VS Code (Visual Studio Code) is a lightweight programming editor. VS Code is positioned between a text editor and an IDE (Integrated Development Editor).

VS Code is an open source software developed by Microsoft! Written in TypeScript (JavaScript), available for Windows, Mac, Linux, all the 3 major platforms.

VS Code is getting popular recently (these few years), as an alternative to Eclipse.

Installation

Users can download the latest version from VS Code website https://code.visualstudio.com/Download, or older version from updates.

OS X 10.9 Mavericks

The working version is 1.35.1, it can be downloaded from https://code.visualstudio.com/updates/v1_35, direct link for Mac.

Linux (Debian)

Raspberry Pi Desktop, 32 bits only. Download the 32 bits deb file from here (https://update.code.visualstudio.com/1.35.1/linux-deb-ia32/stable). To install

$ sudo dpkg -i code_1.35.1-nnn_i386.deb

You can load VS Code from RPi > Programming > Visual Studio Code, or from shell command
$ code

Configuration

Disable update

The first thing I do after the download is disable the auto-update. The later or the latest updates doesn't work on my older system. The auto-updates just download and didn't check if the update version works on the system.

Code/File > Preferences > Settings > (search "update mode") > update: mode (v) none

Note: disable internet connection before configure, to prevent auto-update.

General Usage

Command Palette

You may need this command palette to issue commands, eg. restart VS Code. The shortcut is (Cmd/Ctrl+Shift+p). Or from menu, Code > View > Command Palette.

Restart VS Code

Exit the software and relaunch, or use Command Palette: [Developer: Reload Window], to restart the application.

The Layout

Sidebar

On the left side, there is a sidebar with icons. From top down, the icons are Explorer(files), Search, Version control (Git), Debug, Extensions. The bottom is the Manage icon.

Explorer

Beside the sidebar, on the top is the workspace, directory and files.

Files editor

Upper right is (file) content display.

Output

Lower right is output and error messages.

Sidebar

Explorer Icon.To access workspace, folder and files.

Search, this is very common icon.

Source Control, the default is Git.

Extensions. Install extra extensions here.

The bottom left icon is Manage, can access "Command Palette" here.

Working with VS Code

Workspace

The workspace in VS Code is virtual. A workspace is a collection of your working projects, you can add in different project folders into the workspace, save the workspace as a file.

Searching in the workspace goes through all the files in the workspace, even if they are located in different project folders. You can always remove the project folder if you are not working with it.

Create a project

You can try with python, php, C or Java. I am using Java as an examples here. The easiest way for me is to create a project folder from the terminal, and add the project folder in VS Code workspace.

$ mkdir test_java

In VS Code, click on Explorer icon (sidebar), right click on the workspace area, add folder to workspace. Choose the test_java folder.

Create a new file HelloWorld.java under test_java folder, edit the file, and save it:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

Install extension: code runner

Extensions: Search code runner

Install Java Extensions Pack by Red Hat, Java Extensions Pack by Microsoft or just simply use the code runner extension.

Click on Extensions icon (sidebar), search "Code Runner", and install.

After installed, restart VS Code.

1. Normal exit and relaunch VS Code, or
2. Command Palette (Cmd/Ctrl+Shift+p), search [Reload Window].

Right click on the HelloWorld.java, "Run Code". Results will be displayed at output.

Output

Part 1 end. To be continue...