June 2018 (version 1.25) (opens new window)

Welcome to the June 2018 release of Visual Studio Code. We're very excited to move several features announced as Preview last month to Stable. Some of the key highlights include:

• Grid editor layout (opens new window) - Custom horizontal and vertical editor layout.
• Outline view (opens new window) - Symbol tree outline and navigation for your documents.
• Portable Mode (opens new window) - Run or copy your VS Code setup from a USB thumb drop or file share.
• Hover display options (opens new window) - Control the appearance of hover information.
• Sub-word navigation (opens new window) - Quickly navigate in camelCase words.
• Floating debug toolbar (opens new window) - Keep the debug toolbar always visible without hiding editor tabs.
• Extensions view improvements (opens new window) - Easily see Enabled, Disabled, and Recommended extensions.
• Preview: Settings editor (opens new window) - Now with a "Table of Contents" to organize settings.
• Language Server Protocol Inspector (opens new window) - Extension authors can visualize LSP protocol traffic.
• New Python Flask tutorial (opens new window) - Use VS Code to create and debug Python Flask web applications.

If you'd like to read these release notes online, go to Updates (opens new window) on code.visualstudio.com (opens new window).
You can also check out this 1.25 release highlights video (opens new window) from Cloud Developer Advocate Brian Clark (opens new window).

The release notes are arranged in the following sections related to VS Code focus areas. Here are some further updates:

• Workbench (opens new window) - Drop files and folders into empty Explorer, uniform history navigation.
• Editor (opens new window) - Smart suggestion selection, snippet placeholder transforms.
• Languages (opens new window) - Update JS/TS imports on folder rename, CSS pseudo selectors and elements.
• Preview Features (opens new window) - User setup on Windows, custom tool and menu bar for Windows and Linux.
• Extension Authoring (opens new window) - Contribute grid editor layouts, preselect Completion Items.
• New Commands (opens new window) - New grid editor layout commands and keyboard shortcuts.

Grid editor layout (opens new window)

You can now arrange editors both vertically and horizontally and have more than 3 editors side by side:

To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false.

There are a predefined set of editor layouts in the new View > Editor Layout menu:

Editors that open to the side (for example by clicking the editor toolbar Split Editor action) will by default open to the right hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.

There are many new commands (opens new window) for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is a fast way to split the editor in any direction:

Since editor groups are now unlimited and can be arranged in many ways, the OPEN EDITORS view no longer labels editor groups as Left, Center, or Right. Instead, editor groups are now labeled with numbers according to their creation time. The last editor group created will always be at the end of the OPEN EDITORS list. We found this to be a good model that minimizes changing the list when moving editor groups around in the layout:

Refer to the Extension Authoring (opens new window) section for the impact on extensions and themes and see New Commands (opens new window) for the list of new grid editor layout commands.

Pro Tip: If you press and hold the Alt key while hovering over the toolbar action to split an editor, it will offer to split to the other orientation. This is a fast way to split either to the right or to the bottom.

Due to the grid layout work we have changed how the centered editor layout behaves:

• It is now possible to open any editor layout inside the centered editor layout. Thus it gives more flexibility to the user.
• Centered editor layout no longer automatically enables and disables based on the layout. As this was sometimes confusing and lead to unexpected behavior.

Sub-word support (opens new window)

We have new commands for sub-word navigation and sub-word deletion. These commands will stop at camel case positions and at underscores (_).

Here is an example for how you can bind them:

[
  { "key": "ctrl+alt+right", "command": "cursorWordPartRight", "when": "textInputFocus" },
  {
    "key": "ctrl+shift+alt+right",
    "command": "cursorWordPartRightSelect",
    "when": "textInputFocus"
  },
  { "key": "ctrl+alt+left", "command": "cursorWordPartStartLeft", "when": "textInputFocus" },
  {
    "key": "ctrl+shift+alt+left",
    "command": "cursorWordPartStartLeftSelect",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+alt+backspace",
    "command": "deleteWordPartLeft",
    "when": "textInputFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+alt+backspace",
    "command": "deleteWordPartRight",
    "when": "textInputFocus && !editorReadonly"
  }
]

Snippet placeholder transformations (opens new window)

Snippets finally support placeholder transformations. Placeholder transformations are like variable transformations but more dynamic. A transformation is applied when switching from one placeholder to the next and this is the grammar rule for them: ${int/regex/format_string/opts}.

Below is a sample that replaces "Hello World" with its German counterpart:

"HelloWorld": {
  "prefix": "say_hello",
  "body": "${1} ${2} -> ${1/Hello/Hallo/} ${2/World/Welt/}"
}

Refer to the snippet grammar (opens new window) for more details and how to unleash the full potential of transformations.

Dismiss extension recommendations (opens new window)

We recommend extensions to you based on the files you have opened and your workspace environment. We understand that not every recommendation might be appropriate for your project and so you can now dismiss specific recommendations.

To dismiss a recommendation, click on the extension item to open the Details pane and then press the Ignore Recommendation button. Ignored recommendations will no longer be recommended to you.