vscode代码片段插件教程：从此写代码更轻松

2023-05-27 03:32:19

从头开始开发 VSCode 代码片段提示插件

代码片段配置

作为程序员，我们每天都会花费大量时间在编码上，因此提高编码效率至关重要。代码片段提示插件可以帮助我们快速输入代码，提升效率。下面让我们深入了解如何配置代码片段。

在 VSCode 中，代码片段可以通过两种方式配置：

通过 .vscode/settings.json 文件配置：

"editor.snippetSuggestions": {
    "enabled": true,
    "onlySnippets": false,
    "snippets": [
        {
            "label": "console.log",
            "body": "console.log($1)"
        },
        {
            "label": "for loop",
            "body": "for (let i = 0; i < $1; i++) {\n\t$2\n}"
        }
    ]
}

通过代码片段面板配置：

使用快捷键 Ctrl+K Ctrl+S 打开代码片段面板，然后点击“新建代码片段”按钮。在这里，你可以配置名称、前缀、内容和作用域。

VSCode 插件开发

接下来，让我们了解如何开发一个 VSCode 插件。有两种开发方式：

使用 JavaScript
使用 TypeScript（推荐）

下面我们将使用 TypeScript 来创建一个代码片段提示插件。

创建一个新插件项目：

在 VSCode 的命令面板中，输入“Create New Project”并选择“TypeScript”作为项目类型。

安装依赖项：

在 VSCode 终端中，输入 npm install vscode。

编写插件主文件：

创建一个名为 extension.ts 的文件，包含激活事件和注册命令：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 注册代码片段提供程序
    vscode.languages.registerCodeActionsProvider('javascript', new SnippetProvider());

    // 注册命令
    context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => {
        vscode.window.showInformationMessage('Hello World!');
    }));
}

代码片段提示插件开发

创建一个名为 snippetProvider.ts 的模块，包含代码片段提供程序类：

import * as vscode from 'vscode';

export class SnippetProvider implements vscode.CodeActionProvider {
    // 提供代码片段
    provideCodeActions(document: vscode.TextDocument, range: vscode.Range | undefined, context: vscode.CodeActionContext, token: vscode.CancellationToken): vscode.ProviderResult<vscode.CodeAction[]> {
        return [
            {
                title: 'Add console.log statement',
                command: 'extension.addConsoleLog',
                arguments: [document, range]
            }
        ];
    }
}