一、 安裝nodejs和npm
安裝說(shuō)明:
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
如果遇到報(bào)錯(cuò)
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
四、 生成插件項(xiàng)目
使用下面的命令來(lái)創(chuàng)建一個(gè)extension項(xiàng)目
項(xiàng)目的存放位置為命令行執(zhí)行的當(dāng)前目錄
yo code
按照提示一步步完成即可,本文中語(yǔ)言選擇TypeScript
如果準(zhǔn)備使用git作為代碼倉(cāng)庫(kù)，建議創(chuàng)建過(guò)程中Initialize a git repository選擇yes
本文安裝過(guò)程如下
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.
五、 運(yùn)行/調(diào)試插件
用vscode打開(kāi)上面步驟創(chuàng)建的插件目錄commandor作為工作目錄
鍵盤(pán)F5或者點(diǎn)擊運(yùn)行按鈕
此時(shí)會(huì)打開(kāi)另外一個(gè)VS Code作為"擴(kuò)展開(kāi)發(fā)宿主"
在宿主窗口按下ctrl+shift+p打開(kāi)命令窗口
輸入Hello World回車(chē)
宿主右下角出現(xiàn)彈窗，說(shuō)明插件Hello World指令執(zhí)行成功
在F5打開(kāi)宿主之前，在源文件中加入斷點(diǎn)即可調(diào)試插件源代碼。
在宿主中輸入命令Hello World并回車(chē)后即觸發(fā)斷點(diǎn)。
六、 打包插件
1. 安裝vsce工具
npm install -g vsce
2. 修改項(xiàng)目的package.json，加入publisher屬性
3 在項(xiàng)目目錄下執(zhí)行命令打包
vsce package
4 本地安裝
打包成功后會(huì)在項(xiàng)目目錄下生成vsix文件。
打開(kāi)vscode的插件界面，選擇從vsix安裝
七、 發(fā)布插件
前提: 已經(jīng)按照打包步驟說(shuō)明的安裝vsce工具并修改了package.json
1. 注冊(cè)帳號(hào)并登陸 Azure DevOps
注冊(cè)地址:
https://azure.microsoft.com/zh-cn/services/devops/
點(diǎn)擊開(kāi)始使用
注冊(cè)并登陸之后，選擇右上角頭像->Security->New Token
token的這兩項(xiàng)必須這樣設(shè)置，否則在后續(xù)步驟中會(huì)出現(xiàn)類(lèi)似（401）的錯(cuò)誤
點(diǎn)擊create之后創(chuàng)建完成，點(diǎn)擊復(fù)制按鈕保存token
注意一定要復(fù)制下來(lái)，這個(gè)窗口關(guān)閉之后沒(méi)有地方再次查看此token
2. 創(chuàng)建publisher
方法有兩個(gè)
在本地命令行創(chuàng)建(會(huì)提示輸入token，輸入上面創(chuàng)建并保存的token)
vsce create-publisher xxx
在網(wǎng)頁(yè)創(chuàng)建
https://marketplace.visualstudio.com/manage/
3. 登錄publisher(會(huì)提示輸入token，輸入上面創(chuàng)建并保存的token)
>vsce login xxx
Personal Access Token for publisher 'xxx': ****************************************************
4. 發(fā)布插件:
vsce pubish
參考文檔
- nodejs和npm安裝:
https://www.npmjs.cn/getting-started/installing-node/ - 插件打包和發(fā)布:
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
5. 導(dǎo)入ini庫(kù)
npm install --save ini
git-submodule>npm install @types/ini
