一、 安装nodejs和npm

安装说明:
https://www.npmjs.cn/getting-started/installing-node/
下载地址:
https://nodejs.org/en/download/
nodejs安装包自带npm

二、 更新npm

npm i -g npm

三、 安装Yeoman

npm install -g yo generator-code

如果遇到报错

request to https://registry.npmjs.org/yo failed, reason: connect ETIMEDOUT

使用命令查看npm配置

npm config list -l

其中有这条配置https-proxy = "http://proxy-server-address:8080/"
删除代理后重新安装即可

npm config delete https-proxy

四、 生成插件项目

使用下面的命令来创建一个extension项目
项目的存放位置为命令行执行的当前目录

yo code

按照提示一步步完成即可,本文中语言选择TypeScript
如果准备使用git作为代码仓库，建议创建过程中Initialize a git repository选择yes

本文安装过程如下

C:\Users\xxxxxx>yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commandor
? What's the identifier of your extension? commandor
? What's the description of your extension? a command helper for vscode
? Initialize a git repository? Yes
? Which package manager to use? npm
   create commandor\.vscode\extensions.json
   create commandor\.vscode\launch.json
   create commandor\.vscode\settings.json
   create commandor\.vscode\tasks.json
   create commandor\src\test\extension.test.ts
   create commandor\src\test\index.ts
   create commandor\.vscodeignore
   create commandor\.gitignore
   create commandor\README.md
   create commandor\CHANGELOG.md
   create commandor\vsc-extension-quickstart.md
   create commandor\tsconfig.json
   create commandor\src\extension.ts
   create commandor\package.json
   create commandor\tslint.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.



> commandor@0.0.1 postinstall C:\Users\xxxxxx\commandor
> node ./node_modules/vscode/bin/install

Detected VS Code engine version: ^1.35.0
Found minimal version that qualifies engine range: 1.35.0
Fetching vscode.d.ts from: https://raw.githubusercontent.com/Microsoft/vscode/553cfb2c2205db5f15f3ee8395bbd5cf066d357d/src/vs/vscode.d.ts
vscode.d.ts successfully installed!

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN commandor@0.0.1 No repository field.
npm WARN commandor@0.0.1 No license field.

added 110 packages from 583 contributors and audited 184 packages in 155.138s
found 0 vulnerabilities


Your extension commandor has been created!

To start editing with Visual Studio Code, use the following commands:

     cd commandor
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

五、 运行/调试插件

用vscode打开上面步骤创建的插件目录commandor作为工作目录
键盘F5或者点击运行按钮

image.png

此时会打开另外一个VS Code作为"扩展开发宿主"

image.png

在宿主窗口按下ctrl+shift+p打开命令窗口
输入Hello World回车

image.png

宿主右下角出现弹窗，说明插件Hello World指令执行成功

image.png

在F5打开宿主之前，在源文件中加入断点即可调试插件源代码。
在宿主中输入命令Hello World并回车后即触发断点。

image.png

六、 打包插件

1. 安装vsce工具

npm install -g vsce

2. 修改项目的package.json，加入publisher属性

image.png

3 在项目目录下执行命令打包

vsce package

4 本地安装

打包成功后会在项目目录下生成vsix文件。
打开vscode的插件界面，选择从vsix安装

七、 发布插件

前提: 已经按照打包步骤说明的安装vsce工具并修改了package.json

1. 注册帐号并登陆 Azure DevOps

注册地址:
https://azure.microsoft.com/zh-cn/services/devops/
点击开始使用

image.png
注册并登陆之后，选择右上角头像->Security->New Token
image.png

token的这两项必须这样设置，否则在后续步骤中会出现类似（401）的错误

image.png

点击create之后创建完成，点击复制按钮保存token
注意一定要复制下来，这个窗口关闭之后没有地方再次查看此token

2. 创建publisher

方法有两个
在本地命令行创建(会提示输入token，输入上面创建并保存的token)

vsce create-publisher xxx

在网页创建
https://marketplace.visualstudio.com/manage/

3. 登录publisher(会提示输入token，输入上面创建并保存的token)

>vsce login xxx
Personal Access Token for publisher 'xxx': ****************************************************

4. 发布插件:

vsce pubish

参考文档

1. nodejs和npm安装:
   https://www.npmjs.cn/getting-started/installing-node/
2. 插件打包和发布:
   https://code.visualstudio.com/api/working-with-extensions/publishing-extension

5. 导入ini库

npm install --save ini
git-submodule>npm install @types/ini