VSCode 插件开发-从零到WebView+React

lxf2023-11-25 22:50:01

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)

可以根据自己的需要进行选择,这里我选择了第一个,然后会提示输入插件名称、描述等信息,然后就会自动生成一个项目,如下图所示:

VSCode 插件开发-从零到WebView+React

这个工程创建出来是直接就可以使用的,按“F5”或者“运行->启动调试”,就可以运行起来插件了,第一次运行会进行编译,然后会拉起一个新的 VSCode 窗口,如下图所示:

VSCode 插件开发-从零到WebView+React

然后,按“Ctrl+Shift+P”或者“Command+Shift+P”,弹出如下命令窗,输入“Hello World”,如下图所示:

VSCode 插件开发-从零到WebView+React

最后,点击执行这个命令,就会弹出插件代码中写的弹窗,如下图所示:

VSCode 插件开发-从零到WebView+React

以上就是 VSCode 插件开发起步的过程。

Webview

Webview 功能是 VSCode 开放给开发者的一个 Web 页面功能,有了这个功能,我们就能在 VSCode 中写前端页面,并且这些页面可以使用一些 API 与 VSCode 进行交互。

Webview API | Visual Studio Code Extension API

编写一个简单的页面

下面这个是官方给的例子,打开一个