July 2018 (version 1.26) (opens new window)

Welcome to the July 2018 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:

• Breadcrumbs (opens new window) - Breadcrumb navigation lets you jump to symbols and files in your workspace.
• Quick Fixes from Problems panel (opens new window) - Apply code fixes while reviewing warnings and errors.
• User setup on Windows (opens new window) - Elevation no longer required during Windows setup.
• Terminal column selection (opens new window) - Alt+click to select blocks of text in the integrated terminal.
• Add all missing imports (opens new window) - Single action to add all missing imports in a JavaScript/TypeScript file.
• JSX tag completion (opens new window) - Work with JSX tags in JavaScript/TypeScript just like you do in HTML.
• Better JS/TS error reporting (opens new window) - Concise, clear messages with relevant source code links.
• Improved extension search (opens new window) - Filter Marketplace queries to find the extensions you want.
• Extension Pack management (opens new window) - Manage Extension Packs as a single unit or by individual extension.
• Preview: Settings editor (opens new window) - Rich settings description display, "Table of Contents" tracks scrolling.

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.26 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) - New View menu layout, copy relative path action, offline mode.
• Integrated Terminal (opens new window) - Improved multiline support, rendering improvements.
• Languages (opens new window) - Convert named imports to namespace imports, JSX folding.
• Debugging (opens new window) - Improved stop session and smart step debugging.
• Preview Features (opens new window) - Themable custom tool and menu bar for Windows and Linux.
• Extension Authoring (opens new window) - QuickInput API, extensionPack declaration, webview titlebar icons.

Breadcrumbs (opens new window)

The editor now has a navigation bar above its contents - we call it Breadcrumbs (opens new window). It shows the current location and allows you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Show Breadcrumbs command or via the breadcrumbs.enabled setting.

When using editor tabs (opens new window) (default), breadcrumbs are displayed in a separate row below the editor title. If you are not using (opens new window) editor tabs, breadcrumbs show as an interactive file path next to the title.

Breadcrumbs always show the file path and, with the help of extensions, the symbol path up to the cursor position. The symbols shown are the same as in Outline view and Go to Symbol and so existing extensions will just work with breadcrumbs.

The appearance of breadcrumbs can be customized. If you have very long paths or are only interested in either file paths or symbols paths, you can use the breadcrumbs.filePath and breadcrumbs.symbolPath settings. Both support on, off, and last and they define if or what part of the path you see.

To interact with breadcrumbs, use the Focus Breadcrumbs command or press Ctrl+Shift+.. It will select that last element and open a dropdown that allows you to navigate to a sibling file or symbol. Use the Left and Right keyboard shortcuts to go to elements before or after the current element. When the dropdown appears, simply start typing - all matching elements will be highlighted and the best match will be selected for quick navigation.

You can also interact with breadcrumbs without the picker. Press Ctrl+Shift+; to focus the last element, use Left and Right to navigate, and use Space to reveal the element in the editor.

Run npm scripts from package.json (opens new window)

You can now run an npm script in a package.json file from the hover as shown below or from the context menu.

JSX tag completion (opens new window)

JSX tags are now closed automatically when you type > in a JavaScript or TypeScript file:

This behavior matches what VS Code already provided in HTML files. Auto closing of tags can be disabled by setting "javascript.autoClosingTags": false and "typescript.autoClosingTags": false.

Add all missing imports Quick Fix (opens new window)

The Add missing import Quick Fix can now be applied to all missing imports in a JavaScript/TypeScript file:

This Quick Fix will only add imports for symbols with a single potential definition. If there are multiple potential definitions of a symbol in the current project, for example having two different files export a symbol called Button, you must Quick Fix the individual error and select the specific import that you intended.

To use this Quick Fix in JavaScript files, enable semantic checking (opens new window).

JSX folding (opens new window)

JSX tags are now foldable when using syntax aware folding (opens new window).

Convert between named imports and namespace imports (opens new window)

Two new refactorings let you quickly convert between named imports and namespace imports in JavaScript and TypeScript: