今天同事突然問起我這個問題，怎麼讓 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 的支援，
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 的功能支援，以下是壓縮檔的內容，
其中檔案名稱裡有「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」裡，
接下來就是執行指定的 reg 檔案，執行 reg 檔案之前請先關閉 VS2008，執行 reg 檔案後會出現如下圖的訊息，
如果確定要這麼做的話就請選擇「是」，下圖為成功加入登錄的訊息，
接下來就可以重新開啟 VS2008，然後在 ASPX 開啟的狀態裡就可以看到有 HTML5 的支援，
在編輯時也有 HTML5 的 tag 可以選用，
以上就是在 VS2008 增加 HTML5 的支援。
增加 CSS3 的支援
接著就是增加 CSS3 的支援，這部份會比較麻煩一點，會需要手動去對登錄編輯程式做修改的操作，進行以下操作前請先關閉 VS2008。
首先就是先找一個 CSS3 的 schema 檔案，如果電腦裡有安裝 VS2010 的話，可以到 VS2010 目錄下去複製即可，
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 的目錄下，
同樣的安裝目錄也會因為作業系統的不同而不一樣，如果你安裝的是英文版的 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，
接下來就是要到登錄編輯程式去增加機碼與內容，使用 Win + R 叫出執行，輸入「regedit」後按下確定鍵，就可以叫出登錄編輯程式，
機碼的位置也會因為作業系統的位元不同而有所變化，
32 bits OS：
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas
64 bits OS：
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas
上圖已經有增加了 Schema 5 的機碼與內容，這就是我們要手動增加的內容，
空白處按下滑鼠右鍵，新增字串值，這個動作要做兩次，分別增加「File」與「Friendly Name」，
新增 File 字串值後，編輯字串並輸入「css30.xml」
新增 Friendly Name 字串值後，編輯字串並輸入「CSS 3.0」
完成上面的操作過後，就可以關閉登錄編輯程式，然後接著重新開啟 VS2008，打開專案的 CSS 檔案，就可以看到樣式表下拉選單裡增加了 CSS 3.0 的項目，
然後到 CSS 檔案裡，在編輯時可以使用 CSS 3 的樣式了，
參考來源：
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.
以上
沒有留言:
張貼留言