目录

• 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解决方案
• 上线后数据采集&分析阶段：

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

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

  
  

当我们开发一个新项目时，往往期望能参考老项目看是否能复用部分，进而减少不必要的重复性工作。

基于上面章节对VSCode插件所提供的能力介绍，我们完全可以将前端研发全链路的基建集成到我们日常编码IDE中，并且提供可视化的操作界面，让我们能安心在IDE中进行开发调试，从一定程度减少我们开发过程到处检索而分心低效的问题。

AppWorks

AppWorks是一款基于VSCode插件的前端研发工具集，通过 GUI 操作、物料组装、代码辅助等功能让前端开发更加简单。

不过由于下面几个原因，我们决定基于AppWorks做个性化改造以便满足部门内部使用。

• 他对icejs、Rax类型项目支持友好，但由于我们部门中后台项目技术选型为umijs，在使用AppWorks时面板内容显得有点冗余。
• 并且我们项目使用

  微前端

  架构，在slave项目中不少配置是期望在初始化模板时就自动配置好。
• 物料

  方面我们有自己一套组件库并且放在私有npm，自定义物料的方式也期望能保留我们当前发包结构
• 物料：

  分为组件（component）、区块（block）和项目（scaffold）三种类型

  
  

基于上述考虑，我们做了二次开发并产出了FAW，下面将从使用效果去揭秘他的核心逻辑实现。

FAW使用效果

下面示例为新建一个微前端子应用的场景

• 1. 通过点击侧边栏激活创建项目流程

  
  
• 2. 选择具体模板后点击下一步

  
  
• 3. 输入项目名称、模板版本

  
  
• 4. 如果模板提供ask-for-vscode.js文件，则根据配置生成表单
• 主要是配置publicPath、basePath、mountElementId、id...

  
  
• 5. 表单填写完毕后点击完成

  
  

• 
  

  6. 生成项目后在当前窗口打开新项目，即可进入开发

  
  

FAW整体架构

根据开发插件章节，可以将模板选择、填写配置这些交互功能放在展示层webview中实现，而将获取模板、拷贝模板并渲染这些功能交由业务层VSCode实现。

于此同时可以在入口AppWorks中“捆绑”组内高频使用插件，实现安装一个插件时可以安装一系列插件。

并且将一些公共配置项、国际化、创建项目和创建物料的核心逻辑...放入packages中使用lerna做管理并在插件中使用。

物料基本信息放在配置平台中做统一配置；项目模板存放在Gitlab做版本管理；组件库放在私有npm做管理。

FAW新建项目

逻辑类似前端工程化-打造企业通用脚手架-focus create projectName核心流程

核心流程

• 1. 点击“创建应用”，唤起webview页面

  
  

• 2. 从配置中心拉取所有“项目模板”列表

  
  

• 3. 选择“具体模板”后，拉取所有版本（版本默认约定为在Gitlab端打的tag

  
  

• 4. 选择“具体版本”后，判断当前模板是否提供ask-for-vscode.js文件

  
  

• 4.1 如果没提供则对本模板本版本做本地缓存，方便下次使用。则进入第6步
• 4.2 如果提供则根据配置项渲染为表单供开发者填写
• 配置项一般为publicPath、basePath、mountElementId、id...

  
  
• 5. 通过ncp把代码拷贝到本地临时目录，然后根据 4.2 填写的内容渲染变量在ejs模板，最后通过metalsmith遍历所有文件做插入修改

  
  

• 6. 打开新窗口并启动当前项目
• 7. 完成，开始进入代码编写

  核心代码实现

  
  

核心代码实现

其中第2步定义模板物料的结构，然后在配置平台维护一个json存放所有模板。

在第3步中选择具体模板后拉取所有版本，主要借助Gitlab提供的开放能力 https://docs.gitlab.com/ee/api/api_resources.html。

在第4步中选择具体版本后，拉取对应代码，并判断是否存在ask-for-vscode.js文件并解析其内容：

因为require需要以require(/Users/${filename}.js)的形式导入绝对路径+变量，然而我们模板的名字以及配置都名为变量，故获取不到。

// 此方式可行 ✅
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`)

所以此处采用readFileSync和new Function(code)()的方式获取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,
};

用这部分内容渲染成表单，然后再根据用户输入内容渲染ejs模板，比如配置文件config/config.ts

// 模板 👉
export default defineConfig({
  title: '<%=repoNameZh%>',
  manifest: {
    basePath: '/<%=repoNameEnCamel%>/',
  },
  base: '/<%=repoNameEnCamel%>/',
  outputPath,
  publicPath: '/<%=repoNameEnCamel%>/',
  mountElementId: '<%=repoNameEnCamel%>',
  qiankun: {
    slave: {},
  },
});
// 渲染后 👇
export default defineConfig({
  title: '智能话机',
  manifest: {
    basePath: '/smartPhone/',
  },
  base: '/smartPhone/',
  outputPath,
  publicPath: '/smartPhone/',
  mountElementId: 'smartPhone',
  qiankun: {
    slave: {},
  },
});

在第5步中进行拷贝和修改插入:

最后项目生成成功后在窗口中打开新生成的项目:

FAW新建物料

• 1. 通过命令FocusWorks: Generate Page by Blocks唤起新建页面的页面
• 2. 在面板右侧添加组件，可以在左侧进行拖拽布局
• 3.点击生成页面并输入页面名称和路由配置
• 4. 点击完成后生成页面

核心流程

• 0. 下面示例为在umi类型项目中新增一个列表页
• 1. 命令行唤起webview页面
• 2. 判断当前工作区的项目类型，然后从配置中心拉取所有“组件”列表
• 2.1 需要维护多套组件库并提供demo示例
• 2.2 先从依赖项中判断是否有umi，没有再判断是否有React，没有再判断是否有Vue
• 3. 添加组件后借助react-sortable-hoc支持拖拽布局
• 3.1 只支持纵向排列，因为组件粒度都较大，横向不好布局
• 4. 填写页面名称（PageName）和路由配置（pageName）
• 5. 从npm中下载具体组件tgz到本地临时目录并解压
• 5.1 然后将src/demo内容拷贝到第4步中所填写的页面地址的components目录下
• 5.2 并在PageName/index.tsx中插入引用组件的代码
• 6. 判断是否需要处理路由配置
• 6.1 如果没获取到config/route.ts文件则不需要配置路由，进入第7步
• 6.2 如果需要配置，则会读取config/route.ts文件内容，并插入一条路由配置
• 7. 删除第5步中下载到临时目录的文件
• 8. 完成

  
  

核心代码实现

在第2步中需要判断当前项目类型，好准确的获取对应的组件库列表。

页面物料的结构如下，粒度一般较大，比如中后台最常见的面包屑+筛选项+操作栏+列表+分页页面

第3步使用react-sortable-hoc来支持组件的拖拽布局。

第5步当点击完成时，生成页面并配置路由:

生成页面的流程如下:

• 5.1 将组件下载到本地src/pages/PageName/components/目录下
• 5.2 准备src/pages/PageName/index.tsx页面入口模板，并写入组件引用代码
• 5.3 生成src/pages/PageName/index.tsx文件

  
  

5.1 将组件下载到本地src/pages/PageName/components/目录下

• 5.1.0 准备组件库
• 5.1.1 先下载到本地临时目录.temp-block
• 5.1.2 将组件拷贝到当前项目的pages/PageName/components/目录下
• 5.1.3 删除临时目录的文件
• 5.1.4 自动安装组件的依赖

  
  

5.1.0 准备组件@focus/pro-concise-table,组件demo存放在@focus/pro-concise-table/src/demos/index.tsx

5.1.1 先下载到本地临时目录.temp-block。

5.1.4 自动安装组件的依赖

• 6.1 读取项目config/routes.ts文件内容并使用@babel/parser.parse将代码解析为AST

  
  
• 6.2 借助@babel/traverse遍历
• 6.3 将新增的路由信息拼接到

  第6.2步

  的数组末尾

  
  
• 6.4 对路由处理后重新覆盖config/routes.ts文件

FAW新建组件

• 1. 通过命令FocusWorks: Import Component或在编辑器右上方标题菜单栏中点击“+”唤起新建组件的页面

  
  
• 2. 将鼠标放置在期望新增组件的地方，点击组件的“添加”

  
  
• 3. 即可插入组件信息，并自动拷贝组件demo、安装依赖

  
  

• 1. 如果当前有激活的文件，则在右侧唤起webview
  
  
• 2. 可以在contributes.menus.editor/title中扩展编辑器标题菜单栏
  
  
• 3. 在鼠标光标处插入组件代码

2.可以在contributes.menus.editor/title中扩展编辑器标题菜单栏:

小结

FAW 的定位主要是前期老同学贡献模板和组件，对新同学特别友好，过程中新老同学一起共建，服务于整个团队。

于此同时我们捆绑了组内都在使用的其他提效插件供大家一键安装，避免新同学和组内在开发过程表现不一致的问题。

常见插件实现原理

下面简单介绍几个FAW中捆绑的插件的核心实现原理。

JSSnippet

作用：

实现JavaScript/React/TypeScript代码自动补全

仓库：

VS Code ES7+ React/Redux/React-Native/JS snippets

核心实现：

// package.json
{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets/snippets.code-snippets"
      }
    ]
  }
}
// ./snippets/snippets.code-snippets.json
{
  "typescriptReactFunctionalComponent": {
    "key": "typescriptReactFunctionalComponent",
    "prefix": "tsrfc",
    "body": [
      "import React from 'react'",
      "",
      "type Props = {}",
      "",
      "export default function ${1:${TM_FILENAME_BASE}}({}: Props) {",
      "  return (",
      "    <div>${1:first}</div>",
      "  )",
      "}"
    ],
    "description": "Creates a React Functional Component with ES7 module system and TypeScript interface",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
}

WordCount

作用：实时计算.md文件中字数

仓库：

https://github.com/microsoft/vscode-wordcount

核心实现：

import { window } from 'vscode'

const statusBarItem = window.createStatusBarItem(StatusBarAlignment.Left);
let doc = window.activeTextEditor.document;

// 只处理`.md`文件
if (doc.languageId === 'markdown') {
  let docContent = doc.getText();
  // 将边界的空格删掉
  docContent = docContent.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
  docContent = docContent.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  let wordCount = 0;
  if (docContent !== '') {
      // 获取单词数
      wordCount = docContent.split(' ').length;
  }    
  // 将当前文件的字数在左下角状态栏展示，其中`$(pencil)`是vscode提供的图标
  statusBarItem.text = `$(pencil) ${wordCount} Words`;
  // 在状态栏展示单词数
  statusBarItem.show();
}

TODOTree

作用：实现特定文本高亮

地址：

https://github.com/Gruntfuggly/todo-tree

核心代码：

// 下方为伪代码
const documentHighlights = {}
const tag = 'todo'
// 1、使用正则全局匹配todo、fixme、hack...的坐标位置
// const regex = (//|#|<!--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)/
while( ( match = regex.exec( editor.document.getText() ) ) !== null ) {
  const range = new vscode.Range( startPos, endPos )
  const decorationOptions = {
    range,
    backgroundColor: 'green',
    color: '#fff'
  }
  // 2、通过 createTextEditorDecorationType 构建文本装饰类型对象
  documentHighlights[tag] = vscode.window.createTextEditorDecorationType( decorationOptions )
}
// 3、在编辑器中设置文本装饰定义
editor.setDecorations( decoration, documentHighlights[ tag ] )
// 4、`TODO`文本高亮展示
// TODO

// 5、还可以扩展到色号字符处展示对应色值

Vetur

作用：实现.vue文件的词法高亮、代码补全、错误诊断、格式化

仓库：

https://github.com/vuejs/vetur

LSP文档：

https://www.bookstack.cn/read/VS-Code-Extension-Doc-ZH/docs-language-extensions-language-server-extension-guide.md

总结

上述核心代码存放在 https://github.com/careteenL/faw

我们首先了解了 vscode 提供哪些能力，我们能做什么。

再通过官方脚手架初始化一个项目去入门，由于 vscode 基于 electron，基于 chrome，我们能在 vscode 中集成 webview 去丰富页面。

但是由于在 webview 中不能调用接口，所以需要在vscode端进行接口调用，所以需要 vscode 和 webview 通信。

国际化的配置思路都类似。

然后基于公司内部的现状：我们期望有一个 GUI 去实现创建项目和新增页面组件。去二次开发一款 vscode 插件。

架构设计时根据功能将插件拆分，提供一个主入口，安装时自动安装相关插件。主入口还可以捆绑其他组内高频使用的插件。

然后将页面交互都交由 webview去做，核心逻辑（调接口、渲染项目、新建文件）还是交由vscode做；并采用lerna将公用逻辑进行封装，方便各个插件调用；数据部分存储在公司内部gitlab和私有npm，然后采用配置平台管理数据大json。

新建项目时和脚手架@focus/cli的逻辑基本一致，区别在于对读取提供的ask-for-vscode.js文件内容时采用fs.readFile + new Function(code)的方式进行 hack。

新建页面时需要维护一套组件库，并存放在私有npm中，然后根据用户选择去下载对应组件的tgz压缩包，然后进行解析，再拷贝到当前项目的pages/components目录下，最后还需在routes.ts文件中插入一条路由。

在代码指定位置新增组件时，和新建页面思路类似，区别在于需要获取当前鼠标的光标位置。

工欲善其事，必先利其器。我们可以在 IDE 中去集成组内的基建，能让开发同学更直观的了解和使用；并将重复性的工作抽象封装进 VSCode 插件，支撑我们15+个“宝宝”子产品的项目接入和开发，为大家开发提效。

引用

• VSCode官网：

https://code.visualstudio.com/api

• VSCode插件开发全攻略配套demo：

  
  

https://github.com/sxei/vscode-plugin-demo

• 前端工程化-打造企业通用脚手架：https://mp.weixin.qq.com/s/efzaiX8r2htJ1NvN26ZU8g

• 基于 VSCode 插件的前端研发工具

  AppWorks：

https://github.com/apptools-lab/AppWorks

• 示例代码存放仓库：

https://github.com/careteenL/faw

• 前端工程化-打造企业通用脚手架：https://mp.weixin.qq.com/s/efzaiX8r2htJ1NvN26ZU8g