Visual Studio

Why Visual Studio 2017? Let Us Try It - Part Two

In this article, we are going to see some features of the brand new Visual Studio 2017. This is the second article of Visual Studio 2017 series. Please note that this is not the complete series of new functionalities of Visual Studio 2017; here, I am going to share only a few things to get you started with Visual Studio 2017. I hope you will like this.

Now, let’s begin.

You can always see this article on my blog here.

Download Source Code

Background

You can get the first part of this series here. If you have never used Visual Studio, you can find some articles and code snippets related to Visual Studio at this link.

Let’s start then

Let’s say you have an MVC application with a Model Customer, as follows.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace VS2017Features.Models {  
  6.     public class Customer {  
  7.         public string CustId {  
  8.             get;  
  9.             set;  
  10.         }  
  11.         public string CustName {  
  12.             get;  
  13.             set;  
  14.         }  
  15.         public string CustCode {  
  16.             get;  
  17.             set;  
  18.         }  
  19.     }  
  20. } // This is just a sample script. Paste your real code (javascript or HTML) here.  
  21. if ('this_is' == /an_example/) {  
  22.     of_beautifier();  
  23. } else {  
  24.     var a = b ? (c % d) : e[f];  
  25. }  
And a Controller.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using VS2017Features.Models;  
  7. namespace VS2017Features.Controllers {  
  8.     public class HomeController: Controller {  
  9.         // GET: Home  
  10.         public ActionResult Index() {  
  11.             List < Customer > lstCust = new List < Customer > ();  
  12.             Customer cst = new Customer() {  
  13.                 CustId = "1",  
  14.                     CustName = "Royal Enfield",  
  15.                     CustCode = "CST01"  
  16.             };  
  17.             lstCust.Add(cst);  
  18.             return View(lstCust);  
  19.         }  
  20.     }  
  21. }  
As of now, I am not going to explain the codes, as it is pretty clear and easy. Now, we are going to see the preceding topics.
  • Run execution to here feature
  • The new exception handler
  • Redesigned attach to process box
  • Reattach to process
  • What is there for JavaScript developer in VS2017

Run execution to here feature

Let’s say we have a break point in our code.


Run_execution_to_here_in_VS2017

Have you noticed that there is a small green color icon in the image, in which you get the text “Run execution to here” while hovering over it? Well, this is a new feature in VS2017, if you click on the icon which is near to any line of code, the execution will hit at that point. That’s pretty simple. Now, you don’t need to put any unwanted breakpoints for checking out the execution line by line while debugging.

Now, what if you are using this feature in a loop? Let’s modify our Controller code as below.

  1. public class HomeController: Controller {  
  2.     // GET: Home  
  3.     public ActionResult Index() {  
  4.         List < Customer > lstCust = BuildCustomer();  
  5.         return View(lstCust);  
  6.     }  
  7.     private static List < Customer > BuildCustomer() {  
  8.         List < Customer > lstCust = new List < Customer > ();  
  9.         for (int i = 0; i < 5; i++) {  
  10.             Customer cst = new Customer() {  
  11.                 CustId = i.ToString(),  
  12.                     CustName = $ "CustName{i}",  
  13.                     CustCode = $ "CST{i}"  
  14.             };  
  15.             lstCust.Add(cst);  
  16.         }  
  17.         return lstCust;  
  18.     }  
  19. }  
And the View is -
  1. @model IEnumerable < VS2017Features.Models.Customer > @ {  
  2.     ViewBag.Title = "Index";  
  3. } < h2 > Index < /h2> < style > th, td, tr {  
  4.     border: 1 px solid# ccc;  
  5.     padding: 10 px;  
  6. } < /style>  
  1. < table>  
  2.     < thead>  
  3.         < tr>  
  4.             < th> Cust Id  
  5.                 < /th>  
  6.                     < th> Cust Name  
  7.                         < /th>  
  8.                             < th> Cust Code  
  9.                           /th>  
  10.                       < /tr>  
  11.                   < /thead>  
  12.            < tbody> @foreach(var item in Model) {  
  13.          < tr>  
  14.        < td> @item.CustId  
  15.       < /td>  
  16.        < td> @item.CustName  
  17.       < /td>  
  18.       < td> @item.CustCode  
  19.     < /td>  
  20.  < /tr> }  
  21. < /tbody>  
  22. < /table>  
Now, let’s run our application.


Applciation_output

Put a breakpoint in the loop. When you run, you can see that the value of it is getting incremented which means the iterations are happening. Once the iterations are over, the execution comes out. Please note that you can always come out of this loop by changing the execution point.


Run_execution_to_here_in_loop_1


Run_execution_to_here_in_loop_2

The new exception popup

The new exception box is really handy which can be resized. As an additional feature the inner exceptions are added to the pop up itself. However, there is no need to search for the inner exceptions now. To create an exception, we can call the following function.

  1. private void MakeDivideByZeroException() {  
  2.     throw new DivideByZeroException();  
  3. }  
Once you call the above function, you can get an error as follows.


The_new_exception_box

If you click on the view details, a quick watch popup with the error information will be opened.


Quickwatch_in_VS2017

Under the exception settings, you can always set whether you need to throw this type of exception only for the particular DLL or for every DLL.

Redesigned Attach to process box

We all know how we can attach to a process in Visual Studio. But have you ever thought, if we have a search box to search a process and attach to it, it would make the task easier? No worries; in VS2017, you get that. To see the redesigned Attach to process window, please click on Debug -> Attach to process.


Redesigned_attach_to_process

Now, we have attached our process which was running in Microsoft Edge browser. Wait, the game is not over yet. Please click on the Debug option, you can see an option called Reattach to process. What is that? This option gives you an advantage to reattach the recent process that you already attached. That’s cool right? If you have one or more instance of the same process, it will ask you to select which ever one you needed.

What is there for a JavaScript developer in VS2017

VS2017 has lots of improvements for JavaScript language. Let’s find out a few of them.

  • Advanced JavaScript intellisense
  • Added ECMAScript 6
  • Introduction of JS Doc
  • New Rename options in JavaScript
  • Find all references of functions or classes

Advanced JavaScript intellisense

VS2017 has advanced intellisenses for JavaScript. We don’t need to remember the parameters for the in built functions of JavaScript. For example, if you typed jQuery.ajax() you can see the parameters of the functions as follows.


Advanced_JavaScript_intellisence

The best thing is, it is even shows the exact type of the parameter. Yeah, JavaScript types are dynamic, so no one was creating a proper documentation for JavaScript functions. Now we have an option.

If you right click on the ajax() function and click on Go To Definition, you can see the definition in a .ts file (TypeScript) as follows.

  1. /** 
  2.  
  3. * Perform an asynchronous HTTP (Ajax) request. 
  4.  
  5. * 
  6.  
  7. * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup(). 
  8.  
  9. * @see {@link https://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings} 
  10.  
  11. */  
  12. ajax(settings: JQueryAjaxSettings): JQueryXHR;  
  13. /** 
  14.  
  15. * Perform an asynchronous HTTP (Ajax) request. 
  16.  
  17. * 
  18.  
  19. * @param url A string containing the URL to which the request is sent. 
  20.  
  21. * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup(). 
  22.  
  23. * @see {@link https://api.jquery.com/jQuery.ajax/#jQuery-ajax-url-settings} 
  24.  
  25. */  
  26. ajax(url: string, settings ? : JQueryAjaxSettings): JQueryXHR;  
In VS2017, all JavaScript related documentations are handled by these TypeScript files.

 

Added ECMAScript 6

In VS2017, the new ECMAScript 6 features are added which are more intuitive and OOP-style. So we can always use those in our application. Shall we start now?

  1. class Operations {  
  2.     constructor(x, y) {  
  3.         this.x = x;  
  4.         this.y = y;  
  5.     }  
  6.     add() {  
  7.         return (this.x + this.y);  
  8.     }  
  9. }  
  10. var myObj = new Operations(1, 2);  
  11. console.log(myObj.add());  
If you run the above code, you can see an output as follows.


JavaScript_Class_Output

Now how can you rewrite the above code to lower ECMAScript version? I leave it to you. You can always read more about ECMAScript6 here.

JSDoc

Documenting a JavaScript fucntion was a tough task, but not anymore. In VS2017, this makes simple. Let’s check it out. By pressing /** you can easily document your JavaScript functions and classes. Let us rewrite the class and function as preceding.

  1. /** 
  2.  
  3. * This class performs arithmetic operations  
  4.  
  5. */  
  6. class Operations {  
  7.     /** 
  8.  
  9.     * Operations class constructor 
  10.  
  11.     * @param {any} x 
  12.  
  13.     * @param {any} y 
  14.  
  15.     */  
  16.     constructor(x, y) {  
  17.         this.x = x;  
  18.         this.y = y;  
  19.     }  
  20.     /** 
  21.  
  22.     * Add function 
  23.  
  24.     */  
  25.     add() {  
  26.         return (this.x + this.y);  
  27.     }  
  28. }  
  29. var myObj = new Operations(1, 2);  
  30. console.log(myObj.add());  
You can even set the type of the parameter.


Set_default_type_for_the_parameter_in_JSDoc

If you change the type in the JSDoc, the same will reflect in when you create an instances or calling the functions.


JSDoc_reflects_while_creating_instances

New Rename options in JavaScript

You can now right click on any function name or class name and easily rename those in all references.


New_Rename_option_in_JavaScript

Find all references of functions or classes

You can now find the references of your functions or classes easily, just right click and click on Find all references.


Find_all_references_in_JavaScript

That’s all for today. I will come with another set of features of Visual Studio 2017 very soon. Happy coding!.

References

See also

Conclusion

Did I miss anything that you may think is needed? Did you find this post  useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs