VSCode 插件 API 官方文档
VSCode 官方插件例子
VSCode 官方脚手架
VSCode 插件简介
VSCode 插件是 VSCode 为开发者提供的一种扩展其功能的手段,VSCode 的几乎每一个部分都可以通过插件来进行扩展。
具体有哪些能力可以看官方介绍
主要包含:
- 通用能力
- 主题
- 声明性语言功能
- 程序语言特性
- 工作台扩展(比如:Webview)
- 调试
VSCode 插件开发
使用官方脚手架创建项目
安装
npm install -g yo generator-code
运行
yo code
然后就出现了如下界面:
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
可以根据自己的需要进行选择,这里我选择了第一个,然后会提示输入插件名称、描述等信息,然后就会自动生成一个项目,如下图所示:
这个工程创建出来是直接就可以使用的,按“F5”或者“运行->启动调试”,就可以运行起来插件了,第一次运行会进行编译,然后会拉起一个新的 VSCode 窗口,如下图所示:
然后,按“Ctrl+Shift+P”或者“Command+Shift+P”,弹出如下命令窗,输入“Hello World”,如下图所示:
最后,点击执行这个命令,就会弹出插件代码中写的弹窗,如下图所示:
以上就是 VSCode 插件开发起步的过程。
Webview
Webview 功能是 VSCode 开放给开发者的一个 Web 页面功能,有了这个功能,我们就能在 VSCode 中写前端页面,并且这些页面可以使用一些 API 与 VSCode 进行交互。
Webview API | Visual Studio Code Extension API
编写一个简单的页面
下面这个是官方给的例子,打开一个