Author commit message using an editor · code.visualstudio.com

Update 1.69.1: The update addresses these issues.

Update 1.69.2: The update addresses these issues.

Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap

Welcome to the June 2022 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include:

If you'd like to read these release notes online, go to Updates on code.visualstudio.com.

Watch the release party: Listen in as the VS Code team discusses some of the new features. You can find the recording of the event on our YouTube channel.

Insiders: Want to try new features as soon as possible? You can download the nightly Insiders build and try the latest updates as soon as they are available.

Workbench

3 way merge editor

In this release, we continued working on the 3-way merge editor. This feature can be enabled by setting git.mergeEditor to true and will be enabled by default in future releases.

The merge editor allows you to quickly resolve Git merge conflicts. When enabled, the merge editor can be opened by clicking on a conflicting file in the Source Control view. Checkboxes are available to accept and combine changes in Theirs or Yours:

All language features are available in the merge editor (including diagnostics, breakpoints, and tests), so you get immediate feedback about any issues in the merged result.

The result can also be edited directly. Note how the checkbox updates as expected:

When closing the merge editor or accepting the merge, a warning is shown if not all conflicts have been addressed.

The merge editor supports word-level merging - as long as the changes don't intersect, both sides can be applied. If the insertion order matters, it can be swapped. At any time, the conflict can also be resolved manually.

We would love to hear your feedback! To share a merge conflict with us, use the command Merge Editor (Dev): Copy Contents of Inputs, Base and Result from JSON and paste the content in your GitHub issue.

Command Center

The Command Center has been polished and is now ready to be tried. Enable it via window.commandCenter setting.

The Command Center replaces the normal title bar and lets you quickly search for files in your project. Click the main section to display the Quick Open dropdown with your recent files and a search box.

The Command Center and its hover message atop the window

Theme: GitHub Theme

The Command Center also has a button on the right to display the Quick Access options via '?'. On the left are Go Back and Go Forward buttons to navigate through your editor history.

Settings editor modified indicator

The Settings editor now shows when a setting has a language override. For context, language overrides always take precedence over non-language-specific overrides, so if the value of a setting doesn't seem to affect the behavior of the setting for a certain type of file, it could be that the setting has a language override.

The indicator text was changed to be more clear and concise. The short video below shows the new Modified elsewhere indicator. Hovering over the indicator reveals a hover that shows language overrides, when applicable. The video later shows the new default override indicator with the text Default value changed.

Theme: Light Pink

Do Not Disturb mode

The new Do Not Disturb mode hides all non-error notification popups when enabled. Progress notifications will be automatically shown in the Status bar. Hidden notifications are still available to view in the Notification center.

Do Not Disturb mode shown in the Status bar and Notification center

You toggle Do Not Disturb mode by opening the Notification center (select the bell icon in the right of the Status bar) and clicking the slash bell icon. Do Not Disturb mode is indicated in the Status bar by the slash bell icon.

Toggle between Light and Dark themes

A new command allows you to toggle between your preferred light and dark themes, Preferences: Toggle between Light/Dark Themes. When in a light theme, the command switches to a dark theme and vice versa.

When in a high contrast theme, the command remains in high contrast and switches to the preferred high contrast theme of the opposite color theme.

The preferred themes are defined by the settings:

  • workbench.preferredDarkColorTheme
  • workbench.preferredLightColorTheme
  • workbench.preferredHighContrastColorTheme
  • workbench.preferredHighContrastLightColorTheme

The VS Code minimap displays a high level outline of your source code file on the side of the editor. You have been able to toggle the visibility of the minimap via the View: Toggle Minimap command or disable the minimap completely with the Editor > Minimap: Enabled (editor.minimap.enabled) setting. With this release, there is now a context menu to easily show or hide the minimap.

Minimap context menu

You can also tune the appearance with the Size (editor.minimap.size), Scale (editor.minimap.scale), and Slider (editor.minimap.showSlider) settings. If the minimap is hidden, you can still display the context menu by right-clicking the side gutter.

The Copy vscode.dev Link command can be used from the File > Share submenu to quickly get a vscode.dev link for your open GitHub repository. The Share submenu is also available from the editor context menu.

Terminal

Shell integration

Shell integration for PowerShell, bash, and zsh that has been in preview since the January release is now out of preview! We're planning on enabling it by default in the 1.70 release.

To enable the shell integration feature, check Terminal > Integrated > Shell Integration : Enabled in the Settings editor or set the value in your settings.json:

{
    "key": "ctrl+space",
    "command": "workbench.action.terminal.runRecentCommand",
    "when": "terminalFocus"
},

Go to recent directory

Similar to the run recent command feature, the Terminal: Go to Recent Directory command keeps track of directories that have been visited and allows quick filtering and navigating (cd) to them:

<video src="/assets/updates/1_69/terminal-si-go-to-dir.mp4" autoplay loop controls muted title="The Go to Recent Directory command shows a Quick Pick with directories previously navigated to, selecting one will run "cd path"">

Alt can be held to write the text to the terminal without running it.

Current working directory detection

Shell integration tells us what the current working directory is. This information was previously impossible to determine on Windows without a bunch of hacks, and required polling on macOS and Linux, which wasn't good for performance.

The current working directory is used to resolve relative links, show the directory a recent command ran within, as well as support the split current working directory "terminal.integrated.splitCwd": "inherited" feature.

Growing support for shell setups

This release we improved integration with bash-preexec, added basic support for powerlevel10k, and detected more cases where shell integration will not work and gracefully disable the feature. We expect a long tail of improvements in this area over time.

SetMark sequence support

The terminal now supports the sequence 'OSC 1337 ; SetMark ST' originally created by iTerm2, making it possible to add a mark on the left of the line as well as in the scroll bar:

When the sequence is written to the terminal, a small grey circle will appear to the left of the command, with a matching annotation in the scroll bar

Theme: Sapphire Theme

Here are some examples of how to trigger this in scripts:

  • bash: echo -e 'Mark this line\x1b]1337;SetMark\x07'
  • pwsh: Write-Host "Mark this line`e]1337;SetMark`a"

Custom rendering of simple Powerline glyphs

The four common angled bracket Powerline symbols are now custom rendered similar to box drawing and block characters when GPU acceleration is enabled in the terminal. This comes with several benefits:

  • Sub-pixel anti-aliasing will never be used that could cause unsightly red or blue outlines on either side, breaking up the "powerline".
  • These characters will work without installing a patched font.
  • Line height affects these characters.

Before:

Line height would not be respected, leading to a Powerline symbol with a different height to adjacent cells. Additionally, a blue outline could appear when sub-pixel anti-aliasing was used

After:

Line height is now respected and greyscale anti-aliasing is used for improved rendering

Consistent format for messages from VS Code

Previously messages in the terminal that were directly written by VS Code, not the process, used several different formats. This is now consistent across the board with loud format and a more subtle format:

Loud formatting starts the line with an asterisk with the inverted style, followed by a message using a blue background

Subtle formatting starts the line with an asterisk with the inverted style, followed by a message using the default background

Accessibility improvements

The terminal saw several improvements to accessibility this iteration:

  • More links are now available by default in the Terminal: Open Detected Link... command, with the ability to search the rest of the terminal buffer.
  • The Terminal: Run Recent Command command now allows inputting the resulting command without running it by holding Alt.
  • Find in the terminal has improved screen reader announcements.
  • Up and down can be used within navigation mode (Ctrl+Up) without using a modifier.
  • Page up and page down can now be used in navigation mode (Ctrl+Up) to scroll by page.

Process reconnection and revive improvements

Terminal persistence received some UX and reliability improvements:

  • Previously reloading a window n times would show n session restored messages. Now the session restored message should only show up when that particular session has had input.
  • The session restored message that previously contained the date has been reduced to simply "History restored" to reduce noise.
  • The "environment variable collection" feature that notifies the user about extensions wanting to change the environment (for example, to support automatic Git authentication) now works across reloads.

Tasks

Decorations

A few iterations ago, we added decorations to the terminal buffer and overview ruler, thanks to the shell integration feature, to improve navigation of the terminal. Decorations now also mark points of interest for tasks, which can be jumped to with the command navigation feature (Ctrl/Cmd+Up, Ctrl/Cmd+Down).

For start/stop tasks, a decoration appears next to the start of the task and is styled according to the run's exit code, if any.

A task fails and an error decoration is added. A task succeeds and a success decoration is added

For watch tasks, a decoration appears by the first reported problem for each compilation.

A watch task's first error is marked with a decoration

Icon and color support

An icon can now be set for a task with a Codicon id and a terminal ANSI color property. For example:

[Some link](<path to file with spaces.md>)

This iteration, we've improved support for angle bracket links so that they are correctly highlighted and clickable in the editor.

Emmet inline completions setting

Emmet has a new setting emmet.useInlineCompletions that allows inline completions to occur in files. For now, it is best to enable the setting only for editing HTML and CSS files.

The short video below was recorded with the editor.quickSuggestions setting set to off for all entries.

JSON notifications in the language indicator

When there are too many folding ranges, document symbols, or color decorators to be shown, VS Code no longer uses notifications, but uses the JSON language indicator to inform the user.

JSON notifications from the Status bar JSON language indicator

HTML final new line formatter setting change

The setting html.format.endWithNewline has been removed in favor of files.insertFinalNewline.

files.insertFinalNewline applies to all programming languages. If you want different settings per language, you can use a language scope:

Jupyter extension.

This month the following features were ported to the web extension:


    

  • Exporting an Interactive Window
    • 

  • Debugging an Interactive Window
    • 

  • Collapsible cells in an Interactive Window
    • 



If you'd like to experiment with the functionality, launch Jupyter from your local machine with:


"workbench.colorCustomizations": {
    "statusBarItem.settingsProfilesBackground": "#ce4918",
    "statusBarItem.settingsProfilesForeground": "#e0dfdb",
}



You can manage and remove settings profiles using the Remove Settings Profile... action available in the Settings Profiles sub menu in Settings gear menu.


Removing Settings Profiles


Even though you can customize VS Code per profile, there are some settings that can only be customized at the application level. For example, all application-scoped settings like update.mode, language pack extensions, settings sync enablement, and Workspace Trust state are customized across all profiles at the application level.


Access edit sessions across VS Code for the Web and desktop


This milestone we are announcing a preview of edit sessions in VS Code. Edit sessions enable you to bring your uncommitted changes along when you continue working on a repository wherever VS Code is available, whether that is VS Code for the Web, desktop VS Code, or across different machines.


For example, you can use edit sessions to transfer and access working changes:


    

  • From a repository in github.dev to a local desktop clone of that repository.
    • 

  • From a clone of a repository on a Windows device to a clone of that repository on a macOS device.
    • 



Edit sessions are currently in preview behind the workbench.experimental.editSessions.enabled setting. In this initial release, you can use the following commands to store and resume your working changes:


    

  • Edit Sessions: Store Current Edit Session
    • 

  • Edit Sessions: Resume Latest Edit Session
    • 



To get started with edit sessions, use the Edit Sessions: Store Current Edit Session command and sign in with GitHub or Microsoft authentication when prompted. Then use the Edit Sessions: Resume Latest Edit Session command in a repository on another machine or VS Code instance to restore the working contents of all modified files to your workspace. You can sign out of edit sessions at any time using the Edit Sessions: Sign Out command.


As we continue to iterate on the edit sessions experience, try it out and share your feedback with us via a comment in issue #141293.


Extension authoring


Iterable vscode.d.ts collection types


To make it easier to work with the collection types in vscode.d.ts, this iteration we've made them all iterable. This allows you to use for...of loops and spreads with these types:


"notebookRenderer": [
    {
        "id": "sample.markdown-it.emoji-extension",
        "displayName": "Markdown it Emoji renderer",
        "entrypoint": {
            "extends": "vscode.markdown-it-renderer",
            "path": "./out/emoji.js"
        }
    }
]



This renderer will now be activated whenever the vscode.markdown-it-renderer is activated.


Now to extend the vscode.markdown-it-renderer, our renderer can call a method on the base renderer. This method is specific to the base renderer. In this case, we first get the base renderer using getRenderer and then call extendMarkdownIt on it to augmented the instance of Markdown-It it uses for rendering:


export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

    public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
        // Get a list of all files
        const files: vscode.DataTransferFile[] = [];
        sources.forEach((item) => {
            const file = item.asFile();
            if (file) {
                files.push(file);
            }
        });

        const decoder = new TextDecoder();

        // Print out the names and first 100 characters of the file
        for (const file of files) {
            const data = await file.data();
            const text = decoder.decode(data);
            const fileContentsPreview = text.slice(0, 100);
            console.log(file.name + ' — ' + fileContentsPreview + '\n');
        }

        ...
    }
}



High contrast light in webviews


Webviews now can target high contrast light color themes using the vscode-high-contrast-light CSS class:


/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste?(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
    dataTransfer.set('text/plain', new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): Promise<vscode.DocumentPasteEdit | undefined> {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text') ?? dataTransfer.get('text/plain');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return { insertText: snippet };
  }
}

export function activate(context: vscode.ExtensionContext) {
  // Enable our provider in plaintext files
  const selector: vscode.DocumentSelector = { language: 'plaintext' };

  // Register our provider
  context.subscriptions.push(
    vscode.languages.registerDocumentPasteEditProvider(
      selector,
      new CopyCountPasteEditProvider(),
      {
        pasteMimeTypes: ['text/plain']
      }
    )
  );
}



WebUSB, WebSerial, and WebHID access on web


There is now experimental support for using WebUSB, Web Serial, and WebHID from web extensions.


To access these APIs, your extension first needs to request access to the desired devices by running one of these commands:


    

  • workbench.experimental.requestUsbDevice
    • 

  • workbench.experimental.requestSerialPort
    • 

  • workbench.experimental.requestHidDevice
    • 



These commands will prompt the user to select a device. Each command takes a list of device filters as its argument. For example:


const devices = await navigator.usb.getDevices();
// Do something with devices



All of the normal web device APIs should work, with the expectation of those such as requestDevice that need to show UI elements to the user.


At the moment, this functionality only works on web and support is limited to the Chrome and Edge browsers. Also keep in mind that this feature is still experimental, so we may iterate on its design. Give it a try and share your feedback!


Engineering


Electron 18 update


In this milestone, we finished the exploration to bundle Electron 18 into VS Code desktop and we want to thank everyone involved with self-hosting on Insiders. This update comes with Chromium 100.0.4896.160 and Node.js 16.13.2.


Documentation


TypeScript editing and refactoring


There are two new topics focusing on TypeScript Editing and Refactoring in VS Code. There you'll learn about specific features such as Inlay hints, CodeLens, and formatting options specific to TypeScript as well as the available code refactorings.


Notable fixes


    

  • 109565 Terminal always show uppercase letters when using caps lock to switch input source
    • 

  • 146491 Color Difference between active and inactive menu lost
    • 

  • 149538 Unable to log in to Microsoft or GitHub Account in China
    • 

  • 149890 Can't drag an item and drop it to an empty treeview
    • 

  • 150934 RPM should not list bundled libraries as "provides"
    • 

  • 151158 Retain selected kernel in untitled notebook when saving notebook
    • 

  • 151664 Improve the efficiency of announcements when stepping through code with screen readers
    • 

  • 151739 workbench.action.submitComment not functional when first replying to a comment thread & confusing when editing comments
    • 

  • 152067 Only show comment thread range when the comment is expanded
    • 

  • 152141 Drop task status when the process exits
    • 

  • 152642 Added a button to remove watch expressions with a single click
    • 



Thank you


Last but certainly not least, a big Thank You to the contributors of VS Code.


Web extensions


Extension authors for enabling extensions that run code as web extensions (the list below is between June 7 and July 4, 2022):



Issue tracking


Contributions to our issue tracking:



Pull requests


Contributions to vscode:



Contributions to vscode-generator-code:



Contributions to vscode-js-debug:



Contributions to vscode-pull-request-github:



Contributions to debug-adapter-protocol:



Contributions to devcontainers/cli:

Read the original on code.visualstudio.com ↗