vscode 插件开发vscode 插件开发初始化项目官方为插件开发提供了脚手架，直接使用脚手架来生成初始项目。使

vscode 插件开发

初始化项目

官方为插件开发提供了脚手架，直接使用脚手架来生成初始项目。

# 全局安装 yo 和 generator-code 两个库（推荐使用node18以上环境）
npm install -g yo generator-code

# 使用 yo 指令生成 vscode 项目模板
yo code

使用 yo code 生成初始化项目，你能发现vscode插件能做的类型。（包含了我们日常经常有使用到的一些功能，如安装vscode后的第一件事装个中文的语言包（Localization）、装个便于React/Vue开发的插件（Language Support）、换个主题（Color Theme））


     _-----_     ╭──────────────────────────╮
    |       |    │   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) // 可以使用html、css、js生成网页，在vscode中以webview形式展现
  New Notebook Renderer (TypeScript) // 看介绍似乎是一个可以执行python的可视化笔记插件？

项目结构

贴图：

介绍下几个重点文件

├── .vscode
│   ├── launch.json     
│   └── tasks.json      
├── .gitignore        
├── README.md          
├── src
│   └── extension.ts    
├── package.json        
├── tsconfig.json

extension.ts 可以认为是插件的入口文件，所有插件执行都会从执行 activate 这个生命周期开始，我们在 extension.ts 中注册事件

export function activate(context: vscode.ExtensionContext) {

        // 注册事件 normal-extension.helloWorld
	const disposable = vscode.commands.registerCommand('normal-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from normal-extension!');
	});

	context.subscriptions.push(disposable);
}

在 package.json 中声明该事件

"contributes": {
    // 命令
    "commands": [
      {
        "command": "normal-extension.helloWorld",
        "title": "Hello World"
      }
    ],
    // 菜单
    "menus": {
      "editor/context": [
        {
          "when": "editorTextFocus",
          "command": "normal-extension.helloWorld"
        }
      ]
    }
  },

通过在 extension.ts 注册事件的回调，可以调用vscode提供的API，编写逻辑实现插件功能。在 package.json 中声明事件，将事件设置自执行，或是输入命令执行或是添加到菜单中点击执行，这就是插件制作的基本逻辑。

上边介绍可以认为是通用的插件开发选择 New Extension，接下来介绍几种其他的插件开发

color theme

在脚手架工具中选择 New Color Theme，创建项目与默认的 New Extension 插件开发不同的是，并没有 src/extension.ts 文件，而是一个 themes 和 color-theme-color-theme.json 主题配置文件

"name": "Keywords",
"scope": [
    "keyword",
    "storage"
],
"settings": {
	"foreground": "#acfb00"
}

例如可以把想要的关键字换成黄色，背景换成黑色等等，执行后就可以得到定制的主题。

webView

涉及到web的功能场景往往都可以实现的很庞大且复杂，甚至超出vscode API支持的能力，例如官网中表明vscode内置的Markdown就是通过webView来实现的。

在 extension.ts activate 中注册事件，在 package.json 中声明事件，使用 webView

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
 
  let disposable = vscode.commands.registerCommand('webview-extension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from webview-extension!');

	const panel = vscode.window.createWebviewPanel(
		'catCoding',
		'Cat Coding',
		vscode.ViewColumn.One,
		{
		  retainContextWhenHidden: true, // 保证 Webview 所在页面进入后台时不被释放
		  enableScripts: true, // 运行 JS 执行
		}
	  );
	panel.webview.html = getWebviewContent();
  });

  context.subscriptions.push(disposable);
}

function getWebviewContent() {
  return `<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cat Coding</title>
      </head>
      <body>
	    <p>I'm a Coding Cat</p>
		<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
      </body>
    </html>`;
}