目录

• VSCode插件能做什么?
  
• VSCode可扩展能力有哪些？
• 如何开发一个VSCode插件?
• VSCode插件如何集成基建的脚手架和组件库？（FAW保姆级教程）
• 前端常见插件的实现原理分析？

  
  

前言

• VSCode插件能做什么？

  
  
• 如何开发一款VSCode插件？

  
  
• VSCode中如何嵌入webview？

  
  
• VSCode中如何配置国际化？

  
  
• VSCode插件中如何新建项目、新建页面、组件...？

  
  

VSCode插件能做什么

• 语言类插件
• 语法高亮（Vetur）
• 代码自动补全（TabNine）
• 代码片段（JS JSX Snippets）
• 工具类插件
• 可视化搭建页面（面向开发者的低代码）（AppWorks）

  
  
• 时间管理（WakaTime）
• Git管理（Git Graph）

  
  
• TODO（TODO Tree）

VSCode可扩展能力

本章大部分内容在官网中已有说明，此次做简单了解

基于Electron能力

• 支持读取本地文件
• 支持发送接受跨域请求
• 支持创建本地服务器
• 持久化存储本地数据

可扩展能力

扩展工作台

• 活动栏（Tree View Container）：Azure 应用服务扩展添加了一个视图容器
• 侧边栏（Tree View）：内置的 NPM 扩展在 Explorer 视图中添加了一个树视图
• 编辑器组（Webview）：内置的 Markdown 扩展在编辑器组中的其他编辑器旁边添加了一个 Webview
• 状态栏（Status Bar）：

  VSCodeVim

  扩展在状态栏中添加了一个状态栏项

扩展编辑器

• 基于正则编辑页面中的内容
• 例如：删掉当前页面所有注释或

  log

  
  
• 自定义跳转、自动补全、悬浮提示
• 例如：输入

  rfc

  自动补全代码
• 对特定后缀名文件的解析和编辑
• 例如：借助插件

  vetur

  解析

  .vue

  文件
• 增强

  VSCode

  内置的

  MD

  预览和

  Git

  工具
• 例如：美化预览

  .md

  文件

限制

开发插件

初始化项目

npm i -g yo generator-code

yo code
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
## Press <Enter> to choose default for all options below ###

? What's the identifier of your extension? helloworld
? What's the description of your extension? LEAVE BLANK
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

? Do you want to open the new folder with Visual Studio Code? Open with `code`

.
├── package.json # 插件配置
├── src
│   ├── extension.ts # 入口文件
├── tsconfig.json

{
  // 扩展的激活事件
  "activationEvents": [
    "onCommand:extension.sayHello"
  ],
  // 入口文件
  "main": "./src/extension",
  // 贡献点，vscode插件大部分功能配置都在这里
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World"
      }
    ]
  }
}

const vscode = require('vscode');
// 插件被激活时触发，所有代码总入口
exports.activate = function(context) {
  // 注册命令 与`package.json`中`contributes.commands`
  context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', function () {
    vscode.window.showInformationMessage('Hello World!');
  }));
};
// 插件被释放时触发
exports.deactivate = function() {};

集成Webview

mkdir web
cd web
yarn create ice
# or
yarn create @umijs/umi-app

{
  "activationEvents": ["onCommand:project-creator.create-project.start"],
  "contributes": {
    "commands": {
      "command": "project-creator.create-project.start",
      "title": "创建项目webview"
    }
  }
}

• activationEvents字段值为数组，通过onCommand注册激活事件project-creator.create-project.start，而project-creator.create-project.start将在contributes.commands中定义
• contributes字段可以配置扩展VSCode各种能力，比如commands命令、configuration配置...

  
  
• commands中的command将在src/extension.ts中进行注册事件回调

• 注册命令project-creator.create-project.start
• 创建

  webview

  面板

  projectCreatorWebviewPanel

  
  
• 如果有，则直接展示
• 如果没有，则新建
• 配置基本配置

  
  
• 标题
• 启用

  JavaScript

  脚本

  
  
• 隐藏时保留上下文
• 图标
• 设置 webview 面板内容

  
  
• 提供

  webview

  和

  vscode

  交互

  
  

提供Webview内容

如果使用其他框架比如 umijs，则采取不同的处理方式即可。

Webview和VSCode通信

• 可以在

  VSCode

  端创建

  Webview

  时绑定

  connectService

  ，在其中监听

  webview

  接收到的消息，然后调用

  VSCode

  中

  api

  能力，将执行结果返回给

  Webview

  端
• 在

  Webview

  中调用

  callService

  ，然后将事件和参数传递给

  connectService

  处理，也将处理结果传给回调函数。

  
  

国际化

• 配置项国际化

  
  
• VScode

  代码国际化
• Webview

  代码国际化

  
  

  
  

配置项国际化

{
  "projectCreator.create-project.commands.start.title": "Select Scaffold to Create Application"
}

{
  "projectCreator.create-project.commands.start.title": "选择模板创建应用"
}

"contributes": {
  "commands": [
    {
      "command": "project-creator.create-project.start",
      "title": "%projectCreator.create-project.commands.start.title%"
    }
  ]
}

VScode代码国际化

import * as vscode from 'vscode';
import I18nService from './i18n';
import * as zhCNTextMap from './locales/zh-CN.json'; // { "webViewTitle": "Create Project" }
import * as enUSTextMap from './locales/en-US.json'; // { "webViewTitle": "创建项目" }

// 注册语言表
const i18n = new I18nService();
i18n.registry('zh-cn', zhCNTextMap);
i18n.registry('en', enUSTextMap);

// 设置使用的语言
i18n.setLocal(vscode.env.language);

export default i18n;

projectCreatorWebviewPanel = vscode.window.createWebviewPanel(
  'project-creator', // webview 标识，只供内部使用
  i18n.format('webViewTitle'), // 标题
  vscode.ViewColumn.One, // 新开一个编辑器视图
  {
    enableScripts: true, // 启用 JavaScript 脚本
    retainContextWhenHidden: true, // 隐藏时保留上下文
  },
);

Webview代码国际化

然后在代码中进行使用:

VSCode插件集成基建

• 开发准备阶段

  ：

  需求评审，查阅外部或组内知识库、开发规范

  
  
• 编码&联调阶段：

  按需求场景根据外部或组内脚手架、组件库、工具库...进行编码调试

  
  
• 调式优化阶段

  ：

  数据埋点、性能优化、自动化测试...
• 构建部署阶段：大部分企业都有自研的devops解决方案
• 上线后数据采集&分析阶段：

  进行性能监控、报警、数据分析...
• 技术沉淀：

  对上述过程进行复盘、总结、抽象，进入下一轮需求开发

  
  

// 此方式可行 ✅
const code = require('/Users/careteen/Desktop/admin-umi-template/ask-for-vscode.js')
// 此方式不可行 ❌
const templateName = 'admin-umi-template'
const configName = 'ask-for-vscode'
const args = require(`/Users/careteen/Desktop/${templateName}/${configName}.js`)

// 需要根据用户填写修改的字段
const requiredPrompts = [
  {
    type: 'input',
    name: 'repoNameEn',
    message: 'please input repo English Name ? (e.g. `smart-phone`.focus.cn)',
  },
  {
    type: 'input',
    name: 'repoNameEnCamel',
    message: 'please input repo English Camel Name ?(e.g. smart-case.focus.cn/`smartPhone`)',
  },
  {
    type: 'input',
    name: 'repoNameZh',
    message: 'please input repo Chinese Name ?(e.g. `智能话机`)',
  },
];
return {
  requiredPrompts,
};

// 模板