Official announcement｜VS Code 1.59 released! Terminal can move across windows!

Welcome to the July 2021 version of Visual Studio Code. We hope you will enjoy the many updates and improvements in this version, here are some of the highlights:

• Improvements to the extended view-rich extended detailed information hovering, new running status tab page.
• Setting Editor Verification-Quickly find editing errors in object settings.
• Drag and drop terminal-move the terminal across windows to the editor and panel areas.
• Extended theme customization-customize multiple color themes at once.
• Built-in support for Jupyter notebooks-directly open .ipynb files in VS Code.
• Improvements to the notebook UI-display the first row of collapsed cells, undo/redo for each cell.
• Finalization of the test API-native support for running tests using test explorer in VS Code.
• Debug disassembly view preview-Display the disassembled C++ code in VS Code.
• Real-time preview extension-real-time HTML preview in VS Code, supporting JavaScript debugging.
• Remote-container devcontainer CLI-a command line interface for developing containers.

If you want to read these release notes online, please visit the update on code.visualstudio.com.

For more information about VS Code, please visit Microsoft's MS Learn platform: http://aka.ms/vscodelearn

Internal Early Edition: Do you want to experience the new features first? You can download the nightly version of Insiders and try it out as soon as the latest update becomes available.

code.visualstudio.com：

https://code.visualstudio.com/

renew:

https://code.visualstudio.com/updates/v1_58

http://aka.ms/vscodelearn：

https://docs.microsoft.com/zh-cn/users/nathanxue/collections/3jxsyzg0epdj3?WT.mc_id=VSCode_457601

Insiders：

https://code.visualstudio.com/insiders/

Workbench

Extension plug-ins:

Improved the expanded view after resizing. In the animation below, you can see that the expanded view with the default width displays all the detailed information (icons, ratings, and install counts were not previously displayed). When it is reduced, a smaller expansion icon will be displayed, and when its width is further reduced, the icon and rating will be hidden.

Subject: GitHub Light

The expanded view will now display custom hover information. This rich hover includes a complete description of the extension and other useful information, such as why the extension is disabled or recommended.

Subject: GitHub Light

You can now see more plug-in running status in the plug-in panel, such as its activation time, whether it was activated at startup, and whether any warnings or errors were generated in the newly introduced runtime status tab in the extension editor. Of course, you can also hover over the plug-in view to see part of the running status information.

Subject: GitHub Light

The details tab of the plug-in panel will now display category information, resource links, and other information such as plug-in release time and update time. Selecting a category will display all plugins in the current category.

Subject: GitHub Light

GitHub Light：

https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

Settings editor:

The settings editor now supports object verification. The validation will cover type errors that may be introduced when directly editing the JSON file.

In non-editing mode, the array setting now has drag and drop support.

In addition, the enumeration array setting with the uniqueItems property set to true now only displays the remaining options instead of all the options in the drop-down list.

The settings editor now also supports multi-line string settings, where the value is presented in a multi-line text area instead of a single-line input box:

Extended theme customization syntax:

The color customization setting allows users to customize the color of the current theme:

• workbench.colorCustomizations
• editor.tokenColorCustomizations
• editor.semanticTokenColorCustomizations

The following syntax can be used to customize the colors of multiple themes at once:

You can list multiple topics, or use the * wildcard at the beginning or end of the name to select multiple topics.

Support for Jupyter notebook files:

This month, we absorbed the code that supports *.ipynb files from the Jupyter notebook plugin into a built-in plugin. This means that you can now get native support for Jupyter notebooks in a freshly installed VS Code environment. You don't even need to install Jupyter plugins. It should be noted that if you want to execute ipywidgets or other complex rendering type code units or view the running results, you still need to fully install the Jupyter plug-in.

Jupyter notebook:

https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

Improvements to the notebook layout:

We have made some improvements to the notebook layout in this iteration:

• We will now render the first line of the code unit when folding.
• When the window width is not large enough to present all the main operations, the operations on the toolbar of the notebook editor will move to the overflow area.
• The default value of notebook.undoRedoPerCell is now changed to true.

We have also updated the default style of code cells to display background colors to help distinguish cells. The theme can use notebook.cellEditorBackground to customize this color.

Finally, you can now use the notebook.globalToolbarShowLabel setting to switch text labels on the notebook toolbar:

"Copy relative path" Configure path separator:

When calling the "copy relative path" operation, the new setting explorer.copyRelativePathSeparator allows to explicitly set the path separator. The following options are available:

• Auto (default)-use operating system specific path separator
• /-Use slash as path separator
• \-Use a backslash as a path separator

Sharing view state across editor groups:

A new setting workbench.editor.sharedViewState has been added to configure how the editor view state (for example, the scroll position in the editor) is shared between editor groups.

By default, this setting is disabled to keep the current setting. If you open the editor sideways and close the editor group later, just to open the editor sideways again, the view state will not be restored because you are opening a new editor group. However, when you enable this setting, unless a more specific view state is found for the editor group, the latest editor view state will be retained and used in all editor groups.

editor

Switch between different folding ranges:

The following new commands can set the cursor position to the corresponding fold:

• Go to the next fold (editor.gotoNextFold)
• Go to the previous fold (editor.gotoPreviousFold)
• Go to parent fold (editor.gotoParentFold)

There are currently no default key bindings for these commands, but you can add your own keyboard shortcuts in the following ways:

Preferences: Open keyboard shortcuts (kb(workbench.action.openGlobalKeybindings))

Import statements are automatically folded:

Import statements are automatically folded by setting editor.foldingImportsByDefault.

When the file is opened, the folded state will be saved.

TypeScript, JavaScript, Java, C#, C++ and other programming languages with folding scope providers all support this new feature. Note: The folding range provider specifically refers to the provider that marks the Import statement as FoldingRangeKind.Imports.

Seed search string for selection:

The Find Widget setting editor.find.seedSearchStringFromSelection already supports seeding search strings from non-empty selections. By default, when the widget is displayed, the editor will use the following two as search keywords: 1. Select item. 2. Select the surrounding words empty.

Inline suggested improvements:

We changed the presentation of inline suggestions. This not only fixes many bugs, but also makes the word wrap recognize inline suggestions.

In addition, multi-line inline suggestions for non-trailing positions are now supported.

Improvements in embedding prompts:

We also changed the presentation of embedded prompts. By using the same mechanism as inline suggestions, embedded hints are now also used for word wrap.

This mechanism also implements a separate cursor docking around the embedded prompt.

terminal

Drag the terminal between windows:

Now, you can arbitrarily drag the terminal from the tab page or the editing area of a window to the tab page, the editing area, or the panel of another window.

Child process tracking and shutdown warning:

When the user tries to close a terminal with child processes, terminal.integrated.confirmOnExit and the new setting terminal.integrated.confirmOnKill will warn the user. By default, this only affects the terminal in the editor area, but the user can configure it to display all terminal warnings (in the panel area).

Set the provided terminal configuration file as default:

Now users can set the terminal configuration file provided by the plug-in as the default configuration file.

Underline and strikethrough support:

The terminal now supports underline and strikethrough attributes. For example, you can configure git to use these new properties:

Subject: Sapphire

The above example uses the following .gitconfig parameters:

Configure git:

https://git-scm.com/docs/git-config#Documentation/git-config.txt-color

Sapphire：

https://marketplace.visualstudio.com/items?itemName=Tyriar.theme-sapphire

Edit the area to create a terminal:

Now, users can use the new command workbench.action.createTerminalEditorSide in the active editing area to create a new terminal on the side.

Active terminal tab indicator:

Themes can now use the theme key terminal.tab.activeBorder to set the color of the vertical line to indicate the active terminal tab.

If terminal.tab.activeBorder is not set, the color will fall back to tab.activeBorder.

Disable animated icons on terminal tabs:

terminal.integrated.tabs.enableAnimation will disable terminal tab animation icons. If it is for the task rather than the spinner, the play button will be used:

debugging

Improved the play/debug buttons in the title area of the editor:

In the February version, we introduced a drop-down button to group run and debug commands in the central (compact) position of the editor title area. According to some user feedback, we try to improve the drop-down button by remembering the last operation performed. The drop-down button will now have two click areas, one for the default action (left) and the other for the drop-down (right), where the selected run operation will be memorized and saved as the new default value.

caution:

• If there is only one run or debug operation, the drop-down menu will be omitted.
• If there are multiple running or debugging operations, all operations will appear in the drop-down menu, and the default operation is set to the first operation in the drop-down menu (provided that there is no memorized operation).
• When VS Code restarts, it retains the default actions for the specific workspace; it does not retain the editor content.

February version:

https://code.visualstudio.com/updates/v1_54#_limits-for-editor-title-menu-and-run-submenu

Contributions to extensions

Real-time preview:

The real-time preview extension has some exciting new features this month! This includes:

• External preview of built-in JavaScript debugger compatibility.
• Please use Live Preview: Show Debug Preview to try it out!
• Improvements to the embedded browser, such as "find in the page" support and quick access to webvivew DevTools.
• File system monitoring automatically generates files.
• Looking forward to more!

To see more details about the progress this month, please refer to the extension's release notes.

Subject: GitHub Dark

Real-time preview of extensions:

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Release notes:

https://github.com/microsoft/vscode-livepreview/blob/main/release_notes/july-2021.md

GitHub Dark：

https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GitHub pull requests and issues:

Work continues on the GitHub pull request and issue extension plugin, which allows you to respond to, create, and manage pull requests and issues. Highlights of this month:

• The "getting to work" of questions has been expanded to allow you to deal with questions outside of the currently open repository.

To learn about all the new features and updates, you can view the full change log of the 0.29.0 version extension.

GitHub pull requests and issues:

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

The complete change log of the 0.29.0 version extension:

https://github.com/microsoft/vscode-pull-request-github/blob/main/CHANGELOG.md#0290

Jupyter：

The work on Jupyter extensions continues. To learn about all the new features and updates, you can view the full update log for the July version.

Jupyter：

https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

The complete update log for the July version:

https://github.com/microsoft/vscode-jupyter/blob/main/CHANGELOG.md#202189-3-august-2021

Interactive window:

The Jupyter interactive window provides another way to build and use Jupyter notebooks, using text files instead of the notebook interface. Last month, we previewed the upgraded version of the Jupyter interactive window, and now we provide a deeper workbench integration, including support for themes, custom key bindings, fragments, compatibility with extensions, etc.! Thank you very much to our users for providing feedback on the preview version via GitHub issues. The built-in interactive window has now become the default interface in version 1.59. The previous interface will still be available after "jupyter.enableNativeInteractiveWindow": false and will be removed in the upcoming version. We look forward to your feedback!

Your feedback:

https://github.com/microsoft/vscode-jupyter/issues

Run line by line:

We have been working to support the "run line by line" feature in Jupyter notebooks. This feature is essentially a simplified debugging mode that allows you to execute unit code line by line without any complicated debugging UI. This is still experimental, you can set "jupyter.experimental.debugging": true, install version 6 of ipykernel in the kernel of your choice, and then select the "Run by row" button in the cell toolbar to try it out a bit.

Remote container devcontainer CLI:

Remote-The container extension is suitable for using Docker containers in VS Code. It now includes the devcontainer command-line interface, allowing you to easily open a folder in the container (devcontainer open) or build a development container image (devcontainer build).

You can learn about new features and bug fixes in the remote development release notes.

Remote-Container:

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

Remote development:

https://github.com/microsoft/vscode-docs/blob/main/remote-release-notes/v1_59.md

Preview function

Automatic language detection for untitled files:

We are happy to announce the initial preview version of automatic language detection for untitled files, which uses machine learning to detect the language you are encoding and automatically set the language mode for untitled files. This feature utilizes the open source ML library Tensorflow.js and the ML model from Guesslang by GitHub user @yoeo.

In this version, this feature will be turned off by default, but we plan to set it as the default setting for the next iteration. If you want to enable it, please apply the following settings:

​
"workbench.editor.untitled.experimentalLanguageDetection": true
​

​
"workbench.editor.untitled.experimentalLanguageDetection": true

For example, you can open an untitled file and paste a piece of code into your editor.

The following is a snippet of automatically recognized Python code:

Subject: Panda

In addition, you can view the language being detected by opening the language selector.

Subject: Panda

Note: If the language test result is not confident enough, you will keep the current language mode, and no results will be displayed in the language selector until the language test result is more confident.

This setting also allows you to provide language overrides, which can be used to specify language modes that you do not want to automatically turn off.

The following example shows how to turn off automatic detection of .md files:

When you edit an untitled Markdown file, the automatic language detection function will not run on However, if you are modifying any other type of file Untitled, automatic language detection will detects the contents of these files.

We have separated and merged the code that interacts with the ML model into its own code base and released it as an npm package, which exists in the vscode-languagedetection repository.

Please let us know if the automatic language detection function of untitled files has helped your daily work!

Tensorflow.js：

https://www.tensorflow.org/js/

@yoeo：

https://github.com/yoeo

Guesslang：

https://github.com/yoeo/guesslang

Panda：

https://marketplace.visualstudio.com/items?itemName=tinkertrain.theme-panda

vscode-languagedetection：

https://github.com/Microsoft/vscode-languagedetection

TypeScript 4.4：

This version includes support for TypeScript version 4.4. You can read more about the new language features and improvements in TypeScript 4.4 on the TypeScript blog. Some tool highlights:

• Embed parameter name and type hints in JavaScript and TypeScript files.
• Basic spelling suggestions in pure JS files. These will only be displayed when we are sure of the error and fix.

To start using the TypeScript 4.4 beta version, please install the TypeScript Nightly extension.

If you encounter any errors while using TypeScript 4.4, please share your feedback and let us know.

TypeScript blog:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/

TypeScript Nightly extension:

https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

The disassembly tried:

Thanks to the large amount of code contributed by the Microsoft C++ team, we are happy to include the preview function of disassembly view

The disassembly view can be opened from the context menu of the editor to display the disassembled source code of the active stack frame. It supports single-step execution of assembly instructions, and breakpoints can be set on a single instruction.

The disassembly view is only available in an active debugging session. Note that the underlying debugging extension plug-in also needs to have corresponding support.

Currently, only C++ and Mock Debug can support disassembly view.

From a technical point of view, the disassembly view of VS Code implements four other functions of the DAP (Debug Adapter Protocol) protocol:

• The disassembly request is used to provide the disassembly source code based on the memory location.
• The instructionPointerReference property on the stack frame.
• The granularity attribute of the step request.
• Instruction breakpoints and setInstructionBreakpoints requests.

A large amount of code contributed:

https://github.com/microsoft/vscode/pull/125737

C++：

https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

Mock Debug：

https://marketplace.visualstudio.com/items?itemName=andreweinand.mock-debug

Extended creation

Test API:

Last fall, we started adding native support for running tests in VS Code. This month, the first set of test-related APIs has been delivered. Compared with the previous extension plug-ins, these APIs provide greater flexibility, better performance, and a richer user experience. Check out the guide on writing test extensions to learn more.

theme:

Existing users of the Test Explorer UI plugin can get a native experience by setting testExplorer.useNativeTesting to true. However, the conversion is based on the test explorer UI to extend the existing API, so some features such as rich differences are not included.

The Microsoft Java Test Runner included in the Java Extension Pack is one of the first extensions to adopt the testing API.

Guidelines for writing test extensions:

https://code.visualstudio.com/api/extension-guides/testing

Test Explorer UI:

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer

Java extension pack:

https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack

Microsoft Java test runner:

https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-test

Contribution points of the new file menu:

Extensions that help create new file editors (such as notebooks or custom editors) can now contribute points to the new file/new file menu. This menu can be accessed from the welcome page or the "New File..." item in the file menu.

Rich status bar hover:

Status bar items now support rich hovering, including links and icons StatusBarItem.tooltip: string | IMarkdownString

• If MarkdownString.supportThemeIcons is true, you can use icons with the $(iconName) syntax.
• If the MarkdownString is trusted, you can also add command links. Syntax: ([test](command:vscode.newWindow))
• If MarkdownString.supportThemeIcons is set to true, you can use icons with the syntax $(iconName)
• If MarkdownString is trusted, you can also add a command link. Syntax: ( test )

Status bar warning color:

The status bar items that indicate warnings can use the newly added colors statusBarItem.warningBackground and statusBarItem.warningForeground.

Object settings without additionalProperties:

Object settings must set additionalProperties to false in order to support objects in the settings editor. Otherwise, the settings editor will interpret as complex settings (irregular settings) and direct the user to the settings JSON file.

Multi-line string settings:

To add support for multiline string settings in the settings editor, please add "editPresentation": "multilineText" as a key-value pair to the string settings. Changing the string setting to a multi-line setting will cause the setting editor to display the setting value in a multi-line text area instead of a single-line input box.

Updated Codicons:

We have added the following new icons to the codicon library:

• azure
• compass-active
• compass-active
• compass-dot
• compass
• debug-all
• debug-coverage
• git-pull-request-closed
• git-pull-request-draft
• issue-draft
• layers-active
• layers-dot
• layers

codicon：

https://code.visualstudio.com/api/references/icons-in-labels

Reason for text document change:

When the event workspace.onDidChangeTextDocument is triggered, the new attribute reason of the event object will inform the user that the reason for the text change is undo or redo.

Language server protocol:

The next new version of the language server protocol and the corresponding npm module have been released. The 3.17 version contains a new proposal for the details of the finished item label, which is in line with the latest changes in VS Code itself.

Language server protocol:

https://microsoft.github.io/language-server-protocol/

Version 3.17:

https://microsoft.github.io/language-server-protocol/specifications/specification-3-17/

Debug adapter protocol

Finalize the "writeMemory" request and "memory" event proposal:

The writeMemory request has been completed and can now be used in version 1.48 of the Debug Adapter Protocol and its corresponding npm module. If the debug adapter has the supportsWriteMemoryRequest function, the client can use the writeMemory request to write bytes to the memory at a given location.

There is a new proposal for the memory event, which will be added to DAP in the next milestone.

Debug Adapter Protocol：

https://microsoft.github.io/debug-adapter-protocol/

New proposal:

https://github.com/microsoft/debug-adapter-protocol/issues/194#issuecomment-886687894

Proposed extension API

Each milestone version comes with new proposed APIs, and extension authors can try them out. We look forward to your feedback. If you want to try the proposed new API, please complete the following steps:

• You must use the Insiders version because the proposed API is frequently modified
• You must add this line in the package.json file of your extension: "enableProposedApi": true
• Copy the latest version of the vscode.proposed.d.ts file to the source location of the project

You will not be able to publish extensions using the recommended API. Because the new version may have major changes, we need to ensure that the existing extension plug-ins can continue to be used.

vscode.proposed.d.ts：

https://github.com/microsoft/vscode/blob/main/src/vs/vscode.proposed.d.ts

isDefault is used for TaskGroup:

The group attribute exists on the tasks defined in the tasks.json file and is also exposed through the task API. The group attribute has an isDefault attribute, which is not available in the API until now. The proposal exposes the isDefault attribute as a read-only attribute on TaskGroup, so that the extension can read which task is the default task of the group, but cannot override the user configuration by setting a default value for the group.

ForceRecreate for AuthenticationGetSessionOptions

So far, the getSession API used to obtain authentication session objects has never been able to require users to log in again. However, this is necessary for authentication services such as GitHub that use the SAML/Single Sign-On (SSO) experience, where the access token will eventually lose access to the resource when the SSO session expires. The proposal adds another attribute called forceRecreate to AuthenticationGetSessionOptions, allowing you to require users to log in again. Show users a modal experience similar to that shown when you specify createIfNone.

project

Iframe-based webviews are now visible everywhere on the desktop:

This month we completed the transition from Electron’s webview tag element to a webview based on ordinary <iframe> elements. This better coordinated the cross-desktop and web implementation of VS Code's webviews, and also allowed us to delete a lot of redundant code now.

Electron's webview tag:

https://www.electronjs.org/docs/api/webview-tag

Electron 13 update:

In this milestone version, we completed the experiment of bundling Electron 13 into VS Code, thanks to all participants who participated in the Insiders test and self-hosting. This is the main Electron version that comes with Chromium 91.0.4472.124. The Node.js version of this version has not changed, it is still v14.16.0.

Progress of Electron sandbox support:

As we prepare to enable Electron's sandbox function on the VS Code workbench, we hope to enable the hybrid sandbox mode on Linux and not bundle the cli parameter --no-sandbox in the distributed package deb, rpm, snap, and tar archives . Chromium has a multi-layer sandbox model on Linux. If Chromium cannot use the namespace sandbox for layer 1, it will try to use the setuid sandbox through the helper chrome-sandbox. For a setuid binary to work, it needs to meet the following conditions:

• Sandbox binaries must be executable by the Chromium process
• It must be SUID and can be executed by others

We can keep these conditions for deb and rpm packages. Currently unable to obtain these permissions for snap, we have the following tracking issue https://github.com/microsoft/vscode/issues/127140.

As for other applications that use tar archives, if the application cannot use the namespace sandbox (this may happen when running inside a container) it will fail with the following error

FATAL:setuid_sandbox_host.cc(158)] The SUID sandbox assistant binary file was found, but it was not configured correctly. Instead of running without a sandbox, I am now suspending the program. You need to make sure that chrome-sandbox is owned by the root user and the mode is 4755.

If this happens, you can use one of the following two options to make it work:

• Fix setuid helper permission issue
  
• Run with the --no-sandbox flag

Sandbox:

https://www.electronjs.org/docs/tutorial/sandbox

There is a multi-layer sandbox model on linux:

https://chromium.googlesource.com/chromium/src/+/HEAD/docs/linux/sandboxing.md

setuid sandbox:

https://chromium.googlesource.com/chromium/src/+/HEAD/docs/linux/suid_sandbox.md

Some improvements to the smoke test:

We have been running a complete set of smoke tests for each build. We test to open VSCode (desktop and web) and execute a bunch of UI elements to ensure correct functionality. In this milestone version, we invested more resources on this basis, allowing us to remove manual smoke testing from the final plan.

The smoke test can now be run on all platforms (macOS, Linux, and Windows). The most important thing is that we have realized that the smoke test is automatically run every time the code is submitted, so that we can find software errors that may be introduced by the new version of VS Code in time.

Finally, thanks to our Playwright library for automating web smoke testing, we adopted their tracking tool, which allows us to view and repeat failed smoke tests.

Playwright：

https://github.com/microsoft/playwright

Tracking tool:

https://playwright.dev/docs/next/trace-viewer/

Learning materials

http://aka.ms/vscodelearn

Major repair

26425 : The "Open Changes" button should not be displayed when there are no changes

100815 : The external terminal was interrupted while connecting to the remote WSL

106981 : When the window zoom is set to -1, the terminal cursor is ghosted

127959 : The debug pane will be opened when the debugger is paused

129059 : The object widget in the setting editor does not render instructions

129070 : The drop-down list setting value cannot be corrected by just pressing the "OK" button

129415 : Cannot run user tasks in single file mode