News

VS Code January Update: Quickly Fix TypeScript, JavaScript Errors

• By David Ramel
• 02/08/2018

The January 2018 update of Microsoft's Visual Studio Code editor incorporates the new TypeScript 2.7.1 edition, allowing for quicker fixing of errors in TypeScript and even regular JavaScript files.

TypeScript 2.7 recently shipped with many new features, so many that some developers sparked a debate about the language's "bloat."

Bloated or not, the programming language's functionality provides several time-saving features for VS Code 1.20 users. A new Quick Fix lets developers select a flagged error in source code -- such as a method that has been declared but not yet implemented -- and fix it via options provided in the editor's lightbulb icon. If the same error exists in multiple locations in a file, devs can use a new "Fix all in file" option to address them in one action.

VS Code also now provides more intelligence when suggesting properties, such as when you type a dot after a variable name to bring up a list of possible properties that you can choose from. Now, those available properties will be presented even if they contain whitespaces or other non-identifier characters. What's more, choosing one of the suggestions automatically converts it to bracket accessor notation.

"As an example, let's say you want to use a unicorn emoji as one key in your JSON object and another key that contains a space within it," said Microsoft Cloud Developer Advocate Brian Clark in a video. "VS Code can intelligently suggest those keys and provide bracketed completions when you want to use them."

Another new TypeScript feature provides automatic member property suggestions, so when you start typing a property name and select the appropriate property from a list of possible matching properties that pops up, the required "this." prefix will automatically be prepended to the property.

The January 2018 update contains several more new features for TypeScript/JavaScript coding alone, in addition to the huge amount of tweaks to every aspect of the editor. These were provided with the help of dozens of open source community contributors.

In the TypeScript/JavaScript space alone, for examples, new features include:

• Suggestions for optional TypeScript properties are now suffixed with a "?".
• Auto-imports for JavaScript and TypeScript now support importing default exported objects based on filename.
• Developers can extend VS Code's JavaScript and TypeScript language support via TypeScript plugins (for adding additional linting to a file or adding IntelliSense when working within JavaScript template strings, for examples).

Regarding the latter item, the VS Code team explained: "TypeScript plugins were first introduced in TypeScript 2.3, but they previously required installing plugins into your workspace with npm and then configuring a jsconfig.json or tsconfig.json file to load them. VS Code 1.20 simplifies this by allowing extensions to contribute a set of global TypeScript plugins that are automatically activated without any configuration. All you need to do is install the extension."

The team also detailed a slew of other highlights for the release concerning the workbench, editor, languages, debugging and more, boiling them down into this capsule summation:

• Explorer multi-selection -- Perform actions on multiple files at once.
• Improved Settings search -- Easily find the right setting with natural language search.
• Errors & warnings in Explorer -- Quickly navigate to errors in your code base.
• Save large and protected files -- Save Admin protected and >256M files within VS Code.
• Git submodule support -- Perform Git operations on nested Git repositories.
• Global snippets -- Create snippets you can use across all file types.
• Image preview zoom -- Zoom in and out of images with your mouse, scroll wheel or track pad.
• Terminal screen reader support -- Integrated Terminal now has "Screen Reader Optimized" mode.
• Debugging support for multi-root workspaces -- Manage configurations across multiple projects.
• New Node.js deployment tutorials -- Deploy your Node.js app with Docker or Azure App Service.

More information on these and much more can be seen in the latest update post.