Getting started with Visual Studio Code

Getting started with Visual Studio Code
Published: by
Categories
Coding

Visual Studio Code is a free, open-source code editor made by Microsoft. The software is available for download and installation on Windows, Linux and macOS operating systems.

Introduction

Made by Microsoft, Visual Studio Code, or VS Code, has some exciting features and can be extended using community-based extensions.

The software is popularly used by web developers because of its lightweight, but powerful code editor. Its strength lies in its simplicity, with few features but less complex than the others available on the market.

On the Visual Studio Code website, they say that the software “is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE”.

For web developers, Visual Studio Code has built-in support for CSS and SCSS.

Note, as pointed out above, that Visual Studio Code is not the same piece of software as Visual Studio (Visual Studio IDE). Getting started with Visual Studio Code is much easier than with Visual Studio IDE.

Features

As one would expect from a good IDE, Visual Studio Code is rich with practical features. Popular default features include:

  • support for debugging
  • syntax highlighting
  • intelligent code completion
  • snippets
  • Auto text format (Alt + Shift + F)
  • code refactoring
  • multi-cursor selection (Alt click or Ctrl + Alt + and Ctrl + Alt + ↓</kbd) 
  • embedded Git
  • file and directory context menu functionality (right click and open with…)
  • remote connections can be made using appropriate extensions

Syntax highlighting, debugging support and code refactoring make VS Code a good choice for new developers. Code can be debugged straight from the editor.

IntelliSense, or intelligence code completion, goes beyond syntax highlighting and autocomplete. It provides smart completions based on variable types, function definitions, and imported modules.

Multi selections, or multi-cursor selection, enables users to edit or change code faster.

Git support makes it possible to update, maintain and share code right from the editor. Working with Git and other SCM providers has never been easier.

The terminal can be toggle from any directory by pressing Ctrl and ~ keys on the keyboard.

Coding languages

Visual Studio Code supports many programming languages – including HTML, CSS and JavaScript to name but a few. Built-in support also includes TypeScript and Node.js.

VS code top extensions
The Visual Studio Code website has a list of top extensions.

For programming languages that are not supported out-of-the-box, one or more extension are probably available. Visual Studio Code’s rich ecosystem of extensions includes support for languages such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). When working with non-default code, VS Code will prompt to install recommended extensions.

Installing Visual Studio Code on Windows

Visual Studio Code is available for installation on Windows, Linux and macOS operating systems. The version used in the next few steps were 1.52.1 (64-bit).

After downloading and running the appropriate installation file, user permissions need to be granted and the software licence needs to be agreed too.

VS code licence agreement

The next step is to choose the destination directory (folder) where the VS Code files will be installed. The default directory is intended to accommodate for desktop devices that are shared with other users — in which case it will only be available for the user who installed it.

In order to be able to install VS Code in the Program Files directory, the installation file needs to be run as Administrator.

VS Code installation folder

The version installed needed about 250 Mb of hard disk space.

Now that Windows knows where the program files need to be installed, it would want to know whether or where the Start Menu folder needs to be created. This is completely up to you, but the default settings will suffice.

VS Code Start Menu folder

After that, the installer will prompt for additional tasks. Once again, the default settings will suffice, but I like to create a desktop icon and add Open with Code actions to the Windows file and directory menus.

VS Code install additional tasks

After pressing the Install button, the Setup Wizard will conclude and VS Code can be opened.

VS Code installing

The user interface

The first thing you’ll see after opening Visual Studio Code is the user interface (UI) with the Welcome screen in the Editor section. Each UI can be opened in what is referred to as a Window. The user interface is where everything will happen. Prompts and notices can be read and/or dismissed as required.

The Status bar is situated on the bottom of the UI and the Activity bar on the left. At this stage, the Sidebar (usually situated between the status bar and the editor section) will be closed.

 

VS Code default workspace

From here, workspaces, project files and directories (folders) can either be created, imported and/or cloned (using Git commands). Before being able to work with non-default programming languages and/or functionalities, additional extensions need to be installed first.

Installing VS Code extensions

Some coders like setting things up before they start working with projects. For Visual Studio Code, this might mean installing additional extensions.

VS Code installing extensions
VS Code Workspace showing the Extensions sidebar. The extensions icon is located on the left-hand side of the IU at the bottom of the Activity bar.

By selecting the Extensions icon from the Action bar, the Extensions sidebar will open. Here you can toggle between installed and popular (non-installed) extensions.

Desired extensions can be chosen and/or searched for. More information, such as the description, version, number of downloads and star rating can be obtained by clicking on the desired extension.

VS Code extensions info

Extensions are installed/uninstalled by clicking on their respective buttons.

Opening and creating projects

After the required extensions have been installed, new projects can be created or existing projects can be imported. Projects (represented by files and directories) are managed using the Explorer sidebar.

VS Code explorer tab
VS Code Workspace showing the Explorer sidebar. The explorer icon is located on the left-hand side of the IU at the top of the Activity bar.

Creating a new project

To create a new project, a representing directory (folder) needs to be created first. This can be done from VS Code by pressing on the Open Folder button situated in the default explorer area.

Project folders can be created anywhere, as long as they are situated on the local device. The Windows File Explorer can be used to create directories on the fly while selecting them.

After the project directory has been selected, new project files can be created by using the File-menu -> New File, the New file icon next to the opened directory or by pressing Ctrl + N on the keyboard. Files need to be saved (Ctrl + Shift + S) using with their appropriate file extension (e.g. .HTML, .js or .css).

New projects can later be imported again as existing projects. Projects can also be grouped into Workspaces.

Opening an existing project

Previously saved or existing projects can also be imported into the Visual Studio Code Explorer. This can either be done by drag-and-dropping the desired file or project folder onto the Explorer sidebar, by pressing on the Open Folder button situated in the default Explorer sidebar or by using the File-menu -> Open File…/Open Folder…

When a second project folder is opened, VS Code will ask to either create a workspace or to copy the second folder into the first one. If the second option is chosen, the second directory will literally be copied into the first one, even in the Windows file structure.

To be able to work with different projects separately, project folders should rather be opened in separate Windows.

Folders can be removed from the Explorer area by choosing File -> Close Folder. This will not delete the original files.

Creating a Workspace

In Visual Studio Code a Workspace is created when a project consists of one or more root folders, along with all of the configurations settings. These include settings, recommended extensions and project-specific debugging configurations.

As mentioned earlier, VS Code will prompt to create a workspace when a second folder is imported using the Explorer section. After a Workspace has been created it can be saved and opened at a later stage again. The options for working with Workspaces (i.e. Open, Close and Save As…) is situated in the File menu.

Files and folders can be removed from a Workspace by right=-clicking on the folder to be removed and choosing Remove Folder from Workspace from the dropdown menu.

Conclusion

Visual Studio Code is a great piece of software for creating smaller code projects. It is available for all major operating systems and is easy to install and use. Although the basic functionality is limited (which is considered its appeal), it is quite powerful and can be extended using a plethora of extensions.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & discuss

Your comment is important, but don't be a knob. Keep it constructive and polite.

Leave a Reply

Your email address will not be published. Required fields are marked *

More coding related posts