vscode for Ubuntu

What is vscode

vscode is short for Visual Studio Code. It is a strong code editor that is open-source developed via Microsoft. Visual Studio Code contains built-in support for debugging, snippets, code refactoring, integrated terminal, code completion, syntax highlighting, and embedded Git control. Vscode is cross-platform and available on macOS, Linux, and Windows.

We can install vscode as the deb package using Microsoft repositories or snap package using the Snapcraft store. Also, we can select the method of installation that is most convenient for our environment.

The recommended and easiest way for installing vscode On Ubuntu systems is to set up the repository of vscode and install the package of vscode using the command-line or terminal.

• The cross-platform feature of the Visual Studio Code is a major part of its claim as developers do not need to change tools or study new UIs if swapping platforms.
• All features of vscode are virtually available to every user, regardless of the features of their operating system like integrated terminal, embedded Git control, intelligent auto-completion, syntax highlighting and debugging.
• Also, the editor includes the great support of languages like Node.js, TypeScript, and JavaScript.
• A rich collection of extensions is also available for other types of languages such as Go, PHP, Python, Java, C#, and C++, and runtimes such as Unity and .Net.

Visual Studio Code incorporates the power and simplicity of a classic code editor that supports a debugging experience and integrated navigation lacking the requirements of a fully featured Integrated Development Environment (or IDE) like the famous Visual Studio IDE. Vscode is established on the architecture that offers excellent code analysis support of our C# code.

The vision of Microsoft with vscode is to give a cross-platform, fast, and simple code editor for creating cloud and web applications. Vscode has every standard feature we would want a contemporary code editor (refactoring, code navigation, code assistance, etc.) to have with the best support for TypeScript, Node.js, and ASP.Net.

Brief History of vscode

First, vscode was introduced by Microsoft on 29 April 2015 at the 2015 Build conference. Shortly, a preview build was published thereafter. On 18 November 2015, the source of vscode was published upon the MIT license and is present on GitHub. Also, extension support was introduced.

On 14 April 2016, vscode graduated with the public preview phase and was published on the web. While the Microsoft releases are proprietary freeware, Microsoft has published most source code of Visual Studio Code on GitHub upon the MIT license.

Features of vscode

vscode is an editor of source code that uses a range of programming languages, such as Rust, Python, Node.js, JavaScript, Java, Go, Fortran, C++, C#, and C. It is Electron framework-based, which is used for developing the web applications of Node.js that execute on the Blink layout engine.

• Vscode employs a similar editor component used inside Azure DevOps (known as Visual Studio Code Team Services and Visual Studio Code Online formerly).
• Visual Studio Code contains common support for almost every basic programming language out of the box. This common support has configurable snippets, code folding, bracket matching, and syntax highlighting.
• Also, Visual Studio Code can ship with IntelliSense for HTML, CSS, JSON, TypeScript, and JavaScript, as well as support for debugging for Node.js.
• Additional language support can be given by free extensions on the Visual Studio Code Marketplace.
• Rather than a project system, it permits users to launch one or multiple directories, which can be saved workspaces for further reuse. It permits it to work as a language-agnostic code editor for all languages. It supports several programming languages and a group of aspects that varies per language.
• Undesirable folders and files can be eliminated from the project tree using the settings.
• Various features of Visual Studio Code are not disclosed on the user interface or menus but can be utilized by the command palette.
• Vscode can be developed by extensions, which are available from a central repository.
• It contains language support and editor additions.
• An important feature is the capability to make extensions which include support for many new languages, time travel debuggers, debuggers, themes, include code linters with the Language Server Protocol, and implement static code analysis.
• A built-in aspect, i.e., Source Control, is also available in Visual Studio Code.
• It includes an embedded tab in the menu bar in which users can use version control settings and see modifications made to the current project.
• Vscode must be connected to a supported version control system (Perforce, Subversion, Apache, Git, etc.) to use this aspect. It permits users to establish repositories as well as to establish pull and push requests directly through Visual Studio Code.
• For FTP, Visual Studio Code has two or more extensions, permitting the application to be accessed as a free substitute for web development.
• The code can be synchronized between the server and the editor without downloading additional software.

Vscode permits users to configure the code page where the running document is stored, the newline character, and the running document's programming language. It permits it to be used in any environment, for any provided programming language, and in any locale.

Vscode gathers usage data and transfers it to Microsoft. However, it can be deactivated. The telemetry code is reachable to the public, who can view what is gathered because of the open-source type of the application.

UI of Vscode

Visual Studio Code is a powerful and rich code editor that supports the development of ASP.Net 5 with the C# language. Also, it supports developing applications with JavaScript and TypeScript using Node.js. Most essentially, vscode can seamlessly coordinate with code repositories and package managers.

Remember that vscode is based on folders and files. We can open a folder or file that contains project or code files. Visual Studio Code offers an intuitive user interface. UI is basically composed of the following:

• Sidebar: It includes Explorer, which we can use to launch and manage folders and files.
• Statusbar: It offers us information on the projects and the code files that are open.
• Viewbar: We can use it to swap between views.
• Editor: It is the original code editor in which we can open and alter our code files.

Side by Side Editing support is one of the most important aspects of Visual Studio Code. We can side by side open up to three different editors. Also, we can reposition, reorder, and resize the editors if required.

Explorer Window in Vscode

In Visual Studio Code, the Explorer Window opens and manages the folders and files. We can save modifications we made inside the editor with the Ctrl+S key combinations. Also, we can turn on Auto Save, in which case the modifications we make would be saved on the disk automatically. We can also turn on the Auto Save option using the Ctrl+Shift+P key combinations.

Also, Visual Studio code allows us to find text in folders or files. We can also eliminate one or multiple folders in our search. We need to press the key combinations Ctrl+Shift+F to invoke the search process.

Another important aspect is File Navigation offered by the Explorer Window in Vscode. We can easily navigate across or in files. We can view the files list that has been launched by using the key combinations Ctrl+Tab. If we would wish to launch a file using its name, we can use the key combination Ctrl+E.

Latest Update of Vscode

The latest version of vscode is 1.78, which was published in April 2023. In this version, various updates are available.

Accessibility

• Improved and regulated Quick Pick background: Accessibility mode users experienced distinct behavior previously when operating with the Command Palette and several Quick Picks. The first product of the Quick Pick was not chosen to be completely accessible in accessibility mode.
  A new behavior has been introduced that permits us to access both features: a fast and accessible Quick Pick workflow permits us to hit the Enter button right away.
• Aria verbosity settings: The users of a screen reader can eliminate hints from the aria-label to reduce redundancy by the "accessibility.verbosity.terminal" and "accessibility.verbosity.diff-editor"
• Diff audio cue enhancements: Now, vscode caches many audio cues, so they just once need to be loaded, have developed the tones utilized for the diff editor, and return better responsiveness.
• Go to Column/Line announcement: Now, the screen reader reads the related line content when the Go to Column/Line option is invoked.

Workbench

• Default New Color Themes: New 'Light Modern' and 'Dark Modern' themes substitute 'Light+' and 'Dark+' as the default new light and dark color themes.
• Glyph margin design rendering enhancements: The decoration rendering has been improved that occurs inside the editor margin. Several debugging-related designs, including stack frame pointers and breakpoints, will always deliver next to the line number of the editor. It permits us to see our breakpoints even when there are many decorations on a similar line, including bookmarks or test decorations.
• Profile templates: Quickly, profiles allow us to switch our editor extensions, UI layout, and settings depending on our current task or project. Profile Templates are shipped to help us in getting started with profiles, which are profiles for distinct programming scenarios and languages. We can apply a profile template as it is or as a beginning point to personalize further for our workflows.
• Copy images using the image preview: Now, we can copy images using the image preview (built-in). This copied data image can be pasted into Visual Studio Code or other applications.

A few of the other key features are listed below:

• Accessibility improvements: New audio cues and supports improved screen reader.
• New color themes: Default dark and light modern color themes.
• Drag & drop selector: Select how we would like product links arranged in the editor.
• Profile templates: Templates (built-in) for Data Science, Java, Python, and more.
• Source Control Input Quick Fixes: Resolve spelling and other mistakes within the input box.
• Color picker: Insert and change color formats.
• Markdown drag & drop videos: Include video tags easily in Markdown files.
• Insert images: Select between an image attachment, path, and link.
• VS Code and Git LFS for the web: For repos, use vscode.dev using Git Large File Storage.

In this article, we will show two ways to install vscode in the 20.04 version of Ubuntu.

Install vscode (using Snap package)

Microsoft gives an official vscode Snap package on the Snapcraft store of Canonical. Snap is software packages (self-contained) that contain the binary dependency required to execute the application. Every snap package is secure and easy to upgrade. We can install these Snap packages with the help of the command-line or Ubuntu Software application.

We need to open the application, i.e., Ubuntu Software and, find "Visual Studio Code" with the name to install vscode using the Ubuntu Software application. If we are alternatively more familiar with the command-line, then we can use the terminal and execute the following command:

That's all we need to implement for getting vscode installed on our system. No worries about future updates as there are newer versions of vscode that are downloaded and installed automatically inside the background as we use our computer.

Install vscode (deb package)

Microsoft manages an apt repository for the user of Linux for installing vscode using this repository. We can add the apt repository of the vscode by hand with the terminal or command line. However, a faster way for getting it fixed up on our computer is to download and install the Visual Studio Code Linux package using the website of the application. As a part of the process of installation, the apt repository will get added to the Software Sources list.

We need to go to our folder of Downloads (or the location we selected for saving the installer) when the downloading process is complete and then double-click over the .deb file. The Ubuntu Software would open. After that, press the "install" button.

We can update the package of Visual Studio Code (with other updates we have) with the Software updater tool of Ubuntu when a newer version is published.

Install vscode (Flatpak)

If we have Flatpak (or Flathub) fixed up on our system, then we can install the package of the Visual Studio Code using Flathub. Ubuntu doesn't support Flatpak. We will have to install the package, i.e., gnome-software as well for GUI installation.

Note: The Flatpak of the Visual Studio Code is not managed by Microsoft.

Visual Studio Code (Open)

To open Visual Studio Code on the Ubuntu system, we need to just press on the icon, i.e., 'Applications' at the Ubuntu Dock base (or press the super key). Within the search bar begin to enter "Visual Studio Code", then press the icon to open the application at the time the icon of the app appears.

We need to just execute code for opening the app using the command line.

Then, we are free to install the extensions of Visual Studio Code, customize the user interface, and enjoying the huge set of features provided. For enabling the mode, i.e., 'dual pane', we need to press the "[|]" icon which is close to the tab bar.