Visual Studio Code is a powerful IDE for web developers that resembles the functionality of Visual Studio in a lightweight interface. As it is quite long into the market, Microsoft recently releases Visual Studio Code version 1.62 (aka. Visual Studio Code October 2021 Update).

 

If you are using Visual Studio Code (VSCode) in your development environment to build web/cloud applications, you would like to learn about the features and improvements that it brought with the latest update. Here are the complete (official) release notes.

 

Visual Studio Code 1.62 (October 2021 Update) is now available

 

What's new and improved in Visual Studio Code 1.62

Workbench

Settings editor accessibility

We made various Settings editor accessibility improvements:

  • The Settings editor scrolls back to the top after performing a search, so the user does not end up midway through the search results after each search.
  • The settings scope switcher is accessible via keyboard.
  • Deprecated setting text blocks display an icon. Previously, the deprecated text was distinguished from the rest of the setting text only by color.
  • More UI elements within the Settings editor have the setting ID as their name.

Updated search icons

The search icons are now the same weight and the match whole word icon was updated to be more distinguishable from the rest.

Example of the updated search icons

Parameter hint highlight

VS Code now highlights the current parameter in the parameter hint and the color can be themed via editorHoverWidget.highlightForeground.

Example of a parameter hint with a highlighted word

Editor

Improved bracket pair guides

We continued iterating on bracket pair guides. Horizontal lines now outline the scope of a bracket pair. Also, vertical lines now depend on the indentation of the code that is surrounded by the bracket pair.

Bracket pair horizontal lines moving with text indentation

Bracket pair guides can be enabled by setting editor.guides.bracketPairs to true (defaults to false). We added a third option "active" to only show a bracket pair guide for the active bracket pair.

The new setting editor.guides.bracketPairsHorizontal controls if and when to render horizontal guides (defaults to active).

New themable colors editorBracketPairGuide.background{1,...,6} and editorBracketPairGuide.activeBackground{1,...,6} can be used to customize the color of bracket pair guides.

Customizable bracket pairs

You can now configure bracket pairs for a specific programming language through settings. editor.language.bracketPairs can be used to configure which bracket characters should be matched. If set, editor.language.colorizedBracketPairs independently configures which bracket pairs are colorized when bracket pair colorization or bracket pair guides are enabled.

"[javascript]": {
        "editor.language.bracketPairs": [
            ["[", "]"],
            ["(", ")"]
        ],
        "editor.language.colorizedBracketPairs": [
            ["[", "]"]
        ]
    },

Display hovers above or below the current line

You can now choose between displaying IntelliSense hovers above (default) or below the current line. By setting editor.hover.above to false, hovers will render below the current line.

IntelliSense hover below the current line in the editor

Unicode directional formatting characters

To address CVE-2021-42574, VS Code now renders Unicode directional formatting characters by default. Consider the following text snippet:


    //              from, to, ammount
transferBalance(5678,‮6776,4321‬,"USD");

The above text snippet contains two explicit directional formatting characters, U+202E (RIGHT-TO-LEFT OVERRIDE) and U+202C (POP DIRECTIONAL FORMATTING). These characters can influence Unicode's Bidirectional Algorithm and could be used to craft source code that renders differently than what compilers would execute.

Unicode directional formatting characters are rendered

The special rendering of these directional formatting characters can be turned off by setting editor.renderControlCharacters to false. The setting editor.renderControlCharacters is now true by default.

Extensions

Verified extension publishers

VS Code now shows if the domains of an extension publisher are verified by the Visual Studio Marketplace.

Verified extension publisher indicators in the Extensions view and details pane

Theme: GitHub Light Theme

If you are an extension author, more details about how to become a verified publisher can be found in the Publishing Extensions topic.

Terminal

New default keybindings for special characters

The following keybindings were added that are typically supported in other terminals:

  • ctrl+shift+2: Inputs the null character (0x00).
  • ctrl+shift+6: Inputs the record separator character (0x1E).
  • ctrl+/: Inputs the unit separator character (0x1F).

Languages

Configure how HTML completes attributes

There is a new setting html.completion.attributeDefaultValue that lets you choose how values are filled in when an HTML attribute is completed:

  • doublequotes: The value is placed in double quotes (default)
  • singlequotes: The value is placed in single quotes
  • empty: The value is left empty

HTML value completion showing double quotes, single quotes, and left empty

Emmet improvements

The new Emmet: Update Tag command (editor.emmet.action.updateTag) updates the placeholder with the HTML tag to be updated.

Emmet update tag command with placeholder

The extension also activates now when one tries to run any Emmet command. This change should fix an issue where some commands were not found when run from the Command Palette, while also keeping the activation event list more precise so that Emmet does not start up unnecessarily, such as in an empty workspace.

For multi-root workspaces, Emmet now sources snippets from all workspace folders, rather than just the first one. As a result, custom snippets from all workspace folders will be suggested when editing an applicable file in the workspace.

Notebooks

Find and Replace supports capturing groups

The Find and Replace widget in the notebook editor now supports regular expression capturing groups.

In the short video below, replace uses the first (and only) captured text ('a').

Find and Replace with capturing groups support

Better selection of output renderers and mimetypes

Notebook cells can output multiple types of data (mimetypes) that can be rendered in different ways both by VS Code itself and extensions. Previously, VS Code had basic memoization (caching) of the selected renderer for a mimetype, and you could manually configure your preferred mimetypes using the notebook.displayOrder setting. However, VS Code wasn't particularly smart about picking the best renderer for a mimetype, and preferred mimetypes had to be updated manually.

Now, preferred renderers are cached on a per-notebook type, level in the workspace. Additionally, if you switch to view a different mimetype, that preference will be updated in-memory for the VS Code session, and you can use the Notebook: Save Mimetype Display Order command to easily update the notebook.displayOrder setting to the working preference.

Contributions to extensions

Jupyter

Kernels

In order to make it easier to identify kernels, the Jupyter extension now groups kernels in the kernel picker.

Kernels grouped in kernel picker

You can now filter the list of kernels displayed in the kernel picker, either globally or on a workspace basis. This is helpful if you have a large number of kernels installed but usually only work with a subset.

To manage the list of kernels displayed, you can use the command Jupyter: Filter Kernels from the Command Palette.

Kernel filtering via the Filter Kernels command dropdown check boxes

Interactive Window

Automatic cell creation when running the last cells in an Interactive Window using Shift+Enter can now be configured via the setting jupyter.newCellOnRunLast. If you don't want the default behavior to add a new cell, you can set jupyter.netCellOnRunLast to false.

ESLint

A new version of the ESLint extension has shipped. Major improvements are:

  • Extended support for ESLint version 8.x.
  • The ability to define the rule set that is applied during code action on save and format via the setting eslint.codeActionsOnSave.rules.

GitHub Pull Requests and Issues

Work continues on the GitHub Pull Requests and Issues extension, which allows you to work on, create, and manage pull requests and issues. Check out the changelog for the 0.32.0 release of the extension to see the highlights.

Remote Development

Work continues on the Remote Development extensions, which allow you to use a container, remote machine, or the Windows Subsystem for Linux (WSL) as a full-featured development environment.

Feature highlights in 1.62 include:

  • New setting remote.SSH.foldersSortOrder to sort SSH targets alphabetically or by recent use.
  • Windows Subsystem for Linux indicator lets you quickly know whether you are using WSL 1 or WSL 2.
  • Advanced container configuration videos covering how to persist bash history and work with monorepos.

You can learn about new extension features and bug fixes in the Remote Development release notes.

Preview features

TypeScript 4.5 support

This update adds support for the upcoming TypeScript 4.5 release. The TypeScript 4.5 beta announcement post has more information about the new language and tooling features. Some tooling highlights:

To start using the TypeScript 4.5 nightly builds, install the TypeScript Nightly extension.

Please share your feedback and let us know if you run into any bugs with TypeScript 4.5.

Extension authoring

Emoji support in file decorations

The file decorations API now supports emojis as badge texts.

Files decorated with emojis in the File Explorer

MarkdownString.supportHtml

The new supportHtml property on MarkdownString enables rendering of a safe subset of raw HTML that appears inside the Markdown text.

The supportHtml property defaults to false. When disabled, VS Code will strip out any raw HTML tags that appear in the Markdown text.

Engineering

File watching changes

File watching in VS Code changed to a new library, thanks to the work of the Parcel team with their @parcel/watcher. We will gradually roll out this change to all users in the upcoming weeks. Linux users will be happy to learn that the files.watcherExclude now applies natively so that the number of file handles VS Code needs open for file watching can be greatly reduced.

The existing files.legacyWatcher setting was changed to an enumeration with these values:

  • on - The new file watcher will never be used.
  • off - The new file watcher will always be used.
  • default - The new file watcher will only be used when you open multi-root workspaces (via a .code-workspace file).

You should not notice any difference in your day to day work, but if file watching is broken for you, please report an issue.

Progress for Electron sandbox support

As we continue to make the VS Code workbench ready for enabling Electron's sandbox, we made progress on moving Node.js file services out of the workbench window into a different process. The same is true for the file watcher that no longer forks from the workbench window, but from a background process. This change is enabled by default in VS Code Insiders and will be the default in Stable for our November release.

Notable fixes

  • 73061: Enumerable properties mixed with regular properties
  • 130868: Emmet suggestions list missing entries after adding custom snippets.json
  • 131966: Emmet unable to expand abbreviation with onclick attribute
  • 135110: Support different border settings for vertical or horizontal layouts, for in-group editor splitting

 

Have a question? Or, a comment? Let's Discuss it below...

dhgate

Thank you for visiting our website!

We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.

We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.