前端工程師的百寶盒 - Visual Studio 2013 開發工具

  • Article

前端工程師的百寶盒 - Visual Studio 2013 開發工具

作者: 黃保翕 (Will, 微軟MVP)

"前端工程" (Front-End Engineering) 正夯，相關技術也如雨後春筍般的大量釋出，相對的，前端相關的輔助工具也越來越多，如何有效整合前、後端技術更是一大挑戰。新一代 Visual Studio 開發工具 "Visual Studio 2013” 加進了不少與前端工程開發相關的功能，不僅有效提升 Web 開發效率，更進一步針對不同的前端工程開發情境，發展出更直覺、更貼心的編輯器功能，本篇文章將詳述 Visual Studio 2013 如何幫助前端工程師進行前端網頁開發工作。

一、瀏覽器連結 (Browser Link)

身為前端工程師的你，可能有聽過 LiveReload 這套工具，使用這套工具可以讓你在編輯 HTML, CSS 或 JavaScript 的同時，順便重新載入網頁，如有雙螢幕的開發人員，應該會熱愛這套工具。如果沒聽過，那也沒關係，在 Visual Studio 2013 內建了 瀏覽器連結(Browser Link) 機制，他提供類似的機制，但此功能因為與 Visual Studio 內建的 IISExpress 完美結合，省去所有額外設定的步驟，使用上將更加直覺好用，以下我們就來看看怎樣使用它。

首先，在 Visual Studio 2013 裡面先將網站執行起來，無論你有沒有偵錯模式 ( F5 或 Ctrl+F5 ) 都可以：

開啟預設網頁後的首頁畫面如下：

然後我試著修改網頁的內容，如下圖示，我把 ASP.NET 改成 ASP.NET MVC

按下 Ctrl+S 儲存變更，接著按下工具列上的「瀏覽器連結」按鈕 ( 或按 Ctrl+Alt+Enter 快速鍵 )，就會立刻觸發目前已開啟的網頁執行重新載入的動作。從下圖你可以看到，畫面上寫著「已連接 1 個瀏覽器」，代表目前 Visual Studio 2013 偵測到有 1 個瀏覽器正在開啟這個網頁，所以當我按下「瀏覽器連結」按鈕時，這些「已連接」的網頁，全部都會重新載入。

你可以想像一下，當你手邊有 20 支不同規格的智慧型手機，全部連結到相同的這個網頁，然後這 20 支智慧型手機全部都自動連接至 Visual Studio 2013 的「瀏覽器連結」功能，當按下「瀏覽器連結」按鈕 ( 或按 Ctrl+Alt+Enter 快速鍵 ) 後，所有手機自動重新載入網頁的樣子，無論你在做跨瀏覽器測試，或行動裝置平台測試，透過「瀏覽器連結」功能，都能非常有效率的進行測試，尤其是有雙螢幕或多螢幕的情況下，同時連接多種不同瀏覽器也是非常實務的作法。

註：在 Visual Studio 2013 的正式版本 (RTM)，還有個好用的選項可以設定，當使用者按下儲存按鈕 ( 或按 Ctrl+S 快速鍵 ) 時，會自動觸發「重新整理已連結的瀏覽器」功能。

瀏覽器連結 (Browser Link) 的原理其實很簡單，如果你啟用瀏覽器連結，所有從 IISExpress 輸出的網頁，都會在 </html> 標籤之前自動加上一段 HTML，用以載入「瀏覽器連結」功能所需的 JavaScript 執行，而該技術用到 SignalR 技術，讓網頁載入後，立刻與伺服器端 ( IISExpress ) 建立一個永續的連線，讓瀏覽器與伺服器之間可以進行雙向通訊，這也代表著 Visual Studio 2013 就能在伺服器端，直接利用 JavaScript 控制所有已連接的瀏覽器任何動作，當然包含重新載入網頁等動作。不僅僅如此，如果想要控制到更細部的瀏覽器行為，例如控制 CSS 樣式、修正 DOM 結構、模擬 GPS 座標、…，也都是可行的，未來極具發展潛力，各位可以拭目以待。

 二、 HTML 編輯器增強

一般人看到 Visual Studio 的 HTML 編輯器還能想到甚麼好用的功能？沒錯，就是 IntelliSense 功能！ 

由於越來越多前端框架都非常依賴自訂 HTML 屬性 (Attributes) 的方式擴增原本 HTML 的能力，因此新版 Visual Studio 2013 針對 jQuery UI、jQuery Mobile 與 AngularJS 皆提供了完整的 IntelliSense 支援：

AngularJS

jQuery Mobile

jQuery UI 或其他自訂屬性

如果你曾經在頁面中自訂了一個 HTML data-* 屬性，第二次使用該屬性時，就會自動產生新的 IntelliSense 提示，如下圖示：

除此之外，像 aria-* 、 data-* 與 ng-* 等屬性，由於這些都是擴增屬性，以往在使用 IntelliSense 時都會因為選項過多而不好選取，新版 Visual Studio 2013 則提供了屬性 Intellisense 群組 (attribute IntelliSense Grouping) 功能，預設把這些擴增屬性隱藏，等用到時才會出現，用以減少可選取的提示數量。

除了這些 HTML 屬性 IntelliSense 外，由於前端框架大多會有 HTML 範本 (Template) 可以套用，而在範本中自然會套用一些範本變數，我們以 AngularJS 為例，若要在 HTML 範本中插入一個 name 變數，你會在網頁中輸入 {{ name }} 語法，而這個 {{ 與 }} 符號可以說經常出現在各式不同前端框架的範本引擎 (Template Engine) 裡，所以 Visual Studio 2013 也內建了方便輸入 {{ 與 }} 符號的功能，當你在 HTML 中輸入 {  的時候，Visual Studio 2013 的 HTML 編輯器會自動幫你輸入 } 符號，而且鍵盤游標會停留在 { 與 } 之間，當再次輸入 { 符號時，Visual Studio 2013 則會再幫你產生一次 } 符號，如下圖示：

基本上，在以下幾個地方輸入 { 都會自動產生對應的 } 符號：

  • HTML 內文         ( 例如: <div> 與 </div> 之間的內文裡 )
  • HTML 屬性名稱
  • HTML 屬性值
  • <style> 標籤
  • <script> 標籤

註：在 Visual Studio 2013 的正式版本 (RTM)，還可以針對 CSS Class 提供 IntelliSense 提示，也會提供 KnockoutJS 框架的 IntelliSense 提示。

 三、 JavaScript 編輯器增強

當開始專注於前端工程之後，各位一定會發現開發 JavaScript 的工作越來越多，也因此 JavaScript 編輯器的增強勢必是個重點。沒錯，在 Visual Studio 2013 增強的功能中，JavaScript 編輯器確實比以往還強悍許多，最明顯的改變就是提供了程式碼巡覽 (Code navigation) 功能，不但可以更快速的尋找程式碼所在位置，更能進一步的了解 JavaScript 函式庫的作用域結構。

我們先開啟一個 C# 原始檔，你可以看到在編輯器視窗左上方的下拉選單，會列出該檔案中出現過的 C# 型別，而右邊的下拉選單則是出現該型別下的成員 (如: 欄位、屬性、方法)，如下圖示：

然後我們再開啟 jquery-1.8.2.js 檔案為例，你可以看到 JavaScript 編輯器的左上方出現了跟 C# 編輯器一樣的下拉選單，這在以前的 Visual Studio 版本都是沒有出現過的。在 JavaScript 編輯器的左邊選單，可以選擇的項目是目前開啟該檔案的所有 全域變數 (global variables)。

註：這裡的全域變數 Visual Studio 2013 會自動進行原始碼分析，如果 JS 檔案很大的話，可能會需要一些時間讓 Visual Studio 解析後才會出現。

而在 JavaScript 編輯器右上方的下拉選單中，則是出現全域的函式，以及函式與函式之間的結層結構，你可以直接從 Visual Studio 2013 的 JavaScript 編輯器中直接看出不同函式之間的作用域範圍(Scopes)，不但可以更快速的尋找需要的程式碼，也能更進一步了解 JavaScript 函式庫的完整結構，非常厲害！

如果你今天先選取了另一個全域變數，右邊還會列出隸屬於該變數下的那些函式成員，也是個非常貼心的功能：

註：當你從左邊選單選取全域變數時，可能會覺得奇怪，怎麼不是跳到我要去的那個變數宣告的位置，事實上，Visual Studio 2013 預設會跳到該變數下的第一個函式的位置 (按照字母排序而非原始碼實際的順序)。

 總結

除了內建的功能改進外，筆者也強烈建議 Web Essentials 2013 擴充套件，該套件功能非常多，其中包括支援 LESS 語法、CoffeeScript 語法、支援 ZenCoding、提供 JSHint 檢查、與各式各樣的前端功能支援，這個擴充套件絕對是前端工程師不能錯過的套件之一。當然，可別忘了 Visual Studio 原本就有的好用功能，也能有效幫助前端工程師快速且有效的管理網站專案，例如透過 NuGet 安裝各種前端套件、使用巡覽至 (Ctrl+, ) 查找檔案與樣式、快速搜尋與預覽檔案、…等等。

Visual Studio 2013 針對前端工程師設計的新功能，各個都非常實用，相信若能靈活運用，勢必能夠改進開發效率。

 

 

 

延伸閱讀