实现一个VSCode插件（从创建到发布）
实现一个自己的VSCode 插件[*]本文将以 yo 为例， 实现一个 VS Code 插件 从创建到发布。
1. 初始化项目
[*]起首，我们必要安装 VS Code 扩展天生器
npm install -g yo generator-code
[*]安装完 yo 后，天生初始模版
yo code
[*]然后我们会填写 扩展名，描述，语言等
[*]我们以语言选择： TypeScript ， 打包选择：webpack 为例。
2. 项目结构
case-converter/
├── package.json
├── src/
│ └── extension.ts
├── .vscodeignore
└── README.md
3. 实现插件功能
[*]我们只必要修改2文件的内容
[*]以实现一个转化巨细写的功能为例子
[*]修改 extension.ts =>
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// 注册转换大写命令
let toUpperCommand = vscode.commands.registerCommand('case-converter.toUpperCase', () => {
const editor = vscode.window.activeTextEditor;
if (editor) {
const selection = editor.selection;
const text = editor.document.getText(selection);
editor.edit(editBuilder => {
editBuilder.replace(selection, text.toUpperCase());
});
}
});
// 注册转换小写命令
let toLowerCommand = vscode.commands.registerCommand('case-converter.toLowerCase', () => {
const editor = vscode.window.activeTextEditor;
if (editor) {
const selection = editor.selection;
const text = editor.document.getText(selection);
editor.edit(editBuilder => {
editBuilder.replace(selection, text.toLowerCase());
});
}
});
context.subscriptions.push(toUpperCommand, toLowerCommand);
}
export function deactivate() {}
[*]修改 package.json => 主要替换 activationEvents 和 contributes
{
// 省略其他配置 。。。
"activationEvents": [
"onCommand:case-converter.toUpperCase",
"onCommand:case-converter.toLowerCase"
],
"contributes": {
"commands": [
{
"command": "case-converter.toUpperCase",
"title": "Convert to Uppercase"
},
{
"command": "case-converter.toLowerCase",
"title": "Convert to Lowercase"
}
],
"keybindings": [
{
"command": "case-converter.toUpperCase",
"key": "ctrl+shift+u",
"mac": "cmd+shift+u"
},
{
"command": "case-converter.toLowerCase",
"key": "ctrl+shift+l",
"mac": "cmd+shift+l"
}
],
"menus": {
"editor/context": [
{
"when": "editorHasSelection",
"command": "case-converter.toUpperCase",
"group": "1_modification"
},
{
"when": "editorHasSelection",
"command": "case-converter.toLowerCase",
"group": "1_modification"
}
]
}
},
}
4. 测试和运行插件
[*]可以通过 package.json 中的 npm run compile 然后 npm run watch 打开调试；
[*]也可以通过 直接 F5 直接 举行调试；
[*]然后我们会看到调试按钮， 以及弹出别的一个调试的 VS Code 窗口
https://i-blog.csdnimg.cn/direct/e09af1fdee784400984156112de673ea.png#pic_center
[*]我们在别的弹出的 VS Code 窗口里 测试一下
https://i-blog.csdnimg.cn/direct/91d6a16731a8470eba66d327a089c194.png#pic_center
[*]我们可以看到 package.json 中设置到 toUpperCase 和 toLowerCase , 选中文案点击便可实现插件功能
5. 发布
[*]创建 Azure 账号（如果有账号跳过）
[*] 先去 创建 Azure 账号和 Azure DevOps 组织 => 点击跳转
[*] 登录后创建项目
https://i-blog.csdnimg.cn/direct/28d0a694c36b42da882503967d90935a.png#pic_center
[*] 然后右上角创建https://i-blog.csdnimg.cn/direct/8b88aee3610a4a9ba7eb7af5b5045cd4.png#pic_center
[*]创建时选择 Marketplace 勾选 ✓ Acquire ✓ Publish ✓ Manage
https://i-blog.csdnimg.cn/direct/7dfb386abfdd40e88ca5e9fe21423878.png#pic_center
2. 第二步 去创建 Visual Studio Marketplace 账号
[*]直接通过 微软 Azure 账号登岸
[*]设置名称 和 id （后边上传时 要检查 package.json 中的 publisher 是否相同）
https://i-blog.csdnimg.cn/direct/90b373c74aa34478b72fd84ce8b6bb5f.png#pic_center
[*] 第三部上传
[*]方法1 ： 安装 npm install -g @vscode/vsce
[*]然后打包 执行打包下令 vsce package => 天生 .vsix 文件
[*]然后点击 New extension 选择 Visual Studio Code 弹出弹窗 把 .vsix 上传即可
https://i-blog.csdnimg.cn/direct/4d3ede78372b4daaa806fa1edfe2182d.png#pic_center
[*]方法2 : 通过 vsce 下令完成， 登岸会填写 token （token 为 Azure 创建的 token）
# 打包插件
vsce package
# 发布插件
vsce publish
# 创建发布者
vsce create-publisher (publisher name)
# 登录
vsce login (publisher name)
6. 下载自己发布的插件
[*]发布完，过几分钟后就可以去， 搜刮自己发布的插件了
[*]然后下载使用
https://i-blog.csdnimg.cn/direct/9f9f676737ca44e490c9efdfbad32e4f.png#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]