前言
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 就能生效。
发布 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
