網頁

Visual Studio - 提升Web與CSS開發的流暢度

Visual Studio 2010 與 Usability

老實說,從學習 .NET Framework 2.0 + ASP.NET 2.0 開炲,一直覺得 Visual Studio 2008 是一套很棒的開發工具。到了後來,升級使用了 Visual Studio 2010 之後,更覺得來到了一個不一樣的世界。Microsoft 應該有感覺到我們「程式開發人員」的辛苦,在 Visual Studio 2010 開發工具中有把「Usability」考慮進去。

雖然 Usability 是網頁開發的一個名詞,但其實所有與使用者有互動的內容,都應考慮 Usability,只是考慮多或少。像 Apple 的產品,使用起來只有一個字形容「順」!但,人家背後花了多少的心思在 Usability 之上,才能有今天成功?

回主題,Visual Studio 2010 與 Usability。

Visual Studio 2010 新發現系列文章中,我提到過「擴充組件庫」及介紹了幾套當時使用起來感覺很不錯的擴充組件。在「KKBruce的軟體清單」中,也重新整理過。

今天要來介紹一套讓你在開發Web和CSS更流暢、更省時間、更人性的擴充組件。

Web Essentials 擴充組件

Web Essentials,你可以透過 Visual Studio 2010 下載安裝或由網路下載安裝。

Web Essentials 增強功能簡介

Web Essentials 是增強 Visual Studio 在 Web、CSS、JavaScript開發上的方便性,不過我認為最棒的是在Web與CSS這兩個部份。

即時網頁預覽

安裝Web Essentials 重開 Visual Studio 專案之後,在專案 → 右鍵 → Live Web Preview

圖一:Live Web Preview
Live Web Preview 會啟動 IIS Express,然後開啟一個類似「屬性視窗」小視窗,重點是,此小視窗是Visual Studio的一部分,你可以嵌入Visual studio的任何地方。

圖二:Live Web Preview 嵌入 Visual Studio 2010
只是一個小視窗,有什麼了不起?

我先這樣問,我們開發專案,程式寫一寫,是不是要建置,然後到 Browser 去 reload 一下網頁,看一下結果對不對,在來修改 Code。

  • Code write → Build → move to Browser's → reload → View it → move back VS → edit Code

細看之下,我們還進行了很多事,但使用了Live Web Preview之後,步驟大幅減少:

  • Code write → Save it

沒了,就這樣。依我的電腦測試,約 1 ~ 2 秒,你修改的結果就會自動出現在那小小的 Live Web Preview視窗裡。例如,我修改 Site.Master 的h1文字為「KKBruce的 MVC 應用程式」後,按Ctrl + S之後,約 1.5 秒後:

圖三:即時顯示預覽修改內容
相信我,你會喜歡按完 Ctrl + S 之後,就等著看結果,而不想去動 Mouse。

CSS編輯器增強

Visual Studio 在CSS編輯器這部分一直差強人意,我還因為了Visual Studio的CSS編輯器不好用,寫了「免費CSS編輯器」這一篇文章。不過,Web Essentials 讓我在 Visual Studio 2010 裡寫 CSS 時快樂了不少,讓我們看看Web Essentials增加了什麼好用的功能。

  • 將參考圖片以base64字串嵌入CSS的url之中
  • 快速鍵註解、反註解
  • 為 TODO註解加上圖像
  • 當mouse移過"顏色碼(#1d60ff)"時,自動預覽
  • 當mouse移過"字型碼"(font-family)時,自動預覽
  • 當mouse移過"圖片路徑"(url)時,自動預覽
  • 程式碼區塊說明
  • 區塊程式碼壓縮最佳化
  • 直接從方案總管拉圖片進CSS編輯視窗,會產生對應路徑
  • 直接互換 hex, rgb, 顏色名稱
  • 對特定 IE 版本進行CSS設定
  • 專案 → 目錄 → 加入 → 增加「CSS與JavaScript檔案」的快速鏈結
圖片及說明,Web Essentials擴充組件線上說明都很簡單易懂。以下就Web Essentials擴充組件說明內沒有的內容加強一下。

圖四:TODO 顯示圖示
當我寫註解寫上「TODO」關鍵字時,Web Essentials 會在最前面加上一個小圖示提醒你,這裡有個 TODO 必須注意。

圖五:拉圖片直接產生路徑
這是個非常方便的功能,然後就可以配合第一個 base64 字串的產生使用。

圖五:CSS url圖片轉換為Base64字串

Web Essentials 使用心得

又是一套不可多得好擴充組件,現在還在免費階段,尤其是Live Web Preview,真的,一用就愛上了。如果還有在撰寫 CSS,那更好,它能讓你有更好 CSS 撰寫經驗。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。