News

VS Code Gets New Side Panel in v1.64 Update

• By David Ramel
• 02/08/2022

Visual Studio Code 1.64 (January 2022 edition) shipped with the usual bevy of new features and functionality, including a new side panel.

"This milestone, we introduce the Side Panel, a new surface in the workbench opposite the Side Bar, where you can house views from the Side Bar or the bottom Panel," says the announcement post. "Unlike moving the bottom Panel to the left or the right of the editor, the new Side Panel works in addition to the bottom Panel so you can see more sets of views at once."

Because the new UI addition allows developers to see more views at one time, it's used by moving views to it. Views are content containers that can appear in the Side Bar or Panel (where the terminal, output and other things are, not to be confused with the new Side Panel), and now the Side Panel. Views can contain tree views or custom views and can also display view actions. With the update, one notable use case that arose in feature voting was to move the Outline view from the Side Bar to the new Side Panel, as shown in this animated GIF:

Other functionality of the Side Panel includes:

• Developers can use the Move View command from the Command Palette, which will display a dropdown of available views. When a view is selected, a developer can then choose the location by either creating a new Panel/Side Bar/Side Panel entry or placing the view in an existing location such as Explorer or Source Control.
• Views can be dragged and dropped between the Panel, Side Bar and Side Panel by grabbing the view icon.
• Coders can reset a view's location back to its default by right-clicking on the view icon and selecting Reset Location.
• Resetting all views back to the default layout can be done with: Views: Reset View Locations from the Command Palette.
• Along with view dragging and dropping between panels, the new Side Panel is replacing the option to move the bottom Panel.

Other changes in the new update are summarized here, with links for more information on each feature:

• Settings editor search -- Search now prioritizes whole word matches: The Settings editor search now looks for string value matches in string and enum settings when searching. The new search algorithm also prioritizes whole word matches, which means that if one has both the Java and JavaScript extensions, the Java settings will show up first when searching "java."
• Audio cues -- Hear when the cursor moves to folded regions, errors, and breakpoints: They are played when the primary cursor changes its line or the first time a marker is added to the current line. Audio cues are enabled automatically when a screen reader is attached, but can also be turned on manually by setting audioCues.enabled to on.
• Unicode highlighting -- Avoid highlighting characters in supported languages: The new setting editor.unicodeHighlight.allowedLocales can be used to allow characters that are common in one or many configured locales. By default, this includes the current VS Code display language and the current OS language. At the moment, only locales translated in vscode-loc Language Packs are supported.
• Automatic terminal replies -- Create automatic responses to common terminal prompts: The terminal is now able to automatically reply when a specific sequence of characters is received. A good example of where this is useful is the Windows batch script message Terminate batch job (Y/N)? after hitting Ctrl+C when running a batch script. This typically just ends up causing problems for the user and so a default automatic reply was added. The terminal will now automatically reply with Y and enter (\r), which makes Ctrl+C in Windows feel much better.
• Notebook UI improvements -- Search text in Markdown and output cells: VS Code now supports find text in the rendered view of Markdown cells and output of code cells. The feature is disabled by default as it would require rendering of all Markdown cells and outputs, which might be costly when opening a notebook. You can turn on this feature by choosing options (Markdown Preview, Code Cell Outputs) from the filter dropdown on the Find control input box.
• Debug binary data view -- View and edit binary data while debugging: VS Code's generic debugger now supports viewing and editing binary data (aka "memory"). Variables for which memory viewing and editing is available show an inline binary icon in the Variables view, and selecting it opens the Hex Editor.
• Markdown path suggestions -- Quickly insert relative file paths and header links: The paths suggestions work similarly to path IntelliSense in CSS and HTML files. Paths starting with / are resolved relative to the current workspace, while paths staring with ./ or without any prefix are resolved relative to the current file. Path suggestions are automatically shown when you type / or can be manually invoked by using Ctrl+Space.
• JS/TS surround with snippets -- Insert selected code inside snippets: Many of the JavaScript and TypeScript snippets have been updated to support surrounding selected text. To use surround with, first select some text and then run Insert Snippet. Instead of replacing the selected text, snippets such as if or forof will now use the selected text as the body of the new statement.
• VS Code for the Web -- Support for signed GitHub commits in vscode.dev and github.dev: Commits created in VS Code for the Web are now signed and marked as Verified in the GitHub UI. Additionally, maintainers can now commit to pull requests submitted from forks when using VS Code for the Web. This is thanks to the new GitHub GraphQL createCommitOnBranch API.