在Visual Studio Code中開發Office Add-in

做者：陳希章 發表於 2017年7月13日

上一篇 我介紹瞭如何在Visual Studio中開發Office Add-in，由於有標準的項目模板，一系列配套的工具，尤爲是自帶的一鍵調試功能，可讓開發人員很快地開始探索。

有些朋友可能已經知道，Visual Studio家族這些年增長了一個新的成員—— Visual Studio Code。這是一款跨平臺的代碼編輯工具（能夠愉快地在PC,Mac,Linux上面運行），它更加輕量，主要面向新一代的Web應用開發人員而設計（毫無心外，它也吸引了包括我在內的老一輩的Visual Studio的忠實用戶的普遍關注），對幾乎全部的開源平臺和開發語言都有較好的支持。

Visual Studio Code提供了對Office Add-in 開發的完美支持，這一篇文章就帶領你們來完總體驗一下。

安裝工具

除了安裝Visual Studio Code 以外，要進行Office Add-in的開發，你還須要作一些額外的準備。這是跟Visual Studio略有不一樣的地方：它會多一些步驟，但這種留給開發人員的可控性也從必定程度上促使咱們瞭解更多細節，我想這也是有很多開發人員喜歡Visual Studio Code（或者同類以代碼爲中心的編輯器）的緣由之一吧。

1. 安裝node.js。node.js 是這幾年涌現出來的一個廣受歡迎的全新開發工具，它顛覆了咱們對於Javascript能力邊界的認識，而且在高併發，但低計算的Web應用場景有較好的表現。關於這個話題，若是要展開來又能夠講幾天幾夜了，因此就此打住，請經過https://nodejs.org/en/download/ 進行安裝而且經過下面的命令確認其是否安裝正確。
2. 安裝node.js版本的Office add-in模板。雖然Visual Studio Code強調以代碼爲中心，但也不是說什麼都要從零開始作。node.js的不少開發場景，也都有配套的模板來輔助開發。要實現這個目的，首先須要安裝一個yo的模塊。這是頗有意思的，yo其實不是模板，而是一個工具，用來加載模板（或者在它來看是所謂的生成器—— generator）。下面這一行命令，既安裝了yo，也安裝了一個office開發對應的generator。

npm install -g yo generator-office

yo 這個工具的全稱是yeoman, 有興趣請參考它的官方網站 http://yeoman.io/, 甚至也能夠提交本身的generator

建立項目

作了上述的準備後，咱們就能夠經過一句命令來建立Office Add-in 項目了

yo office

此時一樣會有一個嚮導問你幾個問題，在你作出本身的選擇而且最終按下回車鍵後，它就會自動地生成一個office add-in項目出來，這是一個基於node.js的項目。

若是你的最後一個問題跟我同樣回答了「Yes」的話，在項目生成後，還會自動打開一個很貼心的操做指南

經過下面的命令能夠將這個項目運行起來

npm start

調試項目

那麼，怎麼讓這個add-in在Excel裏面運行起來呢？上面提到的操做指南給出了一個步驟

可是，這個步驟多是錯誤的。我在最新版本的Office 客戶端中並無看到上傳add-in的連接。通過一些研究，我發現下面的方法是奏效的。

Sideload Office Add-ins for testing https://dev.office.com/docs/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins

簡單地說，你須要將add-in的manifest文件複製到一個共享目錄

而後將這個目錄加入到Office客戶端的信任位置中去

如你所見，這裏還能夠設置其餘一些catalog的路徑，包括SharePoint站點。這個會在後續進行介紹。

完成上述步驟後，你就能夠在插入add-in的窗口中看到相關的add-in了

若是點擊「Add」，Excel會加載這個Add-in。做爲一個尚未作過任何改動的標準add-in，它目前作的事情只會增長一個Show Taskpane的按鈕，點擊以後就能夠打開任務面板。

須要注意的是，Office Add-in要求的Web Url是使用https的，而在本機測試的時候，由於證書是自簽名的，因此會顯示錯誤，但能夠點擊查看詳情，繼續運行

若是有興趣，你能夠留意一下此前那個命令行窗口

使用Visual Studio Code進行編程

使用Visual Studio Code打開這個項目（準確來講是一個目錄，由於在Code裏面其實沒有項目的概念）後，會看到以下的目錄結構

最右側的manifest不用多說了，內容跟上一篇文章的例子是基本相同的。有意思的是中間的app.ts文件。這又是什麼呢？

ts文件是TypeScript文件，而TypeScript是一種自由和開源的編程語言。它是JavaScript的一個嚴格的超集，而且添加了可選的靜態類型和基於類的面向對象編程。TypeScript是著名的Turbo Pascal，Delphi和C#的發明者 安德斯·海爾斯伯格 的又一力做。很榮幸，神通常存在的安德斯是我如今的同事。

我不許備在這裏對TypeScript進行過多展開，但我充分理解如今在看文章的你，可能會有這樣的感慨：哇，看起來不錯！嗯，又要學新東西了。

這是一個事實，可是我相信你會最終喜歡這種變化。歡迎來到一個全新的，動態的世界。