VSC 插件开发从入门到Hello World

时间 2019-12-13

标签 vsc 插件开发入门 hello world 繁體版

原文原文链接

一、原理放一边，咱们先来个Hello,World

1.1 安装基础环境

须要的基础环境列表：javascript

Node.js
npm
vs code
yo generator-code

yo:全称Yeoman,能够把他理解为一个代码生成器
yo generator-code:是vsc团队基于yo编写的vsc插件的代码生成器

安装npm后经过下面的命令，安装yo generator -corehtml

npm install -g yo generator-code

1.2 生成你的第一个VSC插件项目

执行下面的命令：java

yo code

执行命令后，是下面一番景象：git

这里咱们先选择New Code Snippets（代码片断）github

接着是各类让你选择的东西，咱们能够按下面的方式选（粗体为你须要敲的字符）：typescript

? Folder name for import or none for new:直接回车
? What's the name of your extension? hello-world
? What's the identifier of your extension? hello-world
? What's the description of your extension? it's a demo
? Language id: html

完事儿以后，就会帮你建立出来一个hello-world的文件夹，里面建立好各类须要的文件，咱们用VSC打开这个文件夹，大概是这样一个画风：npm

咱们打开snippets\snippets.json文件，并将其内容改成以下：编程

  1 {
  2     "hello world": {
  3         "prefix": "hw",
  4         "body": [
  5           "<h1>hello world</h1>"
  6         ],
  7         "description": "hello world"
  8       }
  9 }

1.3 调试扩展

在VSCode中，直接按下F5，稍等片刻即会自动启动一个新的VSCode窗口，在这个新的窗口中，就是已经加载了咱们刚才编写的hello-world这个扩展。json

咱们能够经过ctrl + n建立一个新的页面，并将点击右下角的plan text，在弹出窗口中选择html，将文件类型改成html，而后在新的页面中键入hw,就能够看到咱们刚写的hello-world的代码片断已经生效啦。api

下面是一张成功后的动图：

2. VSC 扩展初探

2.1 使用VSC扩展，咱们能作哪些事儿？

如下内容来自：https://code.visualstudio.com/api/extension-capabilities/overview

基础版
- 注册命令、配置、快捷键、右键菜单等
- 存储工做空间或者全局数据
- 显示消息通知
- 使用快速选择，收集用户输入
- 打开系统文件选择器，便于用户选择文件或文件夹
- 使用Progress API显示长时间运行的操做
定制主题
- 更改代码的颜色
- 更改VSC UI的颜色
- 自定义文件图标
声明语言特性
- 创造一门新的语言，告诉VSC新语言的语法等语言信息
- 添加经常使用代码片断
- 添加、替换编程语言的语法
- 使用语法注入扩展示有语法
程序化的语言功能
- 添加显示API的示例用法的悬停
- 检测代码的语法错误、拼写错误、不规范的代码
- 格式化代码
- 为语言添加智能提示
扩展Workbench

添加自定义上下文菜单操做到文件资源管理器
在侧栏中建立一个新的交互式TreeView。
定义新的活动栏视图。
在状态栏中显示新信息。
使用WebViewAPI 呈现自定义内容。
贡献源控制提供商。

调试
- 经过提供调试适配器实现，将VS Code的调试UI链接到调试器或运行时。
- 指定调试器扩展支持的语言。
- 为调试器使用的调试配置属性提供丰富的IntelliSense和悬停信息。
- 提供调试配置片断。
- 根据动态建立的调试配置启动调试会话。
- 跟踪调试会话的生命周期。
- 以编程方式建立和管理断点。

是否是有点眼花缭乱？没错，VSC几乎能够扩展全部的东西！

那有没有什么不能扩展？

有！那就是出于安全考虑，禁止扩展访问VSC的DOM元素！

啥？DOM元素？没错，VSC就是基于HTML + JavaScript编写的

2.2 回头仔细看看hello-world扩展

2.2.1 package.json

package.json文件中，其实放的不少东西是咱们刚才在使用命令行初始化时敲的内容，以下：

 
 
 
 
 
  
  
  
  
    1 {
  2     "name": "hello-world", // 扩展名称（ID）
  3     "displayName": "hello-world", // 扩展展现名称
  4     "description": "it's a demo", // 扩展描述
  5     "version": "0.0.1", // 版本号
  6     "engines": {
  7         "vscode": "^1.32.0" // 兼容的VSC的版本，^1.32.0表示从兼容1.32.0以上的版本
  8     },
  9     "categories": [ // 插件的类型
 10         "Snippets" //表示该插件中会包含代码片断，
 11     ],
 12     "contributes": { // 一些额外的信息
 13         "snippets": [ // 用于代码片断的额外信息
 14             {
 15                 "language": "html", //该代码片断的语言是html
 16                 "path": "./snippets/snippets.json" // 代码片断位于该文件中
 17             }
 18         ]
 19     }
 20 }

那个人项目中，可能不单单有html，还会有typescript、javascript怎么办？

其实很简单，只须要在contributes下的snippets节点中增长便可，相似以下：

  1 {
  2     "name": "hello-world",
  3     "displayName": "hello-world",
  4     "description": "it's a demo",
  5     "version": "0.0.1",
  6     "engines": {
  7         "vscode": "^1.32.0"
  8    },
  9     "categories": [
 10         "Snippets"
 11    ],
 12     "contributes": {
 13         "snippets": [
 14            {
 15                 "language": "html",
 16                 "path": "./snippets/snippets-html.json"
 17            },
 18            {
 19                 "language": "typescript",
 20                 "path": "./snippets/snippets-ts.json"
 21            },
 22            {
 23                 "language": "javascript",
 24                 "path": "./snippets/snippets-js.json"
 25            }
 26        ]
 27    }
 28 }

固然了，path对应的json文件，也须要手动建立一下。

2.2.2 snippets 文件夹

snippets文件夹下面存放的是代码片断，该目录名字不是固定的，只要与package.json中配置的代码片断目录一致便可。

2.2.3 README.md 文件

用户在VSCode插件中的Detail中展现的内容，用来存放插件的描述文件。

2.2.4 CHANGELOG.md

插件的变动记录

2.2.5 .vscode 文件夹

是VS Code的一些信息，默认生成的项目中，主要用来存放Debug时的一些配置。

3. 如何发布扩展

出于公司代码安全和IT策略限制，咱们公司内部的扩展绝对不容许直接发布到VS Code Extension MarketPlace，因此本节只讨论如何在公司范围内发布VS Code扩展

3.1.安装VSCE

 
 
 
 
 
  
  
  
  
  npm install -g vsce

3.2 添加publisher

VS Code在发布时，须要在package.json中定义publisher,咱们调整下上面hello-world扩展中的package.json为以下：

  1 
  2 {
  3     "name": "hello-world",
  4     "displayName": "hello-world",
  5     "description": "it's a demo",
  6     "version": "0.0.1",
  7     "engines": {
  8         "vscode": "^1.32.0"
  9     },
 10     "publisher": "jax",
 11     "categories": [
 12         "Snippets"
 13     ],
 14     "contributes": {
 15         "snippets": [
 16             {
 17                 "language": "html",
 18                 "path": "./snippets/snippets.json"
 19             }
 20         ]
 21     }
 22 }

3.3 填写Readme.md

在上面第二节中已经提到过readme.md的做用了，vsc团队要求在发布时，必定不能用默认生成的readme.md的内容，那咱们就随便改改吧（建议实际操做时，按VSC建议的格式认真写）

3.4 打包成.vsix

在插件根目录执行下面的命令：

 
 
 
 
 
  
  
  
  
  vsce package

此时它会报个警告信息，让你确认：


A 'repository' field is missing from the 'package.json' manifest file.

这个是因为咱们没有在package.json中填写repository字段，能够直接忽略该警告，也能够将你放扩展的源码Git路径填写一下，例以下面这样：

{
    "name": "hello-world",
    "displayName": "hello-world",
    "description": "it's a demo",
    "version": "0.0.2",
    "engines": {
        "vscode": "^1.32.0"
    },
    "publisher": "jax",
    "repository": {
        "url": "https://github.com/"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

从新执行上面的打包命令，他就会自动生成出一个hello-world-0.0.2.vsix文件。

3.5 安装扩展

有了这个扩展，你就能够给你的小伙伴拿去安装啦，那怎么安装呢？

首先，在VS Code中按F1,并选择Extensions:Install from VSIX...这个选项，而后在弹出框中选择刚才经过vsce打包出来的hello-world-0.0.2.vsix文件便可安装完成。

安装完成后，咱们能够在扩展中找到咱们的扩展：

4. 相关资料推荐

官网文档：https://code.visualstudio.com/api
官方Demo:https://github.com/Microsoft/vscode-extension-samples