Installing and Configuring Visual Studio Code (VS Code) on Ubuntu

What is VS Code?

Visual Studio Code or VSCode is one among the best open source code editor developed by Microsoft and it can run on Windows, Linux and macOS platforms. The editor can be used for different programming languages such as PHP, Python, JavaScript and Go. VSCode editor provides debugging, syntax highlighting, embedded Git, code completion and many more features. Also you can install and configure different extensions based on your needs.

Installation

To install VS Code first you need to update packages and make sure you have wget, softwares-properties-common and apt-transport-https packages installed. Then you need to add VS Code repository and you can install the editor with sudo apt install code.

Updating the packages:

$ sudo apt update

Installing the missing dependencies:

$ sudo apt install wget software-properties-common apt-transport-https

Importing Microsoft key:

$ sudo wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

Adding and enabling VS Code repository:

$ sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

Then update and install VS Code:

$ sudo apt install code

After installing the VS Code you can open it by clicking Showing Applications menu and type code, the VS Code icon will appear and click to open it. Also you can open the application through the terminal by writing code.

When you open the application you will see this window.

Components

VS Code comes with a minimum number of components which are basic for most development. Some of them are Git which offers support for source code control and for it to work you need to make sure Git is already installed or you can type:

$ sudo apt install git

Another component is NodeJS which offers support for developing and running JavaScript applications.

Feel free to add more extensions according to your needs by clicking on Extensions tab or through keyboard shortcut with Ctrl + Shift + X

User and Workspace Settings

You can configure VS Code according to your preferences. The editor provides two options for settings which are User and Workspace. User settings will be applied globally, and the changes you made will appear every time you open the editor. Workspace settings will be stored on your workspace which you are currently working on.

With VS Code opened you can go to the settings through File -> Preferences -> Settings or using keyboard shortcut by pressing Ctrl + ,

Useful Keyboard Shortcuts

To  be more productive with VS Code you need to use keyboard shortcuts while editing your codes. Below are some of the useful keyboard shortcuts which you can use:

• Ctrl + Shift + P – Listing all available commands depending on your context.
• Ctrl + P – Opening files.
• Ctrl + Shift + M – Going to the errors and warnings present in your codes.
• Ctrl + K M – Switching programming language mode.
• Ctrl + K Ctrl + T – Switching themes.
• Ctrl + K Ctrl + S – Customizing your keyboard shortcuts.
• Ctrl + , – Modifying your settings.
• Ctrl + Shift + X – Opening extensions section.
• Ctrl + ` – Opening terminal.
• Ctrl + B – Toggling sidebar.
• Ctrl + K Z – Opening Zen mode.
• Ctrl + \ – Editing side by side.
• Ctrl + 1 , Ctrl + 2 – Switching between editors.
• Ctrl + Shift + E – Moving to Explorer window.
• Ctrl + click – Creating or opening the file.
• Ctrl + W – Closing the opened folder.
• Ctrl + Shift + Alt + Up or Ctrl + Shift + Alt + Down – Copying line up or down.
• Alt + Up or Alt + Down – Moving line up or down.
• Shift + Alt + Left or Shift + Alt + Right – Shrinking or Expanding the section.
• Ctrl + Shift + O – Going to symbol in a file.
• Ctrl + T – Going to symbol in a workspace.
• Ctrl + G – Navigating to a specific line.
• Ctrl + U – Undo cursor position.
• Ctrl + K Ctrl + X – Trimming trailing whitespaces.
• Ctrl + K Ctrl + F – Formatting selected code section.
• Ctrl + Shift + I – Formatting the whole document.
• Ctrl + Shift + V – Opening markdown preview.
• Ctrl + K V – Side by side markdown edit and preview.
• Ctrl + Space – Triggering suggestions widget.