August 2017 (version 1.16) (opens new window)

Welcome to the August 2017 release of Visual Studio Code. There are a number of significant updates in this version that we hope you will like, some of the key highlights include:

• JavaScript/TypeScript refactoring (opens new window) - Easily extract source code into methods and functions.
• HTML tag auto close (opens new window) - Improved editor productivity with automatic close tags.
• Color picker in HTML (opens new window) - You can now use the VS Code color picker in HTML files.
• Integrated Terminal quick open (opens new window) - Create or jump to terminals from VS Code Quick Open.
• Drag and drop from search (opens new window) - Quickly open files from Search and also the Problems panel.
• Multiple SCM providers (opens new window) - You can now have multiple active source control providers.
• New online documentation (opens new window) - New Emmet topic and updates to the Node.js Deployment tutorial.
• VS Code "recipes" repository (opens new window) - Examples using React, Angular and Docker in VS Code.
• Preview: Multi-root workspaces (opens new window) - Smoother UI when adding folders and creating a Workspace (Insiders build).
• Multi-root tips for extension authors (opens new window) - Update your extension to work seamlessly with multi-root workspaces.

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.16 release highlights video (opens new window) from 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) - Improved Extension sandboxing, more theme colors.
• Editor (opens new window) - Undo stack detects file changes, smooth scrolling, Braille support
• Integrated Terminal (opens new window) - Better text selection on Linux and Windows, search history support.
• Languages (opens new window) - TypeScript 2.5, JSDoc type assertions, Markdown Preview refresh command.
• Extension Authoring (opens new window) - API updates and guidelines to support multi-root workspaces.

Drag and drop from Search results and Problems panel (opens new window)

You can now drag files from the Search results and Problems panel over the editor area to control where these should open. The File Explorer always supported this and we have now expanded that feature to other regions of the UI.

Open a folder via drag and drop (opens new window)

VS Code has always supported dragging a folder from outside VS Code into it to open the folder. VS Code stills support this, but the visual feedback is changed a little bit. Previously you could drop the folder anywhere in VS Code to open it. With this release, you need to drop the folder over the editor area to open it. This change is due to both a technical reason (an Electron update) as well as an explicit decision to make the multi-root experience better. If you are using VS Code Insiders with multi-root support, you will be happy to hear that you can now drop a folder into the File Explorer to add it to the workspace.

Smooth scrolling (opens new window)

Thanks to the work of @JD342 (opens new window) in PR #25286 (opens new window), the editor now has a new option, editor.smoothScrolling, that will make the editor scroll with an animation. Once enabled, scrolling between different locations when using Page Up or Page Down, when cycling through find matches, when jumping to a definition in the same file, and when using the mouse wheel will be animated.

Note: Our platform currently does not support differentiating between scrolling initiated by a touchpad or a physical mouse wheel, and we currently use a heuristic to determine if smooth scrolling should be applied.

Emmet suggestions as snippets (opens new window)

Emmet in suggestions/auto-completion list is most helpful when it is in the top few choices. There are two scenarios where Emmet suggestions can get pushed down the list:

• You have set editor.snippetSuggestions to top and so default/user/extension snippets are on top of your suggestion list.
• When working on stylesheets, Emmet suggestions get sorted alphabetically among other CSS suggestions.

To ensure Emmet suggestions stay on top of the suggestion list, set the new emmet.showSuggestionsAsSnippets to true and editor.snippetSuggestions to top.

Emmet preferences (opens new window)

The setting emmet.preferences as documented in Emmet Preferences (opens new window) was discontinued in the last release as the new modular approach in Emmet 2.0 (opens new window) did not support them.

We are bringing back support for a few of these preferences via the setting emmet.preferences:

• css.propertyEnd
• css.valueSeparator
• sass.propertyEnd
• sass.valueSeparator
• stylus.propertyEnd
• stylus.valueSeparator
• css.unitAliases
• css.intUnit
• css.floatUnit

If you want support for any of the other preferences, please log a feature request (opens new window) for the same.

Snippets (opens new window)

There is a new snippet variable: $TM_FILENAME_BASE. It resolves to the filename without extension, so from /my/super/file.ts it resolves to file.

HTML close tags (opens new window)

Tag elements are now automatically closed when > of the opening tag is typed:

The matching closing tag is inserted when / of the closing tag is entered:

The new behavior is enabled by default and can be turned off with the setting html.autoClosingTags

Thanks to Jun Han (opens new window) for leading the way with his Auto Close Tag (opens new window). Note that the Auto Close Tag extension has more features, in particular, it can be enabled for languages other than HTML as well.

JavaScript and TypeScript refactorings (opens new window)

The new Extract method and Extract function code actions allow you to quickly refactor complex JavaScript or TypeScript code into new methods or functions:

Simply select some code, then click on the lightbulb in the gutter or press (⌘.) to see available refactorings. Source code fragments can be extracted into a new method, or into a new function at various different scopes.

JSDoc type assertions (opens new window)

You can now use write JSDoc type assertions in JavaScript files:

// @ts-check

const img = /** @type {HTMLImageElement} */ (document.getElementById('#cat'))
img.src = './cat.gif'

This is particularly useful when using @ts-check to enable type checking in your JavaScript code (opens new window).

Markdown preview refresh command (opens new window)

The new Markdown: Refresh Preview command allows you to manually refresh the contents of a Markdown preview.

This can be used to reload images that have been modified on the file system.