VisualStudio11增強HTML5和JS的支援

餘二五發表於2017-11-23

Visual Studio 11增強HTML5和JS的支援

Mads Kristensen 在 TechDays 2012 海牙站上發表了一場很有趣的演講,演講內容是關於在 Visual Studio 11 和 ASP.NET 4.5 中所有的新功能和新選項。

  然而,當我們瀏覽這些新功能列表時,我們獲得的印象是,這一次的主要焦點在 web 標準和 HTML5 上。為了使 HTML5、CSS 3 和 Javascript 能夠在 Visual Studio 環境中相當容易的被使用,微軟做了很多工作。Javascript 和 CSS 編輯器都是全新構建的。因此,它們能夠處理所有 Javascript 和 CSS 最新版本提供的新功能。現在,讓我們看看 Visual Studio 11 為支援構建適應最新 web 標準和 HTML5 的應用提供了哪些新東西吧。

  自動 CSS Hacks

  我們都知道 HTML5 和 CSS3 效果很酷而且簡單易行。但是,當建立一個更復雜的 web 應用程式時,常用的方法是我們需要針對特定的瀏覽器做出與之相應的設定(這一過程我們把它叫做 CSS Hacks)。而這一步驟可能會花去很多時間並且結果令人沮喪。Visual Studio 11 通過智慧提示以及‘*’和‘_’hacks 屬性驗證來支援 CSS Hacks。

  CSS 的註釋和反註釋規則

  在 CSS 編輯器裡寫程式碼時,有多少次我們為不能用快捷鍵 CTRL+K,C去註釋和用 CTRL+K,U去反註釋而感到沮喪呢?這些指令為什麼我們可以在其他開發環境中使用,卻不可能在 CSS 編輯器裡使用呢?幸運的是,這種情況已經得到改觀,而且,從現在開始,我們不僅可以在程式碼編輯器裡使用這些快捷鍵,在 CSS 編輯器裡同樣可以使用。

  CSS 編輯器裡的程式碼段

  程式碼分段是 Visual Studio 一個強大的工作機制。唯一的問題是它只能被用在程式碼編輯器裡,CSS 編輯器則不具備這一功能。但在新的 VS 的整合開發環境裡,這一狀況已經被改善。現在,許多需要一些特殊瀏覽器設定的 CSS3 屬性都成為準備片段的一部分。

  拾色器

  新的 CSS 編輯器的功能已經被加強,你現在可以通過智慧提示來選擇一種在你的樣式表裡已經存在的顏色,或者乾脆是通過拾色器控制元件來選擇其它顏色。此功能在 Scott Guthrie 的一篇部落格文章裡有詳細的說明。

  Javascript 編輯器

  在 Visual Studio 使裡用 Javascript 最大的問題是它執行起來通常比較慢(尤其是當你正在除錯的時候)。而新版本的 Javascript 編輯器是基於 Chakra 引擎的,這將使執行加快。

  此外,VS 的 Javascript 編輯器還有其它一些額外的改進,以確保它對於開發者來說能力更強大,更具有可用性。通過新增一些在程式碼編輯器和其它新工具裡可用的選項,這一目標已大部分被實現。下面,我羅列出一些最有趣的選項:

  “轉到定義”選項。你現在在 Javascript 的檔案裡也可以使用這一選項,從而可以更快的從一個函式跳轉到另一個函式。

  大括號的匹配。你是否經常遇到一些由於括號不完整而造成 Javascript 丟擲錯誤的問題?然後,你是不是不得不一個接一個的尋找那個被遺漏的括號呢?在這款新的 Javascript 編輯器裡,這個問題將不會出現。“括號匹配”這樣一個在程式碼編輯器裡表現出色的功能也將被新增到 Javascript 編輯器裡。它以這樣的方式來執行——當你把指標放在其中一個括號上時,它會自動地高亮顯示和它匹配的那一個括號。

  隱式引用。現在你可以新增某一個 JS 檔案到中心檔案列表裡,而沒有必要去把它新增到每一個要使用它的地方。更好的是,當一個 Javascript 檔案被新增到中心檔案列表裡時,它會生成一個智慧提示以表示這個檔案對於其他任何一個 Javascript 程式碼塊或檔案都是可用的。

  支援 ECMAScript5。 ECMAScript5 是最新版本的標準,此標準用以描述 Javascript,JScript 和 ActionScript 語言。新的 Javascript 編輯器支援 ECMAScript5 中新的 syntax 和 APIs 。

  革命或只是進化?

  讀完這篇文章後,你可以得出這樣一個結論:VS11包含了對 CSS3、HTML5和 Javascript 的相當輕微的改善。真正的革命沒有發生。可是另一方面,當你把上述所有的變化加起來後,你會發現整個 VS 開發環境的可用性有了一個相當大的改善。而這些改善,將更有利於前端開發。

  英文原文:HTML5, CSS3 and Javascript improvements in Visual Studio 11

        Visual Studio 11 Beta版下載連結:http://www.microsoft.com/click/services/Redirect2.ashx?CR_CC=200091102

本文轉自 wws5201985 51CTO部落格,原文連結:http://blog.51cto.com/wws5201985/811880,如需轉載請自行聯絡原作者


相關文章