为 VS Code 创建扩展 - 第 1 部分

我想开发一个VS Code 扩展来解决我的一个日常问题，所以我开始研究VS Code API

他们有非常棒的文档和示例扩展，非常有用。

我可以在不到 5 分钟的时间内运行我的第一个 Hello world 扩展。

它非常容易而且超级简单，来吧让我们看看如何开发一个。

安装

安装以下 Node 模块以启动新的扩展Yeoman和VS Code 扩展生成器

npm install -g yo generator-code

创建新扩展

执行此命令yo code并选择“新建扩展 - Typescript”（最推荐）来创建一个新的扩展，然后回答问题。它将创建一个 Hello World *样板文件*，并安装所需的 Node 模块。

扩展文件结构

这个自动生成的扩展有十几个文件，请参阅下面的图片来了解有关文件结构的更多信息。

但我们只关注主要的两个文件，它们是

• src/扩展.ts
• 包.json

运行扩展

运行扩展非常简单，只需从左侧菜单进入调试菜单或点击Ctrl+Shift+D键绑定，然后单击运行扩展。

它将打开一个新窗口，您的扩展程序将在其中运行，以确认您可以在右下角看到“Hello World”。

好的，但是它是如何工作的呢？

VS 代码扩展都是基于事件的，我们需要在 package.json 中定义所有命令（操作）

包.json

您可以在根目录中 * package.json *contributes文件，其中包含->中的所有事件commands，在这种情况下，我们只有一个命令extension.helloWorld

"contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
}

我们通过将命令添加到activationEvents

"activationEvents": [
    "onCommand:extension.helloWorld"
]

main属性保存扩展激活后将首先执行的文件路径

"main": "./out/extension.js"

扩展.ts

很高兴看到，该文件有非常详细的注释，以便更好地理解。

• function activate(context: vscode.ExtensionContext)- 当扩展被激活时，此功能首先执行，我们的所有业务逻辑都将位于此处。

• vscode.commands.registerCommand('extension.helloWorld', () => {})- 使用回调函数注册extension.helloWorld事件。

• vscode.window.showInformationMessage('Hello World!');- 右下角显示消息框

最后，我们应该将注册的命令推送到context.subscriptions

*祝贺您获得第一个 VS Code 扩展 * 🎉🎉🎉🎉🎉

在下一篇文章中，我将解释如何实现最常见的扩展功能，例如菜单、设置、键绑定和状态消息栏。

如果您有任何问题或疑问，请发表评论，我很乐意为您提供帮助：D

谢谢 ！！！

本文最初发表于Hashnode

在Dev Blog或Dev.to上阅读第二部分