2013年4月24日 星期三

Visual Studio 2008 增加 HTML5 與 CSS3 的支援

今天同事突然問起我這個問題,怎麼讓 VS2008 增加 HTML5 與 CSS3 的支援?

老實說,我聽到的時候是楞了一下,因為會以 VS2008 開發的專案是比較早期的,所以不會在早期的專案中使用到 HTML5 與 CSS3,而我自己的電腦早就沒有安裝 VS2008 了(公司的電腦裡還存在著 VS2003……),自己開發專案的時候初非必要,不然也都是選用 VS2012 為優先,VS2010 與 VS2012 都可以使用 HTML5、CSS3,在預設的情況下,VS2008 並沒有 HTML5、CSS3 可以使用,也不像 VS2010 or VS2012 有擴充功能可以增加通能套件,不過在 Google 上面搜尋一下相關的資訊,還蠻多篇是介紹如何解決這個問題,這邊就記錄一下怎麼讓 VS2008 增加 HTML5 與 CSS3 的支援。

 


在 VS2008 裡新增一個 ASP.NET WebForm 專案,在預設的狀況下是沒有 HTML5 與 CSS3 的支援,

image

image

VS2008 增加 HTML5 與 CSS3 支援要分別進行,所以接下來就先說明 HTML5 的部份,之後再說明 CSS3 的部份。

 

增加 HTML5 的支援

參考網站:.NET Web Development and Tools Blog

HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer

依據文章中的說明以及提供的檔案,就可以讓 VS2008 有 HTML5 的功能支援,以下是壓縮檔的內容,

SNAGHTMLac4684

其中檔案名稱裡有「VWD」的是提供給 Visual Web Express 2008 使用的,接著看我們電腦的作業系統是 32 位元還是 64 位元,如果是使用 32 位元作業系統就使用 x86 的檔案,64 位元作業系統就使用 x64 的檔案,在執行 reg 檔案之前,首先要把「html_5.xsd」檔案給複製到指定目錄下,

32 位元作業系統,請複製到以下的目錄裡:

C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html

64 位元作業系統,請複製到以下的目錄裡:

C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html

下圖是 32 位元作業系統,所以將 html_5.xsd 檔案複製到「C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html」裡,

image

接下來就是執行指定的 reg 檔案,執行 reg 檔案之前請先關閉 VS2008,執行 reg 檔案後會出現如下圖的訊息,

image

如果確定要這麼做的話就請選擇「是」,下圖為成功加入登錄的訊息,

image

接下來就可以重新開啟 VS2008,然後在 ASPX 開啟的狀態裡就可以看到有 HTML5 的支援,

image

在編輯時也有 HTML5 的 tag 可以選用,

image

以上就是在 VS2008 增加 HTML5 的支援。

 

增加 CSS3 的支援

接著就是增加 CSS3 的支援,這部份會比較麻煩一點,會需要手動去對登錄編輯程式做修改的操作,進行以下操作前請先關閉 VS2008。

首先就是先找一個 CSS3 的 schema 檔案,如果電腦裡有安裝 VS2010 的話,可以到 VS2010 目錄下去複製即可,

image

32位元作業系統,可以在以下目錄找到檔案

C:\Program Files\Microsoft Visual Studio 10.0\Common7\Packages\2052\Schemas\CSS

64 位元作業系統,可以在以下目錄找到檔案

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\2052\Schemas\CSS

複製了 css30.xml 檔案之後,再來就是把檔案給複製到 VS2008 的目錄下,

image

同樣的安裝目錄也會因為作業系統的不同而不一樣,如果你安裝的是英文版的 VS2008,就會是以下的目錄位置,

32 bits OS:C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\1033\schemas\CSS

64 bits OS:C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\Packages\1033\schemas\CSS

如果你所安裝的 VS2008 為中文版,那麼目錄將會是 Packages\1028\schemas\CSS

image

接下來就是要到登錄編輯程式去增加機碼與內容,使用 Win + R 叫出執行,輸入「regedit」後按下確定鍵,就可以叫出登錄編輯程式,

image

機碼的位置也會因為作業系統的位元不同而有所變化,

32 bits OS:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas

image

64 bits OS:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas

image

上圖已經有增加了 Schema 5 的機碼與內容,這就是我們要手動增加的內容,

image

空白處按下滑鼠右鍵,新增字串值,這個動作要做兩次,分別增加「File」與「Friendly Name」,

image

新增 File 字串值後,編輯字串並輸入「css30.xml」

image

新增 Friendly Name 字串值後,編輯字串並輸入「CSS 3.0」

image

完成上面的操作過後,就可以關閉登錄編輯程式,然後接著重新開啟 VS2008,打開專案的 CSS 檔案,就可以看到樣式表下拉選單裡增加了 CSS 3.0 的項目,

image

然後到 CSS 檔案裡,在編輯時可以使用 CSS 3 的樣式了,

image

 


參考來源:

HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer - .NET Web Development and Tools Blog - Site Home - MSDN Blogs
How to create custom CSS intellisense schema in Visual Studio 2005 and 2008 - Mikhail Arkhipov (MSFT)’s WebLog - Site Home - MSDN Blogs
Software in my life: How to enable CSS 3.0 Intellisense in vs2008.

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。