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文件。
命令行工具
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 # 新建项目
安装依赖后,按下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