Visual Studio Code for the Web - vscode.dev (Preview):
This iteration, we released a preview of Visual Studio Code for the Web. Visual Studio Code for the Web provides a zero-install experience running entirely?in your?browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes. To get started, go to
https://vscode.dev in your browser.
VS Code for the Web has many of the features of VS Code desktop that you love, including search and syntax highlighting, along with extension support to work on your codebase. In addition to opening repositories, forks, and pull requests from source control providers like GitHub and Azure Repos, you can also work with code that is stored on your local machine.
Not all extensions can run when VS Code is in the browser. Extensions that are purely declarative, such as themes, snippets, or grammars, can run unmodified in the browser. However, extensions that need to run code must be updated by the extension authors. We'd like to say thank you to the extension authors that already have published their extensions as web extensions.
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.
Parameter hint highlight:
VS Code now highlights the current parameter in the parameter hint and the color can be themed via editorHoverWidget.highlightForeground
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 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.
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.
Unicode directional formatting characters:
To address CVE-2021-42574, VS Code now renders Unicode directional formatting characters by default. Consider the following text snippet.
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.
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.
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
Emmet improvements:
The new Emmet: Update Tag command (editor.emmet.action.updateTag) updates the placeholder with the HTML tag to be updated.
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').
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.
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.
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.
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:
Method signature completions.
JSX attribute completions.
More accurate reference counts for the references CodeLens.
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.
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