一、 安装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
参考文档
- nodejs和npm安装:
https://www.npmjs.cn/getting-started/installing-node/ - 插件打包和发布:
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
5. 导入ini库
npm install --save ini
git-submodule>npm install @types/ini
