March 2018 (version 1.22) (opens new window)

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

• Syntax aware code folding (opens new window) - Adds improved folding for CSS, HTML, JSON, and Markdown files.
• Cross file error, warning and reference navigation (opens new window) - Move quickly around your workspace.
• New Hint suggestions (opens new window) - Makes it easy to spot suggested fixes or refactorings in the editor.
• Convert to ES6 refactoring (opens new window) - New Code Actions to convert to ES6 classes and modules.
• Auto attach to process (opens new window) - Automatically attach the debugger to running Node.js processes.
• Logpoints (opens new window) - Inject logging without changing source code or restarting your debug session.
• Better large file support (opens new window) - Faster syntax highlighting and easily increase memory for very large files.
• Multiline links in the terminal (opens new window) - Paths and URLs can span lines in the Integrated Terminal.
• Emmet wrap preview (opens new window) - Live preview for Emmet's wrap with abbreviation functionality.
• Improved updates on Windows (opens new window) - Automatically updates in the background for less downtime.
• Preview: Organize JS/TS imports (opens new window) - Remove unused and sort remaining imports.

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.22 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:

• Editor (opens new window) - Emmet performance and smart matching improvements, new snippet Date variables.
• Workbench (opens new window) - Smoother scrolling on Windows, automatic save during Search and Replace.
• Debugging (opens new window) - Improved Node.js process picker, postDebugTask in launch.json.
• Tasks (opens new window) - Better command and argument quoting and escaping support.
• Languages (opens new window) - Easier IntelliSense in JSDoc, CSS path completion.
• Extension Authoring (opens new window) - Long running operations with cancellation, add related information to diagnostics.

Syntax aware folding (opens new window)

Folding ranges in HTML, JSON, Markdown, CSS, LESS and SCSS are now, by default, computed based on the language's syntax and no longer rely on well-formed indentation.

Support for TypeScript and JavaScript is also available, and can be enabled by the setting "typescript.experimental.syntaxFolding": true.

If you prefer to switch back to indentation based folding for one (or all) of the languages above, use:

  "[html]": {
    "editor.foldingStrategy": "indentation"
  },

Tip: See how this feature is used for collapsing header regions in Markdown files (opens new window).

A new API for extensions is proposed (opens new window) so that also other languages can provide their syntax aware folding providers.

Error and reference navigation across files (opens new window)

With this release, navigating errors and warnings via F8 (Go to Next Problem) takes all reported errors into account. Instead of looping inside just one file, it will take you to the next file with errors and back.

Similarly, there is a new command to navigate to reference search results. Trigger Find All References on a symbol and now use F4 and Shift+F4 to visit each reference. This is great to make edits in all places that reference a symbol because your fingers don't need to leave the keyboard.

Hints in the editor (opens new window)

The extension API now supports creating 'Hint' diagnostics. They aren't errors or warnings but suggestions how something could be made better, for example, by running a certain refactoring.

We render hint diagnostics with an ellipsis ... under the start of the word in question.

It is a good practice for extension authors to always include a hint with a Code Action as hint diagnostics can help advertise the Code Actions. However, some users might not want to display hints in the editor so also include support for disabling them.

Tip: In this release, we have added several hints for JavaScript/TypeScript refactorings (opens new window).

Wrap with Abbreviation preview

When using either the Emmet: Wrap with Abbreviation or Emmet: Wrap Individual Lines with Abbreviation commands, you can now see a preview of what the wrapped text will look like.

Faster abbreviation expansion

Expanding Emmet abbreviations in large CSS/SCSS/Less files is much faster now. This is achieved by parsing only a small region around the cursor instead of the complete file when trying to determine whether the current location is valid for expanding Emmet abbreviations.

Smarter snippet matching

Emmet abbreviations in stylesheets are fuzzy matched with pre-defined snippets (opens new window) to give you the closest matched result. You can control the fuzzy matching accuracy by changing the css.fuzzySearchMinScore setting in emmet.preferences. css.fuzzySearchMinScore sets the minimum score a snippet needs to be considered a match. Increasing the score will result in fewer but more accurate matches. The default value is 0.3 and you can provide any value between 0 and 1.

"emmet.preferences": {
    "css.fuzzySearchMinScore": 0.3
}

Search include/exclude patterns (opens new window)

The boxes for include and exclude patterns in the Search view have been combined into a single box. The functionality is exactly the same, except that an exclude pattern must be prefixed with !. For example, !*.js will skip searching files that have a .js extension.

Fold Markdown by heading level (opens new window)

You can now fold Markdown documents by heading:

Folding a header collapses all content and subheadings under that header.

Suggestion Code Actions for JavaScript and TypeScript (opens new window)

We've also improved discoverability of JavaScript and TypeScript suggestion Code Actions. These are proposed changes that can help you quickly improve or clean up your source code. They are shown using the lightbulb widget but unlike Quick Fixes, they do not address a specific error or warning in your source code. Example suggestion Code Actions include: convert ES5 class to ES6 class and convert commonjs module to ES6 module.

Suggestion Code Action are now indicated by a ... in the editor:

Move the cursor over the ... and click on the lightbulb or press Ctrl+. to display available Code Actions:

We plan to continue adding additional suggestions. Let us know if you have any that you would like to see.

Suggestion Code Actions are enabled by default in JavaScript and TypeScript. You can disable them by setting: "typescript.suggestionActions.enabled": false or "javascript.suggestionActions.enabled": false

Organize imports for JavaScript and TypeScript (opens new window)

The new Organize Imports command (unassigned) removes unused imports and sorts the remaining imports:

The command works in ES6 modules for both JavaScript and TypeScript.