怎么做VSCode扩展_VSCode开发自定义插件的入门与实践教程-VSCode-PHP中文网

怎么做vscode扩展_vscode开发自定义插件的入门与实践教程

简而言之，开发VSCode扩展就是利用VS Code提供的API，定制或增强其功能，以满足特定开发需求。这需要你熟悉TypeScript（推荐）或JavaScript，理解VS Code的扩展API，并掌握一定的调试技巧。

解决方案

VSCode扩展开发的核心在于理解和使用VS Code提供的API。这些API允许你访问和修改VS Code的各种行为，例如编辑器的行为、用户界面、文件系统等。

如何开始一个VSCode扩展项目？

首先，你需要安装Node.js和npm（Node Package Manager）。然后，全局安装Yeoman和VS Code扩展生成器：

npm install -g yo generator-code

登录后复制

接下来，使用生成器创建一个新的扩展项目：

yo code

登录后复制

生成器会提示你选择扩展类型（例如，JavaScript或TypeScript），并设置一些基本信息，如扩展名称、描述等。选择TypeScript通常是更好的选择，因为它提供了类型检查和更好的代码组织。

创建项目后，你会得到一个包含

package.json

登录后复制

、

src/extension.ts

登录后复制

（或

src/extension.js

登录后复制

）等文件的目录。

package.json

登录后复制

定义了扩展的元数据和依赖项，

src/extension.ts

登录后复制

是扩展的主要入口点。

extension.ts

登录后复制

文件里有什么？

extension.ts

登录后复制

文件包含两个重要的函数：

activate

登录后复制

和

deactivate

登录后复制

。

activate

登录后复制

函数在扩展激活时被调用。你可以在这里注册命令、事件监听器和其他需要在扩展运行时执行的操作。

deactivate

登录后复制

函数在扩展停用时被调用。你可以在这里清理资源、取消注册事件监听器等。

一个简单的

activate

登录后复制

函数可能如下所示：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    // 使用控制台输出诊断信息 (console.log) 和错误 (console.error)
    // 此代码将在你的扩展激活时执行
    console.log('Congratulations, your extension "my-extension" is now active!');

    // 注册一个命令
    // 命令ID必须在package.json文件中声明
    let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
        // 每次执行命令时都会显示一个消息框
        vscode.window.showInformationMessage('Hello World from my-extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

登录后复制

这段代码注册了一个名为

my-extension.helloWorld

登录后复制

的命令。当用户执行这个命令时（例如，通过命令面板），会显示一个包含“Hello World from my-extension!”的消息框。

如何调试VSCode扩展？

VS Code提供了强大的调试功能，可以让你轻松调试扩展。

知海图Chat

知乎与面壁智能合作推出的智能对话助手

157

查看详情

在VS Code中打开你的扩展项目。
切换到“运行和调试”视图（可以通过点击侧边栏的调试图标或按下
```
Ctrl+Shift+D
```
登录后复制
打开）。
点击“创建配置文件”按钮，选择“Node.js”环境。这会创建一个
```
.vscode/launch.json
```
登录后复制
文件。
修改
```
.vscode/launch.json
```
登录后复制
文件，确保
```
program
```
登录后复制
属性指向你的
```
extension.ts
```
登录后复制
（或
```
extension.js
```
登录后复制
）文件编译后的JavaScript文件（通常在
```
out
```
登录后复制
目录下）。例如：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Extension",
            "program": "${workspaceFolder}/out/extension.js",
            "preLaunchTask": "npm: compile", // 确保在调试前编译代码
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "sourceMaps": true,
            "runtimeExecutable": "${execPath}",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ]
        }
    ]
}

登录后复制

确保

preLaunchTask

登录后复制

属性设置为

npm: compile

登录后复制

，这样在调试前会自动编译你的TypeScript代码。

现在，你可以点击“启动调试”按钮（绿色箭头）来启动调试会话。 VS Code会启动一个新的VS Code实例，并在其中加载你的扩展。你可以在你的代码中设置断点，并逐步执行代码，查看变量的值，等等。

如何发布VSCode扩展？

发布VS Code扩展需要以下步骤：

创建一个Azure DevOps组织： 如果你还没有Azure DevOps组织，你需要创建一个。这是微软提供的代码托管和构建服务。
安装
vsce
登录后复制
工具：
```
vsce
```
登录后复制
(Visual Studio Code Extensions) 是一个用于打包、发布和管理VS Code扩展的命令行工具。使用npm全局安装它：

npm install -g vsce

登录后复制

登录到Azure DevOps： 使用
```
vsce
```
登录后复制
登录到你的Azure DevOps组织：

vsce login

登录后复制

按照提示进行身份验证。

修改
package.json
登录后复制
：确保你的
```
package.json
```
登录后复制
文件包含正确的元数据，例如
```
name
```
登录后复制
、
```
displayName
```
登录后复制
、
```
description
```
登录后复制
、
```
version
```
登录后复制
、
```
publisher
```
登录后复制
等。
```
publisher
```
登录后复制
必须是你的Azure DevOps组织的名称。

{
    "name": "my-extension",
    "displayName": "My Extension",
    "description": "A simple VS Code extension",
    "version": "0.0.1",
    "publisher": "your-azure-devops-organization"
    // ...
}

登录后复制

打包扩展： 使用
```
vsce package
```
登录后复制
命令打包你的扩展：

vsce package

登录后复制

这会创建一个

.vsix

登录后复制

文件，其中包含你的扩展的所有文件。

发布扩展： 使用
```
vsce publish
```
登录后复制
命令发布你的扩展：

vsce publish

登录后复制

vsce

登录后复制

会将

.vsix

登录后复制

文件上传到VS Code Marketplace。你需要等待一段时间，直到你的扩展被审核通过并发布。

VSCode扩展开发中常见的坑有哪些？

API版本不兼容： VS Code的API会不断更新，因此你需要确保你的扩展使用的API版本与VS Code的版本兼容。你可以在
```
package.json
```
登录后复制
文件中指定你的扩展支持的VS Code版本范围：

{
    "engines": {
        "vscode": "^1.60.0" // 仅支持 VS Code 1.60.0 及以上版本
    }
}

登录后复制

内存泄漏： 如果你的扩展注册了大量的事件监听器或创建了大量的对象，并且没有及时清理它们，可能会导致内存泄漏。确保在扩展停用时清理所有资源。
异步操作处理不当： VS Code的API很多都是异步的，因此你需要正确处理异步操作。使用
```
async/await
```
登录后复制
或
```
Promise
```
登录后复制
来避免回调地狱。
权限问题： 你的扩展可能需要访问文件系统、网络等资源。确保你的扩展声明了正确的权限，并且用户授予了这些权限。
调试困难： VS Code扩展的调试可能会比较困难，特别是当你的扩展涉及到复杂的逻辑或与其他扩展交互时。熟练掌握VS Code的调试工具，并学会使用
```
console.log
```
登录后复制
输出调试信息。

如何在VSCode扩展中实现代码片段功能？

代码片段（Code Snippets）是VS Code中非常实用的功能，可以帮助开发者快速插入常用的代码块。你可以通过创建一个

.code-snippets

登录后复制

文件来定义代码片段。

创建
.code-snippets
登录后复制
文件：在你的扩展项目的根目录下创建一个
```
snippets
```
登录后复制
目录（如果还没有），并在其中创建一个
```
.code-snippets
```
登录后复制
文件。文件的名称可以自定义，例如
```
my-snippets.code-snippets
```
登录后复制
。
定义代码片段： 在
```
.code-snippets
```
登录后复制
文件中，使用JSON格式定义你的代码片段。每个代码片段都包含一个名称、一个前缀（用于触发代码片段）和一个正文（代码片段的内容）。

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Create a function": {
        "prefix": "func",
        "body": [
            "function $1($2) {",
            "\t$3",
            "}"
        ],
        "description": "Create a new function"
    }
}

登录后复制

```
prefix
```
登录后复制
：当你在编辑器中输入
```
log
```
登录后复制
或
```
func
```
登录后复制
时，VS Code会显示相应的代码片段。
```
body
```
登录后复制
：代码片段的内容。使用
```
$1
```
登录后复制
、
```
$2
```
登录后复制
等占位符来表示光标的位置。用户可以使用
```
Tab
```
登录后复制
键在占位符之间切换。
```
description
```
登录后复制
：代码片段的描述，会在VS Code的建议列表中显示。

在
package.json
登录后复制
中声明代码片段文件：在
```
package.json
```
登录后复制
文件中，使用
```
contributes.snippets
```
登录后复制
属性声明你的代码片段文件：

{
    "contributes": {
        "snippets": [
            {
                "language": "javascript", // 指定代码片段适用的语言
                "path": "./snippets/my-snippets.code-snippets" // 代码片段文件的路径
            }
        ]
    }
}

登录后复制

确保

language

登录后复制

属性与你的代码片段适用的语言匹配。

现在，当你打开一个JavaScript文件，并输入

log

登录后复制

或

func

登录后复制

时，VS Code会显示相应的代码片段。

如何在VSCode扩展中添加自定义设置？

VS Code允许扩展添加自定义设置，用户可以在VS Code的设置界面中配置这些设置。

在
package.json
登录后复制
中定义设置：在
```
package.json
```
登录后复制
文件中，使用
```
contributes.configuration
```
登录后复制
属性定义你的设置。

{
    "contributes": {
        "configuration": {
            "title": "My Extension", // 设置组的标题
            "properties": {
                "my-extension.enableFeature": { // 设置的唯一ID
                    "type": "boolean", // 设置的类型 (boolean, string, number, etc.)
                    "default": true, // 设置的默认值
                    "description": "Enable or disable the feature" // 设置的描述
                },
                "my-extension.apiUrl": {
                    "type": "string",
                    "default": "https://example.com/api",
                    "description": "The API URL"
                }
            }
        }
    }
}

登录后复制

```
title
```
登录后复制
：设置组的标题，会在VS Code的设置界面中显示。
```
properties
```
登录后复制
：一个包含所有设置的对象的属性。
每个设置都包含一个唯一的ID（例如，
```
my-extension.enableFeature
```
登录后复制
），一个类型（例如，
```
boolean
```
登录后复制
、
```
string
```
登录后复制
、
```
number
```
登录后复制
），一个默认值和一个描述。

在代码中访问设置： 使用
```
vscode.workspace.getConfiguration()
```
登录后复制
函数来访问设置。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let config = vscode.workspace.getConfiguration('my-extension'); // 获取名为 'my-extension' 的配置

    let enableFeature = config.get<boolean>('enableFeature'); // 获取 'enableFeature' 设置的值
    let apiUrl = config.get<string>('apiUrl'); // 获取 'apiUrl' 设置的值

    console.log('Enable Feature:', enableFeature);
    console.log('API URL:', apiUrl);
}

登录后复制