在 vscode 软件的基础上添加插件，相当于 vscode 的子集，在不修改 vscode 源码对基础上对先有 IDE 进行功能增强，但是受限于 vscode 的安全架构模型，功能相对比较局限，特别是 UI 类型的功能拓展改造。

基于 vscode 插件开发的 IDE

Persimware studio

PlatformIO IDE

学习资源

• 官方文档：https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/?id=%e6%8f%90%e9%97%ae%e3%80%81%e7%ba%a0%e9%94%99%e5%92%8c%e5%8f%82%e4%b8%8e

编程语言

TypeScript、JavaScript、HTML、CSS

TypeScript 学习文档

https://typescript.bootcss.com/

快速生成一个插件项目

• 先安装好Node.js和Git

• 生成项目

  npm install -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
  # ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
  # ? Setup linting using 'tslint'? Yes
  # ? Initialize a git repository? Yes
  # ? Which package manager to use? npm
  
  code ./helloworld
  

• 完成后进入 VS Code，按下F5进入调试

项目结构分析

.
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 一个友好的插件文档
├── src
│   └── extension.ts    // 插件源代码
├── package.json        // 插件配置清单
├── tsconfig.json       // TypeScript配置

功能点

树视图

视图容器/操作面板

"contributes": {
  "viewsContainers": {
    "activitybar": [
      {
        "id": "package-explorer",
        "title": "Package Explorer",
        "icon": "media/dep.svg"
      }
    ]
  }
}

视图

"contributes": {
  "views": {
    "package-explorer": [
      {
        "id": "nodeDependencies",
        "name": "Node Dependencies",
        "when": "explorer"
      }
    ]
  }
}

WebView

准备一个已经打包好的 Vue 项目，dist 目录下主入口为 index.html

添加命令：

{
  "command": "bsp.package",
   "title": "Bsp Package Tool"
}

给命令设置 action:

"onCommand:bsp.package",

注册命令：

	vscode.commands.registerCommand('bsp.package', () => {
		  // 创建并显示新的webview
		  const panel = vscode.window.createWebviewPanel( // 在编辑区展示了一个webview
			'bspPackage', // 只供内部使用，这个webview的标识
			'开发板支持包制作工具', // 给用户显示的面板标题
			vscode.ViewColumn.One, // 给新的webview面板一个编辑器视图
			{ 
				enableScripts: true, // 启用JS，默认禁用
			}
		  );
	panel.webview.html = getWebViewContent(context, panel, "example/dist", "index.html");

从某个HTML文件读取能被Webview加载的HTML内容：

function getWebViewContent(context, panel, templatePath, fileName) {
	let srcPath = path.join(context.extensionPath, templatePath);
	const srcPathUri = vscode.Uri.file(srcPath);
	const baseUri = panel.webview.asWebviewUri(srcPathUri);
	const indexPath = path.join(srcPath, fileName);
	let indexHtml = fs.readFileSync(indexPath, "utf8");
	indexHtml = `<base href="${String(baseUri)}/">` + indexHtml;
	return indexHtml;
}