VS2017十五項新功能體驗

Visual Studio 2017十五項新功能體驗

Visual Studio 2017正式已經於2017.3.7號正式發布，選在這一天發布也是為了紀念Visual Studio 二十周年。MVP 2017技術峰會將於這個周末（3.17）在北京舉辦，由於正在外地出差不能前往參加很是遺憾。我是從Visual Studio 6一路走過來的一線開發人員，親歷.NET （自2002年接觸）開發這15年的變化。從Visual Studio 2003的ASP.NET Form到ASP.NET MVC，最后到AngularJS +Bootstrap，從Windows Forms到WPF。走技術的變更與業務領域結合的路線，一直對.NET開發很有信心。

安裝Visual Studio 2017

從微軟網站下載安裝文件visual_studio_enterprise_2017_x86_x64.exe，只有不到1MB大小。這只是一個引導程序(Web Installer)，啟動之后勾選需要的組件即可進行安裝。

我只勾選了.NET desktop Development和ASP.NET and web development兩項，右下角顯示需要5.33G磁盤空間。點擊Install之后開始安裝。

我的電腦配置是i5 6400，128G固態硬盤，安裝過程耗費時間約10分鍾。安裝完成之后需要重啟一下電腦。

啟動之后如下圖所示，看到期待的.NET Core和.NET Standard。J

Visual Studio 2017 新功能

1. Filtered IntelliSense

IntelliSense可以大量節省敲擊代碼的時間。以往的IntelliSense會根據當前字母所在的上下文自動判斷，並查找合適的匹配字符供用戶挑選。新版本的加入Filtered特性，下面的幾點按鈕依次是

• Locals and Parameters –  局部變量
• Constants –  常量
• Properties –  屬性
• Fields –  字段
• Methods –  方法
• Interfaces – 接口
• Classes –  類型
• Modules –  模塊
• Structures – 結構
• Enums – 枚舉
• Namespaces – 命名空間
• Keywords – 關鍵字
• Snippets – 腳本

點擊相應的按鈕會過濾IntelliSense的結果，以便更精確的查找需要的數據。

2. Predictive IntelliSense

這一項功能也非常實用，參考下圖

當我們在dtReturns.Rows.Add方法的參數中輸入值時，它會智能的匹配當前上下文環境中匹配的數據。因為Rows.Add方法的參數接受數組類型或是DataRow，Predictive IntelliSense會找出當前環境中能夠匹配此參數類型是的數據項。再參考一個例子：

我們在屬性上面輸入特性(Attribute)，Predictive IntelliSense會根據當前的屬性類型提示出StringLength特性。

當我們在在int類型的屬性上添加特性時，它提示出MaxLength特性，正好可應用於當前的屬性。

3. Find All References

這個特性在ReSharper中早已經存在，Visual Studio終於將它內置進來。

ReSharper的Find All References可以做的更深一點，對於查找所有字段或屬性的引用，它將Set或Get分開顯示，也就是可以看出有哪些地方是引用變量的值，

有哪些地方是設置變量的值。在大型系統調試變量的值時，這個特性會非常有用。

4. Run-To-Click

這個功能強化了以前的Run to Cursor。以前我們需要點擊鼠標右鍵，選Run to Cursor，現在只需要在相關的行前面，點擊小綠色按鈕，將可實現將代碼運行到此處。

5. Run-To-Click Performance Tips

這個功能第4點屬於同一組Enhancement，參考下圖：

當我們勾選了Run to Click之后，程序運行到當前行，在當前行的代碼之后，會顯示<1ms elapsed這樣的字樣，表示運行到這一句耗費的時間。

6. Open Folder

在Start Page中有一項Open Folder，可用於打開Windows Explorer，點擊之后打開默認位置C:\Users\Administrator\Documents\Visual Studio 2017\Projects

7. Installation Nickname

Visual Studio 2017有三個版本Enterprise,Professiona, Community，我們可以在同一台機器中同時安裝這三個版本的Visual Studio。在安裝時只需要指定不同的別名(Nickname)即可。

這會導致一個擴展插件，需要分別勾選要安裝到的Visual Studio版本，如下圖所示。

8. Improved Code Navigation

Visual Studio改善Go to All，相比之前的Go To，可以更有效率的找到需要的數據。我們在任意地方敲擊Ctrl + ,

Visual Studio 可以幫忙找到文件，類型，符號等匹配項，快速導航到需要的地方。

9. Attach to Process Filter

附加到進程現在支持按進程名稱過濾，參考下圖。

在可用進程(Available Processes)列表的右上角，有一個帶Filter Processes水印的文本框，可以對進程名稱過濾。

10. The New Exception Helper

經過改善的異常輔助器如下圖所示。

我們點擊Edit Conditions可編輯中斷條件。

其實還有做的更好的OzCode的Exception Helper，它可以快速幫忙定位到哪里拋出異常(Throw Exception)，哪里處理異常(Handle Exception)。在大量系統中查找數據異常非常方便。

11. Live Unit Testing

當跑一次單元測試之后，Visual Studio可以顯示代碼覆蓋率，通過代碼行前面的綠色勾或紅色叉，可以區別分運行過的代碼路徑與沒有跑的代碼路徑。

這個功能也不算新鮮，dotCover多年以前就具備這個功能。

12. Redgate Data Tools Included with Visual Studio

Redgate的SQL 工具直接集成到Visual Studio中以輔助快速編寫SQL語句和管理與部署數據庫。它們分別是

· Redgate ReadyRoll Core, 數據庫升級與自動化部署

· Redgate SQL Prompt Core, SQL語句智能提示

· Redgate SQL Search, 數據庫搜索

Redgate 開發了大量的.NET開發人員必備的工具，如.NET Reflector,SQL Prompt,dotPerformance。如今直接集成到Visual Studio中變成官方支持版本，可見其相當完善，市場占有率高。

當年Visual Studio集成了水晶報表，讓Crystal Report成為報表制作的工業標准。微軟之后開發出自己的SQL Server Reporting Services，Crystal Report便不再直接集成在Visual Studio安裝包中。

13. TypeScript 2.1

項目中用到AngularJS，JavaScript也是由TypeScript生成。TypeScript是一種設計時語言，最終是為了生成JavaScript，它有強類型語言的特點，配合Visual Studio開發工具，項目中JavaScript代碼的可維護性和質量大大提升。

Array 數組類型

TypeScript	JavaScript
var array: string[] = ['test', 'dummy']; var first: string = array[0];	var array = ['test', 'dummy']; var first = array[0];

Primitive 基本類型

TypeScript	var name = { firstName: 'Homer', lastName: 'Simpson' }; name.firstName = 2; //This gives compile time error
JavaScript	var name = { firstName: 'Homer', lastName: 'Simpson' }; name.firstName = 2; //No Error in JavaScript

Type Inference類型決斷

TypeScript	var dummy; //any type var num = 10; //number var str = 'Hello TypeScript'; //string var bln = true; //boolean var stringArray = ['Homer', 'Simpson']; //string[]
JavaScript	var dummy; var num = 10; var str = 'Hello TypeScript'; var bln = true; var stringArray = ['Homer', 'Simpson'];

TypeScript	var addFunction = function (n1: number, n2: number, n3: number) { var sum = n1 + n2 + n3; return sum; }; var str1: string = addFunction(10, 20, 30); //Gives compile time error as return type of a function is number and is being assigned to a string var sum: number = addFunction(10, 20, 30); // This works var result = addFunction(10, 20, 30); // This also works
JavaScript	var addFunction = function (n1, n2, n3) { var sum = n1 + n2 + n3; return sum; }; var str1 = addFunction(10, 20, 30); var sum = addFunction(10, 20, 30); var result = addFunction(10, 20, 30);

Optional Type 可選參數

TypeScript	var addFunction = function (n1: number, n2: number, n3?: number) : number { var sum = n1 + n2 + n3; return sum; }; var sum: number = addFunction(10, 20);
JavaScript	var addFunction = function (n1, n2, n3) { var sum = n1 + n2 + n3; return sum; }; var sum = addFunction(10, 20);

Classes and Interface 類和接口

TypeScript

class Student { private firstName: string; private lastName: string; yearOfBirth: number; //Public scope by default schoolName: string; city: string; //Constructor constructor(firstName: string, lastName: string, schoolName: string, city: string, yearOfBirth: number) { this.firstName = firstName; this.lastName = lastName; this.yearOfBirth = yearOfBirth; this.city = city; this.schoolName = schoolName; } //Function age() { return 2014 - this.yearOfBirth; } //Function printStudentFullName(): void { alert(this.lastName + ',' + this.firstName); } }

JavaScript

var Student = (function () { //Constructor function Student(firstName, lastName, schoolName, city, yearOfBirth) { this.firstName = firstName; this.lastName = lastName; this.yearOfBirth = yearOfBirth; this.city = city; this.schoolName = schoolName; } //Function Student.prototype.age = function () { return 2014 - this.yearOfBirth; }; //Function Student.prototype.printStudentFullName = function () { alert(this.lastName + ',' + this.firstName); }; return Student; })();

代碼來自於TypeScript - 101 : The Basics，地址是https://www.codeproject.com/Articles/802722/TypeScript-The-Basics

14. Quick Actions and Refactorings

代碼重構。這項功能早就集成在Resharper中。

這一功能可以將對象的賦值語句塊轉化為對象初始化寫法。

out內聯

空值檢查

15. Chrome Debugging Support

Visual Studio可以調試運行在Chrome中的JavaScript腳本。也可以調試由TypeScript生成的JavaScript腳本。在Chrome中啟動調試時，只需要在相應的腳本文件中放入

Debugger中斷，再啟動Chrome的調試模式，Chrome會在代碼執行到debugger時中斷，此時可單步調用TypeScript文件。