News

VS Code Gets New Side Panel in v1.64 Update

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:

Side Panel in Animated Action
[Click on image for larger, animated GIF view.] Side Panel in Animated Action (source: Microsoft).

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.

About the Author

David Ramel is an editor and writer at Converge 360.

comments powered by Disqus

Featured

  • Compare New GitHub Copilot Free Plan for Visual Studio/VS Code to Paid Plans

    The free plan restricts the number of completions, chat requests and access to AI models, being suitable for occasional users and small projects.

  • Diving Deep into .NET MAUI

    Ever since someone figured out that fiddling bits results in source code, developers have sought one codebase for all types of apps on all platforms, with Microsoft's latest attempt to further that effort being .NET MAUI.

  • Copilot AI Boosts Abound in New VS Code v1.96

    Microsoft improved on its new "Copilot Edit" functionality in the latest release of Visual Studio Code, v1.96, its open-source based code editor that has become the most popular in the world according to many surveys.

  • AdaBoost Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the AdaBoost.R2 algorithm for regression problems (where the goal is to predict a single numeric value). The implementation follows the original source research paper closely, so you can use it as a guide for customization for specific scenarios.

  • Versioning and Documenting ASP.NET Core Services

    Building an API with ASP.NET Core is only half the job. If your API is going to live more than one release cycle, you're going to need to version it. If you have other people building clients for it, you're going to need to document it.

Subscribe on YouTube