What’s New in Visual Studio Code?

Are you up to date on VS Code updates? From Getting Started to remote repositories, there is plenty to check out.

The newest version of Visual Studio Code 15.7, released May 2021, has been updated with new features and fixes. The primary goal for the update is to create a more dynamic user experience for VS Code users and make both new and old users feel more comfortable using the code editor.

The significant features that shipped with this release include a new Getting Started experience, workspace trust, remote repositories and so much more. In this article, we’ll introduce and explain some of the features so we understand and know what they entail.

Prerequisites

This article assumes you are already a user of VS Code and have previous experience using it, but if that’s not the case—you can check out and download VS Code.

Let’s go over some of the recently released features, explain them and show how you can start using them.

A New Getting Started Experience

New Getting Started Experience in VS Code

The latest release ships with a new Getting Started experience for onboarding both new and existing users. The Getting Started experience was added to enable both new and existing users to familiarize themselves with the VS Code environment and generally improve the onboarding experience they get from using the tool. They make it seamless for you to get up and running with steps to customize your workspace in this area.

For example, you can choose a default color scheme, add extensions for syntax highlighting and learn how to access everything with shortcuts. This is not all new—it already existed before—but now it has a fresh new look with a progress indicator to show the steps you’ve covered in the setup, and it’s enabled by default for all existing users.

You can also set the default Getting Started screen to always show on startup by setting the workbench.startupEditor to the value gettingStarted. The new value gettingStarted replaces the old default welcome. Other available options include readme, gettingStartedInEmptyWorkbench, newUntitledFile and none.

Workbench Startup Editor

Workspace Trust

This new security feature introduced by VS Code restricts the access we grant to unfamiliar source code. Security is an essential aspect of development, and it cannot be over-emphasized. Time and time again, developers are being attacked with malicious code, especially since the source of such code is unknown.

When you open a new folder in VS Code, you are prompted to choose whether you trust the folder or not. If you decide to trust the code, the code execution works well and other features like debugging and extensions are enabled, and you can fully access all workspace settings.

If you choose to browse the folder in restrictive mode, VS Code will prevent code execution, disable or limit the operation of tasks, debugging, workspace settings and extensions.

Workspace Trust on VS Code

Once the Restricted mode is selected, you’ll see a banner constantly reminding you that it has been enabled.

Restricted Mode Status Banner

With a prompt to manage the setting applied, you can change a folder from restricted mode to trusted if you later decide the code can be trusted. It’s essential to consider that it’s better to go from restricted to trusted instead of the other way around.

To do so, select the manage option on the banner, and you see it’s in restricted mode. You have the opportunity to trust the folder or trust the parent folder, which will apply trust to the parent folder and all subfolders.

Manage Restricted Mode

Workspace Trust provides an extra layer of security when working with unfamiliar code by preventing automatic code execution when a workspace is open in “Restricted Mode.”

Remote Repositories—Open Repo from GitHub

This feature allows you to remotely browse, edit and commit to a GitHub repository directly without downloading or cloning the repo locally. Enabling Remote Repositories on VS Code connects you directly to GitHub.

GitHub Remote Repositories

To enable Remote Repositories, go to the Extensions tab and search for Remote Repositories, or get it from the VS Code marketplace and install.

Once installation is completed, look for a green button in the bottom left of the status bar, or use the Command Palette to search for Open Remote Repository. (Open Command Palette either by going to View -> Command Palette, or using shortcut Command + Shift + P for Mac or Ctrl+ Shift + P on a PC.)

This extension works for fundamentals like making changes to your markdown files or going through the repository and making a small change. To make more advanced changes, click GitHub on the bottom left to clone locally or open using GitHub Codespaces, a cloud-hosted VS Code environment.

Open Remote Repositories with Command Palette

VS Code also supports other source control management (SCM) providers through extensions, and this has allowed a fast and safe way for developers to clone and work with repositories directly within VS Code.

Edge Browser Debugging

With this new feature, the JavaScript debugger integrates with Microsoft Edge Developer Tools to provide a DOM, styling and network inspection for browser debugging. This is accessible via the inspect icon recently added in the VS Code debug toolbar.

Edge Browser Debugging with MS Edge

If you use Microsoft Edge browser for development, you can now also use it for browser debugging. To enable this feature, you can switch to it by replacing "type": "chrome" or "type": "pwa-chrome" with "type": "pwa-msedge" in your launch.json file.

Custom Notebook API Finalized

Another new feature is, instead of using GitHub to manage issues, backlog and planning, GitHub Issues Notebook can be found in the extensions marketplace in Visual Studio Code—all you have to do is search for it and enable it.

Once you download the extension, create a new file called GitHub issues. It allows you to query VS Code repo or any other repo, and you’ll be able to see results in the notebook interface smoothly.

The notebook API allows us to create custom language in the cells and create a custom execution engine. VS Code has finalized most of the notebooks API. It is structured into Notebook Serializer, Notebook Renderer and Notebook Controller.

• The NotebookSerializer API works in combination with the notebooks contribution point to enable VS Code to open, modify and save notebook documents.
• The notebookRenderer contribution point of your extensions package.json file adds notebook renderers that present cell output.
• The NotebookController API generates outputs for code cells.

Terminal Tabs Preview

Terminal tabs introduced in Preview are now enabled by default for all users. The new tabs view will only show by default when there are at least two terminals. For single terminals, the tab is “inlined” into the panel title.

This also introduces terminal statuses such as whether a task is running, succeeded or failed. Some highlights of the new release include the ability to change the color of your tab to enable quick navigation and differentiate between them; you can also drag and drop tabs to rearrange them.

New Terminal Preview

If you don’t like the new update and would like to switch back to the previous drop-down UX, you can set: "terminal.integrated.tabs.enabled": false.

JSDoc @link Support

The new JSDoc @Link feature is supported by JavaScript and TypeScript comments. They allow you to create clickable links to a symbol in your documentation.

JSDoc Link Support within VS Code

The link tags are written as {@link symbolName} and there’s the option to specify text to be rendered in place of the symbol name: {@link class.property Alt text}.

In addition, the VS Code extensibility type declaration file vscode.d.ts can now use @link.

Go to Definition for Non-JS/TS Files

This new feature enables you to navigate through imports with the “Go to Definition” option or with the CMD/CTRL keys. We often use import statements to import assets such as images and stylesheets with modern JavaScript bundlers and frameworks. This feature is especially useful when you need to navigate to files like these.

Go to Definition with Non-JS Files

Wrapping Up

These are all exciting new features to give a try if you haven’t yet. I’m happy to see the updates from the VS Code team and glad they are prioritizing user experience and keen on improving the productivity of developers with the newly released features.