作者:陈希章 发表于 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进行过多展开,但我充分理解现在在看文章的你,可能会有这样的感慨:哇,看起来不错!嗯,又要学新东西了。

这是一个事实,但是我相信你会最终喜欢这种变化。欢迎来到一个全新的,动态的世界。

在Visual Studio Code中开发Office Add-in的更多相关文章

  1. Visual Studio Code中配置GO开发环境

    在Visual Studio Code中配置GO开发环境 一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的 ...

  2. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

  3. Visual Studio Code中文文档(一)-快速入门

    Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...

  4. 在 Visual Studio Code 中使用 PoweShell - CodeShell

    一直希望在 Visual Studio Code 中使用 PowerShell,插件 CodeShell 提供了对于 PowerShell 的支持. 安装 首先按 F1,打开命令窗口,输入安装插件的命 ...

  5. 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序

    原文 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 Jim ...

  6. Visual Studio Code中文文档

    Visual Studio Code中文文档 Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行. ...

  7. 如何在"Visual Studio Code"中使用" Git" 进行版本控制

    如何在"Visual Studio Code"中使用" Git" 进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 ...

  8. Visual Studio Code 远程开发探秘

    摘要: IDE新时代! 作者:SHUHARI 的博客 原文:Visual Studio Code 远程开发探秘 Fundebug按照原文要求转载,版权归原作者所有. 在以前的文章 有趣的项目 - 在浏 ...

  9. Visual Studio Code IDE开发插件配置

    [PHP通用集成环境] PHP Extension Pack #PHP拓展包,PHP开发最重要的拓展 PHP Intelephense #PHP自动补全工具 PHP IntelliSense #PHP ...

随机推荐

  1. Asp.Net MVC 使用 Ajax

    Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面). Ajax工作原理 Ajax ...

  2. mac下selenium+python环境搭建

    selenium2+python的环境搭建主要需要python和selenium 1.python mac下自带了python,可以查看版本.当然可以选择安装其它版本的python. 2.seleni ...

  3. Jquery中attr 和 prop的区别和联系

    昨天在选择借款方类型的时候总是会出现选择要点两次的现象,比如点击公司,第一次点击选择公司,没有选中,必须在次点击才可以选中,总感觉是有点延迟加载的意思,后来审查元素, 发现是redio元素,这样的话就 ...

  4. 前端面试题(5) 列举5种IE haslayout的属性及其值

    haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父 ...

  5. Android WebView 上传各种文件(包括拍照 录像 录音 文件 音乐 等,用到图片或拍照的,可以参考下)

    我也是从网上扒下来的,经过多次实验,找到了个好用的.网上能搜到最多的也就是这个解决方案,我英文不好,也没仔细研究,但大多数都是出自这: http://stackoverflow.com/questio ...

  6. 加密代理和Retrofit解密Converter

    最近在研究安卓的Retrofit框架,服务器的数据全部用加密算法加密了,发现无法使用"com.squareup.retrofit2:converter-gson:2.1.0"Jar ...

  7. 2733:判断闰年-poj

    2733:判断闰年 总时间限制:  1000ms 内存限制:  65536kB 描述 判断某年是否是闰年. 输入 输入只有一行,包含一个整数a(0 < a < 3000) 输出 一行,如果 ...

  8. CORS(跨站资源共享)介绍

    起因 有同学在nginx站点配置中加了一行Access-Control-Allow-Origin *,导致微信中业务数据异常,抓包看http头有两个Access-Control-Allow-Origi ...

  9. 如何编写gitignore文件

    原文链接:https://www.cnblogs.com/jingtyu/p/6831772.html 为什么要有.gitignore文件 项目中经常会生成一些Git系统不需要追踪(track)的文件 ...

  10. 分布式版本控制系统 Git 教程

    简介 Git 是什么? Git 是一个开源的分布式版本控制系统. 什么是版本控制? 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 什么是分布式版本控制系统? 介绍分布 ...