{"id":225231,"date":"2016-11-28T14:32:09","date_gmt":"2016-11-28T22:32:09","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=225231"},"modified":"2019-05-03T15:08:14","modified_gmt":"2019-05-03T22:08:14","slug":"more-productive-javascript-in-visual-studio-2017-rc","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/more-productive-javascript-in-visual-studio-2017-rc\/","title":{"rendered":"More Productive JavaScript in Visual Studio 2017 RC"},"content":{"rendered":"

We know you choose Visual Studio for JavaScript editing because it provides tools that make you the most productive. In Visual Studio 2017 RC, we\u2019ve been focusing on improving the things you use most so that you can spend even more time focusing on coding. In this post, we will highlight some of the most exciting improvements to IntelliSense and code navigation that are available today in Visual Studio 2017 RC<\/a>.<\/p>\n

Richer IntelliSense<\/h2>\n

JavaScript IntelliSense in Visual Studio 2017 RC will now display much more useful information on parameter and member lists. This additional information is provided by TypeScript<\/a>, which uses static analysis behind the scenes to better understand your code. TypeScript uses several sources to build up this information.<\/p>\n

Rich IntelliSense on jQuery ajax() function<\/i><\/b><\/p>\n

<\/a><\/p>\n

IntelliSense based on JSDoc<\/h3>\n

When the default type inference does not provide the desired type information, type information may be provided explicitly via JSDoc annotations. For example, to give a partially declared object a specific type, you can use the @type<\/code> tag as shown below:<\/p>\n

<\/a><\/p>\n

This is also very useful for specifying parameter information. Using the JSDoc @param<\/code> tag you can add types to function parameters like so:<\/p>\n

<\/a><\/p>\n

See this doc on github<\/a> for the JSDoc annotations currently supported.<\/p>\n

<\/h5>\n

IntelliSense based on TypeScript Declaration Files<\/h3>\n

In the TypeScript world, most popular JavaScript libraries have their APIs described by .d.ts<\/code> files, and the most common repository for such definitions is on DefinitelyTyped<\/a>. Behind the scenes, Visual Studio will use these .d.ts<\/code> files to enrich your IntelliSense.\nVisual Studio will detect which JavaScript libraries are in use and automatically download and reference the corresponding .d.ts<\/code> files. These files are downloaded to a cache located under the user folder at %LOCALAPPDATA%\\Microsoft\\TypeScript<\/code>. (Note: This feature is disabled<\/strong> by default if using a tsconfig.json<\/code> configuration file<\/p>\n

Currently auto-detection works for dependencies downloaded from npm (via reading the package.json<\/code> file), Bower (via reading the bower.json<\/code> file), or loose files in your project that match a list of roughly the top 400 most popular JavaScript libraries. For example, if you have jquery-1.10.min.js<\/code> in your project, the file jquery.d.ts<\/code> will be fetched and loaded. This .d.ts<\/code> file will have no impact on your project other than providing better completions, signatures, and contextual help.<\/p>\n

ES6 and JSX Syntax Support<\/h2>\n

The JavaScript language is constantly evolving and Visual Studio will now help you keep up with language changes by supporting syntax updates much faster. Every year TC39, the ECMAScript standards body, releases official updates to the language. These updates bring new syntax such as classes, arrow functions, and template strings, that provide alternative, more productive ways to write JavaScript. In Visual Studio 2017, syntax through ES7 (ECMAScript 2016<\/a>) including modules, classes, and arrow functions are fully supported.<\/i><\/p>\n

ES6 syntax in Visual Studio 2017 RC<\/i><\/b><\/p>\n

<\/a><\/p>\n

In addition to official language updates, there are also unofficial language extensions like JSX<\/a>, an XML-like extension that is popular in React development, that call for more flexible syntax support. Visual Studio 2017 supports both jsx and tsx file extensions as well as JSX syntax dropped directly in JS and TS files.<\/p>\n

JSX syntax in Visual Studio 2017 RC<\/i><\/b><\/p>\n

<\/a><\/p>\n

General Improvements<\/h2>\n

In addition to language specific improvements, you will also benefit from several general code navigation improvements. Go To, a completely new navigation feature, allows you to quickly perform complete searches to find types, functions, files, and more. Results can be filtered down based on category, to provide a single location for fast code navigation.<\/p>\n

Navigation with Go To (ctrl + t or ctrl + ,)<\/i><\/b><\/p>\n

<\/a><\/p>\n

When working with large projects or libraries, often the number of results in completion lists can get quite large. To help you quickly cut down the size of these lists, you can now filter the completion lists by categories such as functions and properties. All of these filters can be quickly toggled with logical hotkeys, which can be easily discovered by hovering over the filter button icons in IntelliSense.<\/p>\n

IntelliSense filtering on functions (alt + m)<\/i><\/b><\/p>\n

<\/a><\/p>\n

To read more about the above improvements and get an overview of all the general productivity improvements coming in Visual Studio 2017, check out this post by Mark Wilson-Thomas on Productivity Improvements in VS 2017 RC<\/a>.<\/p>\n

Send Feedback<\/h2>\n

We hope you\u2019re excited to take your JavaScript development productivity to a new level in Visual Studio 2017 RC<\/a>. Check out this quick video<\/a> to see some of the above features in more detail, but we encourage you to download it yourself and give it a spin. Feel free to log any problems using the Report a Problem<\/a> tool in the upper right corner of the IDE or the installer. You can also submit any suggestions through UserVoice<\/a>.<\/p>\n

Happy hacking!<\/p>\n\n\n\n
<\/td>\nBowden Kelly<\/strong>, Program Manager, VS Client\n@bowdenk7<\/a><\/p>\n

Bowden works on the JavaScript editing experience with a focus on helping developers be more productive in Visual Studio. Outside of work he enjoys playing soccer, teaching the basics of programming, and attempting to be a triathlete.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

We know you choose Visual Studio for JavaScript editing because it provides tools that make you the most productive. In Visual Studio 2017 RC, we\u2019ve been focusing on improving the things you use most so that you can spend even more time focusing on coding. In this post, we will highlight some of the most […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[124,526,156],"class_list":["post-225231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-javascript","tag-productivity","tag-visual-studio-2017"],"acf":[],"blog_post_summary":"

We know you choose Visual Studio for JavaScript editing because it provides tools that make you the most productive. In Visual Studio 2017 RC, we\u2019ve been focusing on improving the things you use most so that you can spend even more time focusing on coding. In this post, we will highlight some of the most […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/225231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=225231"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/225231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=225231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=225231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=225231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}