在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(或者同类以代码为中心的编辑器)的原因之一吧。
- 安装node.js。node.js 是这几年涌现出来的一个广受欢迎的全新开发工具,它颠覆了我们对于Javascript能力边界的认识,并且在高并发,但低计算的Web应用场景有较好的表现。关于这个话题,如果要展开来又可以讲几天几夜了,所以就此打住,请通过https://nodejs.org/en/download/ 进行安装并且通过下面的命令确认其是否安装正确。
- 安装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的更多相关文章
- Visual Studio Code中配置GO开发环境
在Visual Studio Code中配置GO开发环境 一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的 ...
- SharePoint Framework 在Visual Studio Code中调试你的本地解决方案
博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...
- Visual Studio Code中文文档(一)-快速入门
Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...
- 在 Visual Studio Code 中使用 PoweShell - CodeShell
一直希望在 Visual Studio Code 中使用 PowerShell,插件 CodeShell 提供了对于 PowerShell 的支持. 安装 首先按 F1,打开命令窗口,输入安装插件的命 ...
- 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序
原文 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 Jim ...
- Visual Studio Code中文文档
Visual Studio Code中文文档 Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行. ...
- 如何在"Visual Studio Code"中使用" Git" 进行版本控制
如何在"Visual Studio Code"中使用" Git" 进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 ...
- Visual Studio Code 远程开发探秘
摘要: IDE新时代! 作者:SHUHARI 的博客 原文:Visual Studio Code 远程开发探秘 Fundebug按照原文要求转载,版权归原作者所有. 在以前的文章 有趣的项目 - 在浏 ...
- Visual Studio Code IDE开发插件配置
[PHP通用集成环境] PHP Extension Pack #PHP拓展包,PHP开发最重要的拓展 PHP Intelephense #PHP自动补全工具 PHP IntelliSense #PHP ...
随机推荐
- Nodejs前端服务器压缩图片
Nodejs作为前端服务器,自然能承担处理图片的能力, 使用GM for nodejs 作为图片处理器,调用ImageMagick处理图片 使用ImageMagick var imageMagick ...
- Shell 快速指南
Shell 快速指南 ███████╗██╗ ██╗███████╗██╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ███████╗███████║█████╗ ██║ ...
- jqGrid数据表格
方式一: <!DOCTYPE html><html><head><meta charset="utf-8" /><title& ...
- (一)IDEA工具开第一个springboot应用之helloworld
(一)IDEA工具开第一个springboot应用之helloworld 一.前置知识 1.maven相关知识 2.spring注解 3.RESTful API 二.idea开发第一个springbo ...
- Eclipse创建一个JAVA WEB项目
继上一篇博客,Eclipse的Tomcat已经配置好了,现在我们开始创建web项目. 1.打开Eclipse,选择菜单栏的file>New>Dynamic Web Project 弹出窗口 ...
- java版Web Socket,实现消息推送
# web socket是什么? WebSocket协议是基于TCP的一种新的网络协议. 它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端. ## 用途 实时 ...
- WCF、WebAPI、WCFREST、WebService之间的区别和选择
转载翻译,原文:http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-a ...
- 【原创】1、简单理解微信小程序
先看下网站的运行方式: 而小程序是这样: what?就这样?是的,就这样.那小程序官方提供的Wafer,还有Wafer2...想太多了,抛弃它们吧.不应当为了解决一个简单的旧问题而去整一个复杂的新问题 ...
- Nginx的知识分享,技术分享
3. Nginx常用命令管理及升级 查看nginx进程 ps -ef|grep nginx 说明:nginx的进程由主进程和工作进程组成. 启动nginx nginx 启动结果显示nginx的主线程和 ...
- Spring之bean一基础
在前面得博客依赖注入与控制反转中演示了应用spring实现ioc,在ApplicationContext.xml中有bean的配置,里面只是bean简单的应用.这篇主要是进一步学习使用bean. 一. ...