构建 VS Code Extension，提高 Flutter 开发效率（二）：从零开始

前言

笔者很少写基础的东西，主要原因是掘金上很多大佬都写的很好了。但日新计划你懂得，只写设计架构和思想基本就快被榨干了。

所幸，关于如何写 VS Code Extension 的文章更多的是更基础的搭建和 API 介绍等，讲实战的很少，那这篇从0开始讲起，把上一篇介绍的能力是如何实现的一一拆解介绍给大家。

起步

初始化工程

（略）

基本按照网上的教程来就行了 npm install -g yo generator-code，微软的东西入门都非常快，这里就不水字数了。

package.json

这个需要着重讲一下，毕竟 package.json 配置好了项目就完成了一半[手动狗头]。

网上的很多说明只相当于官网文档的翻译，真正还是要自己摸索才可用，那这里把笔者觉得重要的说明直接写在注释上：

{"name": "gaoding-flutter-components-kit","displayName": "Gaoding Flutter Develop Kit", // 显示的名称"icon": "assets/icon.png", // 显示的图标，这里官方推荐是用在线地址，但这里用相对路径也可以"keywords": [ // 搜索关键字"Gaoding","flutter"],"activationEvents": [ // 扩展触发的事件，相当于一个插件启动监听"onLanguage:dart", // 在 `dart` 文件中启动"onLanguage:yaml", // 在 `yaml` 文件中启动"onStartupFinished" // 在 VS Code 加载完成后启动（推荐）],"contributes": { "commands": [ // 各种命令配置{"command": "gaoding-flutter-components-kit.runGenerateAPI", // 命令，代码里通过这个流转"title": "run generate api", // 标题和分类都是用于界面选择的"category": "GaodingFlutter","icon