• 發行項

本文章是由機器翻譯。

Visual Studio 2012

什麼是新的 Visual Studio 2012 年的 Web 開發

克拉克賣

 

你還記得你開發的第一個網站嗎？ 肯定做什麼，而且哦男孩得亂七八糟。 但自那時以來改變，很多了 — — 它不會停止 ！ 很難記住什麼 Web 開發獨自像一年以前，讓 Microsoft.net 框架第一次發佈時越來越難。

Visual Studio 已演變為好。 還記得當 Web 開發人員基本上不得不安裝完整的伺服器作為 rig 開發商只是為了擁有 IIS 和 SQL 伺服器來運行他們的網站嗎？ 然後我們介紹了凱西尼，然後 IIS 表達更輕的世界。 現在 HTML5 是在這裡，Visual Studio 擁抱它。

我要去探索如何 Visual Studio 支援這個新世界 Web 開發人員，看看令人興奮的新功能，如專案共用、 頁面督察和 DOM 資源管理器中，以及看看如何編輯經驗的核心仍在不斷發展。

專案的共用

當您打開一個專案檔案時，您可能會注意你的滑鼠，第一次按一下新的 Visual Studio 功能。 在過去，專案檔案被直接依賴于您所使用的編輯器。 這就意味著如果你有一個專案檔案創建 Visual Studio 2010 年與您試圖使用 Visual Studio 2012 打開它，會要求您要將其升級。 一旦你這樣做，你可能永遠不會再次舊版本中打開的專案。 嗯，不會了。

Visual Studio 2012 發佈候選版本 （臨區局） 引進專案共用的概念。 現在您可以使用它可以互換使用 Visual Studio 2010 SP1 上相同的源。 消除要求每個人都必須使用相同的設置打開了新的經驗，特別是對形形色色的團隊和開放源碼專案的大門 — — 或甚至在你發展商店裡的軟體升級。

當然，有幾個警告。 例如，如果您的專案使用一個本機資料庫 （App_Data 資料夾），您需要確保您仍在使用同一版本的資料庫引擎。 也有幾個較舊的專案類型，如 ASP.NET MVC 2，不能與此工作。

作為與任何新的、 您需要創建一個岔路口，做幾個證明的概念。 您想要逮做的最後一件事打破生成過程。

HTML5 支援

可能要添加到 Visual Studio 中的 HTML 編輯器的最重要的特徵是網頁易讀性倡議-可訪問富互聯網應用程式 （WAI-ARIA） 支援。 圍詠歎調 (w3.org/WAI/intro/aria） 的 Web 標準重點是使網站和 Web 應用程式更易於訪問的殘疾人士。 規範定義了兩種類型的標記的屬性。 角色將應用於 HTML 元素來描述的構件正在使用的類型或 Web 頁的結構。 正如您看到的圖 1，Visual Studio 支援的詠歎調角色包括智慧感知。

ARIA Roles
圖 1 詠歎調角色

另一種類型的屬性如首碼為詠歎調-詠歎調忙或詠歎調-valuemin，如中所示圖 2。 這些詠歎調-＊ 屬性用來説明描述的元素給使用者。

ARIA-* Properties
圖 2 詠歎調-＊ 屬性

HTML5 推出超過 25 種語義標記。 Visual Studio 已經有智慧感知支援這些標記，但 Visual Studio 2012 使它更快和更易於編寫標記通過添加一些相應的片段，像為音訊和視頻標籤。 圖 3 顯示視頻的標記的程式碼片段。 雖然這些標記不是複雜的但他們來的幾個小的微妙之處，例如添加正確的編解碼器回退。

A Snippet for the Video Element
圖 3 段視頻元素

最後我建的幾個 Web 網站利用新的 HTML5 標籤了。 與每個網站，我最終重構我標記以某種方式，即使是只是簡單語義更改，如更改到部分的 div。 在 Visual Studio 到 2012 年，當您更改元素，編輯器中也會更改及其相應的開始或結束元素。 這種自動重命名是另一種方式編輯器可説明您避免那些深夜錯誤。

開發商往往分歧是否使用定位字元或空格的格式。 無論你更喜歡哪，智慧縮進這裡來使你保持一致。 無論您的選擇，鍵入一個元素和擊球輸入後，你正在送往進行縮進，你喜歡的下一行。正如你所期望的智慧感知已添加篩選不僅作為但也基於詞首大寫的單詞中鍵入您的搜索，使它更快、 更方便地將元素插入。 並結合時智慧縮進，無論您放置游標，該游標的位置擊球選項卡後您新的標記將自動定位正確地在文檔中，作為圖 4 顯示。

Intelligent Filtering and Indenting
圖 4 智慧過濾和縮進

最後，Visual Studio 2012 HTML 編輯器有一大批好的補充，支援 ASP.NET 中的，如智慧任務，提取使用者控制項，並自動事件綁定。 您可以瞭解更多有關這些功能的"什麼是在 ASP.NET 中 4.5 新和 Visual Studio 2012 年"頁面 bit.ly/MXcIbG。

JavaScript 的支援

在 Visual Studio 2012 年的 JavaScript 編輯器是完全陌生的並支援 ECMAScript 5。 它使一些很好的功能，像折疊功能和大括弧匹配。 如果仍然為函數滾動周圍，別。 只是擊中 f12 鍵，會被直接向該函數或變數的定義 （請參閱圖 5)。

The JavaScript Editor
圖 5 JavaScript 編輯器

編輯器還增強智慧感知了 JavaScript 開發並，同時，改進的文件物件模型 (DOM) 的支援。 HTML5 成為主流，很高興有此增強的支援，不僅為基本新的 DOM Api，而且當您決定延長，作為圖 6 顯示。

IntelliSense for JavaScript
圖 6 JavaScript 的智慧感知功能

文檔總是一件好事來了，尤其是當這種生活在智慧感知視窗中的文檔。 VSDoc 支援不是新的 Visual Studio 中，但它現在包括一個新的簽名元素聲明的可讓您創建詳細的智慧感知評論的 JavaScript 函數重載。 第二，不顧我的代碼品質看一看圖 7，其中顯示有兩個或三個參數的函數。 正如您所看到的該代碼有一系列的 <signatures> 對於每個重載，與所示的結果圖 8。

圖 7 使用簽名元素的 JavaScript 函數

function myAwesomeFunction(a, b, c) {
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <returns type="String" />
    /// </signature>
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <param name="c" type="String">Clearly you should pass C in here.</param>
    ///   <returns type="String" />
    /// </signature>
    return "yea pretty awesome";
  }


圖 8 注釋添加到智慧感知

與地方的簡單文檔，你可以看到在圖 8 是如何智慧感知用它來顯示的內容。

CSS3 的支援

對我來說，CSS 仍然是一種神秘的藝術，和一個我可以永遠不會得到足夠的説明。 幸運的是，Visual Studio 2012 加強了對 CSS 的支援。 地區、 智慧感知和代碼片斷是僅僅幾個功能，可以説明改善您的風格。 讓我們首先來看區域。 所有方法都是一個特殊的評論來創建區域。 圖 9 顯示一個簡單的地區，同時展開和折疊的樣式表。


圖 9 區

如你所知，在網路世界中你必須支援多個瀏覽器。 使用 CSS，這意味著會計的所有不同的供應商首碼。 Visual Studio 2012 CSS 編輯器現在包括供應商的首碼在這兩個標準的屬性清單以及內置的程式碼片段，如中所示圖 10。

Properties for Vendor Prefix -moz
供應商的圖 10 屬性首碼 moz

當然，您可隨時有許多 CSS 屬性和過濾至關重要。 如與 C# 和 Visual Basic 的智慧感知中,，您可以篩選那長長的 CSS 屬性清單只是通過鍵入，作為圖 11 borr （邊框半徑） 的搜索中顯示。

CSS IntelliSense
圖 11 CSS 智慧感知

這是偉大的但邊框半徑，你真的應該支援的所有供應商首碼。 如果你仔細的邊框半徑圖示，您將看到它是實際的程式碼片段。 兩次，命中選項卡，一旦到自動完成該屬性並再次插入程式碼片段 （請參閱圖 12)。

A CSS Snippet
圖 12 CSS 代碼片斷

您可以看到的所有供應商首碼添加了與價值現在您可以更改突出顯示。 當您鍵入所需的半徑值，將相應地更改特定于供應商的所有值。 但什麼東西更先進，像一個媒體查詢嗎？ 鍵入，您將看到的先進段 （如 @ 介質清單。 選擇 @ 介質然後擊中選項卡上，將插入媒體查詢的程式碼片段。 現在您可以只鍵入您新的寬度，點擊選項卡並調整你的高度 （請參見圖 13)。

The <span class=@media Snippet" />
圖 13 @ 媒體片段

片段是一個絕佳方式保存的鍵擊。 就像 C# 或 Visual Basic，您可以創建新的程式碼片段或修改現有的通過 Visual Studio 程式碼片段管理器，而你會發現在工具 |程式碼片段管理器。

Visual Studio 也有新拾色器，需要的顏色 ； 這些屬性 它將替換以前的版本中已命名的顏色。 正如您看到的圖 14，我選擇了以一位透明度，選取一種顏色，所以從標準的十六進位顏色更改為 rgba 拾色器。

The New CSS Color Picker
圖 14 新 CSS 顏色選擇器

最後，一定要檢查支援的階層式縮進和 CSS hacks 在 bit.ly/MXcIbG。

使用頁面督察進行調試

"嘿，它適用于我的機器!"我保證我說這句話或在你的職業生涯中不止一次聽到。 在 Web 開發中，幾乎保證你會聽到這句話或遲或早，為什麼是嗎？ 嗯，部分是因為我們將部署到與我們有關的發展並不完全相同。

像安全和伺服器農場撇開顯而易見的東西，它真的歸結為，瀏覽器將執行和呈現。 多年來，擁有先進的技術，如 HTML5，CSS3 和 JavaScript，和我們使用大量的框架，其中包括一些可能只運行在瀏覽器中 （如 knockout.js 和 backbone.js）。 Web 開發人員必須處理兩個不同的世界:這款應用程式如何開發和跨所有需要支援的不同瀏覽器的運行方式。

瀏覽器工具擁有先進因此，從而説明了很多，但您仍可能需要查找原始原始檔案的考古發掘。 即使你考慮一下簡單的 JavaScript 縮小與腳本裝載機，可能大大不同于您開發了什麼可能會發送到伺服器。 值得慶倖的是，頁面檢查器中，我最喜歡的添加到 Visual Studio 2012 年之一就在這裡説明。 頁督察將直接引入 Visual Studio 的瀏覽器診斷工具。 通過這樣做，它提供了集成的經驗從瀏覽器到 ASP.NET 和權利的原始程式碼。 它與最小安裝程式這一切。

您可以運行頁督察開箱即用有限的功能。 要這樣做，只需按右鍵您想要查看並選擇視圖頁檢查器中的頁面上。 現在，我知道你在想什麼："沒有辦法，將會對我的 MVC 專案或所有我自訂的路線"。有一些信心。

頁督察會盡其所能實際上將檔案對應到使用該 URL 公約。 凡該操作失敗，您可以手動添加該映射。 要完全啟用頁督察和其所有功能，只是你 web.config 的 appSettings 部分添加一個新的金鑰：

<add key="VisualStudioDesignTime:Enabled" value="true" />

檢查頁都是關於堵"差距"我前面說，什麼開發和什麼呈現之間。 不是很好如果你可能只是突出顯示在輸出中呈現的東西，發現是什麼檔 — — 或者，更重要的是，改變它呢？ 我知道你可以做到已經在瀏覽器的工具，但是我的意思是為好，實際上它來自的源中。 與頁督察你可以這麼做，所呈現的輸出和它來自的原始檔案之間映射 當你開始頁督察時，你正在基本上提出內部 Visual Studio 中，一個瀏覽器視窗中所示圖 15。

Page Inspector
圖 15 頁督察

有很多事情在這裡，但讓我們打破：

  • 在視窗的 chrome 是瀏覽器幀。 你可以看到在頂部的網址列。
  • 頁面的上半部分是實際的 Web 頁，因為瀏覽器中呈現。
  • 左下角是呈現的頁的 HTML 標籤。 這是因為在直接上面的選項卡中選擇了 HTML。
  • 右下角是呈現的頁的樣式。

類似的工具在瀏覽器中，發現有一種稱為檢查功能。 當您選擇檢查，如你在頁面中移動時，您會看到不同的 DOM 元素突出顯示和標記。 在圖 15，該元素是 hgroup 的類稱為標題。 您還將看到在 HTML 視窗中突出顯示的相應標記。 發生這種情況即時為您移動文檔。 好像還不夠酷，看一看圖 16。 我已經選定或懸停在檢查器頁面中的元素，它後面你可以看到它在正確的原始檔案所在的文本中突出顯示。 這不只是發生在元素級別，但一直到字元。 它是活字元的字元、 雙向映射從源頭到呈現輸出。 無論你選擇 （源或呈現的輸出），你會看到它突出顯示。

Mapping Between Source and Rendered Output
圖 16 源和呈現的輸出之間的映射

我只被抓了抓表面的頁面檢查器的功能。 這是那些功能，您需要使用完全瞭解它如何使你的生活更容易之一。 準備會驚訝的發現。 下次你在 Web 專案中，在頁面上按右鍵，然後在頁面檢查器中選擇視圖。

發佈

有什麼好處是一個網站，如果你不能將其部署？ Visual Studio 長了用於部署網站，包括一種稱為發佈設定檔功能的支援。 從歷史上看，一旦它創建一個設定檔是只有一個本地機器的資產。 Visual Studio 到 2012 年，在此設定檔現在是整體專案資產的一部分。 它是一個簡單的 MSBuild 檔，將獲取導入到您整體的 MSBuild 鏈。 下面是一個簡單的 FTP 設定檔可能會是什麼樣子：

<Project ToolsVersion="4.0"
  xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FTP</WebPublishMethod>
    <SiteUrlToLaunchAfterPublish>http://thatconference.com
      </SiteUrlToLaunchAfterPublish>
    <publishUrl>ftp://thatConference.com</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <FtpPassiveMode>True</FtpPassiveMode>
    <UserName>foooooo</UserName>
    <_SavePWD>True</_SavePWD>
  </PropertyGroup>
</Project>

您可以找到這些設定檔保存在總體專案屬性資料夾中：

  • C# — — Properties\PublishProfiles
  • Visual Basic — — MyProject\PublishProfiles

因為它是 MSBuild 專案檔案，當然你可以稱它從命令列中，如下所示：

msbuild.exe myProject.csproj /t:WebPublish /p:PublishProfile = ProfileName

在 Windows 8 的 HTML5

在去年的生成會議上，微軟宣佈建設本機應用程式對 Windows 8 的一種新的程式設計模型。結果證明，這種新的程式設計模型真的新根本不是 ； HTML5，CSS3 和 JavaScript 來構建應用程式只需新依賴發展故事的一部分。這意味著 Web 開發背景的人有一種技能設置適用于為 Windows 8 編寫本機應用程式。當然，Visual Studio 是右有説明。

編輯討論過這裡的改進核心的一些開發 Windows 存儲的應用程式，但頁督察 （因為 Windows 存儲應用程式不在瀏覽器中運行） 仍然適用。如何，然後，調試 HTML5 Windows 存儲應用程式？DOM 資源管理器和 JavaScript 主控台中，如中所示的圖 17。

The DOM Explorer圖 17 DOM 資源管理器

隨著頁面檢查器中，可以從運行的應用程式中選擇元素，並直接轉到源中的位置。您可以查看應用的樣式並應用程式正在運行時更改的值。想要將中斷點放在一些 JavaScript 中嗎？去吧，，然後做一些即時調試。你甚至可以解雇了 JavaScript 主控台和各地駭客攻擊的開始。無論是否您正在構建一個 Web 網站或應用程式的 Windows 8，它是一樣的與跨一個偉大編輯器中的這兩個平臺相同的功能。

如果你正在讀這篇文章，很不錯您使用 Visual Studio。我已經用它自己十多年來，我學到的每個主要版本它是好以提醒自己探索的所有新功能。它有時堅持只與你已經瞭解，所以去和逛太容易。很高興見到 Visual Studio 設施就地升級隨著標準的變化的同時擁抱像 HTML5 和 CSS3 ECMAScript 5，當前的技術。

Clark Sell  作為微軟在芝加哥以外的高級 Web 和 Windows 8 福音的工作。在他博客 csell.net，在播客 DeveloperSmackdown.com ，可以發現在 Twitter 上 twitter.com/csell5。

由於下面的技術專家，檢討這篇文章：Matt Carter 和 Orville McDonald