VS Code 插件开发概览

前言

VS Code作为开发者的代码开发利器，越来越受开发者的喜爱。像我身边的前端，每天80%的开发工作都是在VS Code上完成的。随着人们对它的使用，不再满足简单的优雅，舒服写代码这一基本需求。有些人利用它进行摸鱼，看小说，查股票，看文章，下五子棋。当你在VS Code的插件市场输入摸鱼二个字时，会有20多个插件供你选择。 本篇文章就来概述一下 VS Code的能力，并帮你快速建立插件文档的索引。

插件功能

插件能够实现以下功能

• 自定义各类文件的图标和主题颜色
• 添加自定义组件和UI
• 使用html创建功能丰富的webview
• 支持新的编程语言
• 支持特殊的调试手段

组件的各大模块

案例大集合

插件的官方案例大集合 https://github.com/microsoft/vscode-extension-samples 看了这里提供的案例，能够了解大部分场景的开发范式。

每个插件的目录大致是相同的，这也是官方约定的标准插件目录。

案例

UI组件

vscode提供了很标准的UI，在制作插件时要严格按照要求，比如图标的大小16*16的svg文件。

以下是官方的UI区域划分

命令行工具

yo 与 generator-code

按照

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

按钮位置

你可以利用插件在vscode中注入很多的自定义按钮，各个位置。vscode支持的位置包括这些 https://code.visualstudio.com/api/references/contribution-points#contributes.menus

本地开发组件步骤

本地开发的步骤很简单

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

案例2

安装依赖后，按下F5键就会打开一个新的窗口，这是用于调试的。 修改代码后，重新reload 就能生效。

Published https://code.visualstudio.com/api/working-with-extensions/publishing-extension

npm install -g @vscode/vsce

vsce package

vsce login <publisher name>

vsce publish

When 条件

在注入按钮时有时需要一些条件判断， 比如，当前打开的是某类文件时，才会显示某个按钮。 这些判断条件的编写应该遵循以下这个文档 https://code.visualstudio.com/api/references/when-clause-contexts

插件的概览 指导 https://code.visualstudio.com/api/extension-guides/overview

编写组件的业务逻辑能够使用的VS code api https://code.visualstudio.com/api/references/vscode-api#tasks.registerTaskProvider