Visual Studio 2015 讓 JavaScript 編輯器更威了！
想要在多種不同的平台上進行開發，像是 web、mobile app 和伺服器程式設計，JavaScript 可以說是相當重要的技術。在 Visual Studio 2013 上，我們已經支援 IntelliSense、查看定義、語法上色和 JavaScript 程式碼的格式化以及其他功能。這些功能我們都將帶到 Visual Studio 2015 上，另外，為了讓 JavaScript 開發人員可以有更好的開發體驗，我們針對以下三大關鍵領域做了強化：
- 在使用 JavaScript 函式庫時可以有更好的開發體驗
- 添加對新 JavaScript ECMAScript 2015 (也被稱為 ES2015 和以前的 ES6) 語言和 web 瀏覽器的 API 支援
- 在複雜的 JavaScript 程式碼中提高您的生產力
之所以會選擇上述三大方向，是因為我們統整了 UserVoice、在 Visual Studio 中的發送笑臉 / 哭臉功能、社群網站及一些面對面的開發者大會上得到的資訊，進而決定出來的。
在這篇文章中，我們將介紹 JavaScript 編輯器於上述三大關鍵領域上的新特點，而您可以在所有 Visual Studio 支援的 JavaScript 專案上進一步試試看這些新功能。
對 JavaScript 函式庫的支援
AngularJS 1.x 和 RequireJS 的支援
在預設情況下，Visual Studio 2015 支援現在非常流行的 AngularJS 和 RequireJS 函式庫。在之前的文章中我們曾討論過在 Visual Studio 2013 中使用這兩個函式庫的設定需求 (在 VS 中使用 AngularJS，在 VS 中使用 RequireJS)。在 Visual Studio 2015 中，這些都是內建的，無需再進行任何額外安裝。
每當您在程式碼中引用的 angular.js (或 angular.min.js) 函式庫，編輯器會自動提供 IntelliSense、查看定義和導覽等功能的支援：
上圖顯示 IntelliSense 對 Angular 1.3 的支援，在這裡了秀出對 routeProvider 服務的建議選項
同樣地，當您使用 require.js 函式庫，RequireJS IntelliSense 和導覽等功能會自動開啟，若要自訂 RequireJS 支援，請參閱 於 RequireJS 中自訂 IntelliSense一文。
上圖顯示使用 RequireJS 時會提供給模組的 IntelliSense 建議選項
JSDoc 文件註解
文件註解可於您的應用程式內提供 API 細節，可以說是一個很了不起的工具。更重要的是，它幫助你在撰寫程式碼時，讓 Visual Studio 可以提供更好的 IntelliSense 建議。在 Visual Studio 2015 中，編輯器將可以理解 JSDoc 樣式的文件註解，並可使用它們來提升您的的程式體驗。JSDoc 已成為 JavaScript 非官方的標準，被用於像是 Angular 和 Ember 這樣的函式庫中。以下是一個簡單的例子，將說明如何使用這些註解，並顯示 IntelliSense 提示工具對 getPhotos() 函式的支援。
上圖為 IntelliSense 提示工具中所顯示的 JSDoc 註解
當你引用註解中的參數類型 (如陣列)，您可以使用標準內建的 JavaScript 類型和物件，像是字串、 數字或陣列。您還可以定定義出一個自訂物件，這對記錄參數的自訂屬性 (如配置設定) 來說相當實用。在下面的範例中，您可以看到使用 savePhoto() 函式時，提供給 options 這個物件的建議。
上圖顯示如何使用 JSDoc 來記錄設置物件
除了 JSDoc 註解， Visual Studio 2013 版中的 XML 樣式文件註解 也會繼續提供支援。編輯器對 JSDoc 標籤支援的完整清單可以在 MSDN 上找到。
新的語言和瀏覽器功能
隨著語言標準和 Web API 的進化，JavaScript 編輯器也會更新，在此版本中我們將介紹對於 ES2015 標準(原名 ES6) 和一組組新的 DOM API，所提供的新語言功能支援。這些更新都將對應到我們最近宣布的 Microsoft Edge 瀏覽器。
ECMAScript 2015 (原名 ECMAScript 6) 的支援
如同 Microsoft Edge 瀏覽器，現在將支援一整組的 ES2015 功能，Visual Studio 2015 JavaScript 編輯器會支援 ES2015Specifically 和以下項目：
- 類別
- 箭頭功能 (也稱為 lambdas)
- 範例字串
- Rest / Spread運算元
- 物件文本增強功能
- Proxy 物件
- Symbol 物件
- 新的 ES2015 API，像是 Map、Set、Weakmap、Weakset、Promises，和其他各種 API 的變動。
有了這些支援，您就能夠寫出以下程式碼：
上圖顯示 ES2015 中新的語言功能
注意上圖中 LayoutManager> 類別使用了 class 這個關鍵字，而在 message 變數中使用了範本字串的功能，還有在 addEventListener API 中使用了箭頭(=>）來定義 callback 函式。如果想要瞭解更多詳情，可以參閱由 Eric Douglas 所整理公開在 GitHub 上的 ES6 Learning，或是檢閱 ES2015 version of JavaScript 規格書。
你可能已經注意到一些 ES2015 功能還沒被支援，例如模組。我們了解支援最新的 ES2015 語言功能是相當重要的，所以我們將儘快支援完整的 ES2015。
新網頁瀏覽器 API 的 IntelliSense
Visual Studio 2015 將於 Microsoft Edge 中提供新網頁瀏覽器 API IntelliSense 支援。下面是幾個 API 亮點：
您可以看到在 https://status.modern.ie 和 於預覽版中釋出的可用 API中看到完整清單。
在複雜的 JavaScript 程式碼中工作
最後，我們從開發人員中聽到了一個狀況，在複雜的 JavaScript 原始程式碼中，有時會很容易迷路。我們已添加了兩個編輯器功能，來幫助您在 JavaScript 原始程式碼中挖掘出重要的註解和 API，如此一來您將可以更輕鬆地進行程式設計。
工作清單
您可以使用 Visual Studio 工作清單來持續追蹤 // TODO，// HACK，// UNDONE，或您程式碼中的自訂註解標記。這將有助於您偵測出程式碼中的技術問題。
上圖顯示使用工作清單來查看 JavaScript 原始程式碼中的 TODO 和 HACK 註解
導覽列
導覽列對於 JavaScript 開發人員來說，是很常被使用的功能，因為它可以幫助您快速跳到您常使用的地方，大大減少肉眼審視原始檔案的時間。
在下面的範例中，您可以看到編輯器是如何理解 ECMAScript 5 原始程式碼：
上圖顯示使用 ES5 編寫時，使用導覽列來瀏覽 JavaScript 原始程式碼
另外一個例子，您可以看到導覽列支援新的 ES2015 物件類別關鍵字 (從而大大簡化了上個範例中的程式碼):
上圖顯示使用 ES5 編寫時，使用導覽列來瀏覽 JavaScript 原始程式碼
展望未來
除了上述強調的功能，像是各種 bug 修復、性能強化和其他更新，都將給予您一個頂級的 JavaScript 編輯器使用經驗。展望未來，我們將繼續擴展編輯器的可能性，進而構建大規模的 JavaScript 解決方案。
我們也知道對您來說，擁有一個支援最新 JavaScript 語言的編輯器，是多麼重要的事，像是 ES2015 modules 和 generators，我們正努力讓 Visual Studio 可以完美支援它們。
想要嘗試這些功能，今天就下載 Visual Studio 2015 。如果你是 Open Source 開發人員、學生、業餘愛好者，或在一個小的專業團隊中工作，在此推薦您免費的 Visual Studio 2015 Community 版本。也請透過發送一個笑臉或哭臉來告訴我們您的 JavaScript 編輯器使用體驗。