# Visual Studio 11 新功能介紹：專案相容性與 HTML 編輯器

本月 25 日的[跨行動裝置網站開發 - 使用 ASP.NET 4.5 Beta & Visual Studio 11 Beta 研討會](http://www.microsoft.com/taiwan/events/1204_visualstudio11beta-mobile/)我針對 Visual Studio 11 Beta 在 HTML5、CSS3 與 JavaScript 的新功能做了許多展示，有鑑於功能強大，我覺得還是有必要專文介紹這些新功能，讓大家更瞭解 Visual Studio 11 新版開發工具到底對 Web 開發人員帶來多少幫助，由於 Visual Studio 11 功能非常多，因此打算以系列文章切分成多篇文章來介紹。

**§ 提升 Visual Studio 11 與 Visual Studio 2010 之間的專案相容性**

在以往的 Visual Studio 各版本，每次都會遇到專案檔升級後無法再用較低的版本開啟的情況，例如用 Visual Studio 2010 開啟 Visual Studio 2008 的專案並執行自動升級，就會導致該專案再也無法於 Visual Studio 2008 開發工具中開啟。

然而這個現象在 Visual Studio 11 中已經得到改善，在大多數的專案類型裡，例如 Console, Windows Form, WPF, ASP.NET WebForm, ASP.NET MVC 3, … 等，預設的情況下使用 Visual Studio 11 開啟專案後並不會主動提示你要升級專案，也代表著使用新的 Visual Studio 11 開發工具開啟這些專案檔並不會影響團隊其他還在使用 Visual Studio 2010 的人開啟相同專案，因此在版本控管方面比較不會遇到問題。

事實上，還是有些許專案類型必須升級專案檔，最主要還是來自於 Visual Studio 11 新功能提升的關係，這些升級後的專案檔將無法相容於 Visual Studio 2010 開發工具，例如：資料庫專案 (Database Project), ASP.NET MVC 2 (預設不支援), 安裝專案 (Setup Project), … 等等。

當然，專案到底應不應該升級不用特別去記憶，只要你使用 Visual Studio 11 開啟原專案時沒有任何提示要升級，那就代表這種專案檔可以在 Visual Studio 2010 與 Visual Studio 11 之間相容！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/660b318424a7c97ecfcc-SNAGHTML1385a6fe.png)

若開啟專案後你有看到 **(needs conversion)** 文字 (如下圖示)，則代表有該專案不相容於舊版，你可以決定是否要升級該專案，如果不升級的話，所有專案都還是能在 Visual Studio 2010 裡正常開啟。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ef094120732ceefcc302-image_1458.png)

**§ 強化 HTML 編輯器功能**

**到處都是「智慧標籤」 (Smart Tags)**

透過鍵盤快速鍵 **Ctrl + .** 即可開啟[智慧標籤](http://zh.wikipedia.org/wiki/%E6%99%BA%E6%85%A7%E6%A8%99%E7%B1%A4) (Smart Tags) 選單，而且幾乎每一個 tag 都有智慧標籤，預設會有 **Format Element** (格式化文件) 功能。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/709d90e9a6a35c7e83b6-image_1459.png)

如果是伺服器控制項，還會出現以前只有在「設計檢視」的畫面才會看到的智慧標籤，現在在 HTML 原始碼檢視視窗裡也能夠快速產生智慧標籤原始碼：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fb1692c8a9b2477cf1c4-image_1460.png)

相關動態展示請看這裡：

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0b1d2958ae5a41020650-video0182a047a958_1.jpg)](http://www.youtube.com/watch?v=HX78y3imlyI&feature=youtube_gdata_player)

**可在 HTML 原始碼檢視新增伺服器控制項所需的事件處理常式 (Events Handler)**

貼心的小功能，寫 ASP.NET Web Form 的人很實用，操作示範如下影片：

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b76829ef644e1622c654-video04ebb48ba832_1.jpg)](http://www.youtube.com/watch?v=ckfLaqI9cdM&feature=youtube_gdata_player)

**變更 HTML 標籤自動完成功能**

由於大多 HTML 標籤都有頭有尾，例如 <p> 與 </p>、<td> 與 </td> 等等，新版 Visual Studio 在當你修改標籤的開頭時，結尾自動幫你一起變更，加快修正完成的速度，也減少許多鍵盤輸入的機會：

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/34b7be3e8a2a3b400ca9-videoaabeeab675dc_1.jpg)](http://www.youtube.com/watch?v=DqumqHpNSJA&feature=youtube_gdata_player)

**完整支援 [WAI-ARIA](http://www.w3.org/WAI/intro/aria) 與其他 HTML5 元素屬性 Intellisense**

支援 [WAI-ARIA](http://www.w3.org/WAI/intro/aria) 與完整的 HTML5 元素屬性與其屬性值的 Intellisense 功能

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/6dcb31ae8f3ccf87d114-image_1461.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/da9a616aaf2dc47757ab-image_1462.png)

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d117bc9f6bcb438f6562-video07afbfcd2a8c_1.jpg)](http://www.youtube.com/watch?v=q9fIjUFLCRg&feature=youtube_gdata_player)

**快速擷取使用者控制項 (Extract to User Controls)**

此功能對 ASP.NET Web Form 開發人員來說，也是個方便的小工具，可快速建立使用者控制項：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/45e172584f85f457a907-image_1463.png)

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b73843452163c4997187-video35048b0744ab_1.jpg)](http://www.youtube.com/watch?v=KSQHrXOxTd4&feature=youtube_gdata_player)

**新增許多 HTML5 專屬程式碼片段 (Code Snippets)**

Visual Studio 11 新增的**程式碼片段** (Code Snippets) 有好幾個，其中包括：

-   html5  /  xhtml5
-   charset
-   metaie8
-   metaviewport
-   figure
-   audio
-   video
-   svg\*  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4fd6d7ea3ce7944a8b8a-image_1464.png)

所有 Visual Studio 內建的**程式碼片段**都是可以客製化修改的，預設所在路徑如下：

```
C:\Program Files\Microsoft Visual Studio 11.0\Web\Snippets\HTML\1033\HTML
```

**先前 Visual Studio 2010 無法使用 Intellisense 的地方，現在都能用了**

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3db523c5e4a20c328881-image_1465.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b2a2ffbecb1788acdec1-image_1466.png)

**支援 jQuery Templates 高亮顯示**

[jQuery Template](https://github.com/jquery/jquery-tmpl) 裡常用的 **<script type="text/x-jquery-tmpl">** 或 **<script type="text/html">** 表示法，以往是不會有高亮顯示的，但新版的 Visual Studio 11 會聰明的判斷，並予以高亮顯示。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9d4fcff90762b365164b-image_1467.png)

**相關連結**

-   ASP.NET 4.5 跨行動平台開發研討會 - SkyDrive (當天研討會所有簡報下載)
-   [ASP.NET 4.5 跨行動平台開發研討會 - YouTube](http://www.youtube.com/playlist?list=PL5FEB7F1945F8D361) (當天研討會所有現場錄影重現)
-   [HTML5 及 JavaScript 開發實務 – 使用 Visual Studio 11 Beta](http://docs.com/KGPD) (簡報檔)
-   [What's New in Visual Studio 11 Beta](http://msdn.microsoft.com/en-us/library/bb386063\(VS.110\).aspx)
-   [What’s New for ASP.NET 4.5 and Web Development in Visual Studio 11 Beta](http://msdn.microsoft.com/en-us/library/hh420390\(VS.110\).aspx)
-   [What's New in ASP.NET 4.5 and Visual Studio 11 Beta](http://www.asp.net/vnext/overview/whitepapers/whats-new) ( www.asp.net )