插件篇 Vscode|Node Devops专题 | 前端进阶之旅

# 前言

这一章也是比较独立的，它是研发工具链的衍生，没有它并不会对工具链有影响但有它能够大幅度提高用户开发体验。

大部分的开发者是想打造一站式、沉浸式的研发体验，那么在前端开发中，使用到最多比较热门的软件开发工具有 Vscode，那么 Vscode 的插件开发也就顺理成章了。

它跟 CLI 的区别是，基于自定义的 webView 能够提供给研发一个可视化的操作界面，同时可以与开发过程绑定，最后插件开发比较简便，Vscode 天然支持 TypeScript，对前端开发者非常友好，所以在你的 CLI 工具完成之后，就可以着手准备插件开发，进一步提高用户体验了。

# 开发属于自己的插件

# 初始化模板

npm install -g yo generator-code

@前端进阶之旅: 代码已经复制到剪贴板

初始化完毕之后直接按 F5 进入调试开发模式

初始化完毕的代码目录结构如下所示：

├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置 TypeScript 编译任务
├── .gitignore
├── README.md           // 插件文档
├── src
│   └── extension.ts    // 插件源代码
├── package.json        // 插件配置清单
├── tsconfig.json       // TypeScript 配置

@前端进阶之旅: 代码已经复制到剪贴板

# 集成 WebView

由于我们已经有一个 CLI 工具，而且提供非常多的功能，对 Vscode 插件来说，我们只是为了将功能作为可视化而已，所以不需要重头开始开发，直接使用 CLI 作为底层库来开发业务功能即可（这里就利用到了我们之前 CLI 暴露的方法，之前的设计没有直接使用 commander 调用方法，而是封装统一出口之后在提供给 commander 使用，就是为了应对这些问题）。

package.json 激活事件 + 注册命令，这里选择任意事件激活，毕竟我们集成的事件比较多。

  "activationEvents": [
    "*"
  ],
  "contributes": {
    "commands": [
      {
        "category": "FECLI",
        "command": "FECLI.showCommands",
        "title": "显示所有操作"
      },
    ],
    "menus": {
      "explorer/context": [
          {
            "category": "FECLI",
            "command": "FECLI.overview",
            "title": "DEVOPS 首页"
          },
      ]
    }
  },

@前端进阶之旅: 代码已经复制到剪贴板

注册命令

修改 extension.ts

import * as vscode from 'vscode';
import { initialize as initCommands } from "./commands";
import { showOverviewPageOnActivation } from "./pages/overview";
import { initCommit } from "./commit";
import { initStatusBar } from './components/statusBar';

export function activate(context: vscode.ExtensionContext) {
	initCommands(context); // 注册命令
	showOverviewPageOnActivation(context); // 注