前言

本篇博客将会教你如何搭建一个基础的 VScode 插件工程。

环境要求：

• Node.js
• Git

操作步骤

1. 安装 Yeoman 以及 VSCode 插件生成器

npm install -g yo generator-code

generator 是一个脚手架，用于创建开发环境下 Typescript 及 Javascript 模板工程代码。运行 generator 为一个 TypeScript 工程填充必要的选项。

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

2. 运行 F5 后，将会打开一个插件开发者调试窗口。

   按下 ctrl+shift+p 会弹出一个输入框，输入 Hello world 则会有在右下角弹出提示框。

   

可能遇到的问题

1. 提示与 VSCode 版本号不兼容的问题。

   

   问题产生的原因：generator-code 生成的模板代码默认启动 VSCode 最低版本一般为最新版本，而当前 VSCode IDE 不是最新版本。

   解决方案：

   1. 将 package.json 中 engines 中要求的 vsocde 版本号调低几个版本，如1.70.0版本号。
   2. 或者升级 VSCode 版本号。

#

模板代码

已创建模板工程代码，可直接 git clone，操作如下：

git clone git@github.com:wangjs-jacky/vscode-extension-template.git

参考资料

1. Your First Extension (opens new window)