基础准备

安装vscode插件开发脚手架

开始前请确保已经安装了node.js和git。
1.全局安装vscode插件脚手架

  1. npm install -g yo generator-code

2.启动脚手架

  1. yo code

image.png
出现此画面，说明安装成功了。

创建插件

1.选择插件类型

  1. What type of extension do you want to create? (Use arrow keys)
  2. ❯ New Extension (TypeScript) // 不明确插件类型 使用TS
  3.   New Extension (JavaScript) // 不明确插件类型 使用JS
  4.   New Color Theme // 颜色主题插件
  5.   New Language Support // 语言插件
  6.   New Code Snippets // 代码片段插件
  7.   New Keymap // 快捷键插件
  8.   New Extension Pack // 打包功能的插件
  9.   New Language Pack (Localization) // 新的语言打包功能的插件

如果插件可能包含多种功能，推荐选择New Extension (TypeScript)或New Extension (JavaScript)。
2.生成插件
选择完插件类型，根据提示依次选择填写插件信息后会自动生成插件。
image.png
3.插件目录
image.png

  1. |-- .vscode
  2.    |-- extensions.json // 工作区推荐扩展配置
  3.    |-- launch.json // 插件加载和调试的配置
  4.    |-- settings.json // vscode配置
  5.    |-- tasks.json // 配置TypeScript编译任务
  6. |-- src
  7.    |-- test // 插件单测文件
  8.    |-- extension.js // 插件入口文件
  9. |-- .eslintrc.json // eslint配置文件
  10. |-- .gitignore // git忽略配置文件
  11. |-- .vscodeignore // vscode忽略配置文件
  12. |-- CHANGELOG.md // 修改日志，发布后会展示
  13. |-- package-lock.json
  14. |-- package.json
  15. |-- README.md // 插件说明，发布后会展示
  16. |-- tsconfig.json // ts配置
  17. |-- vsc-extension-quickstart.md //插件开发说明

插件解析

运行调试

打包发布