当前位置：首页 > article >正文

VSCode 插件开发实战（五）：实现新语言支持和语法高亮

article 2024/12/25 1:13:56

前言

通过自定义插件，开发者可以为 VS Code 添加特定编程语言的支持，包括语法高亮、代码片段、自动补全等功能。在这篇教程中，我们将深入探讨如何从零开始为 VS Code 创建一个自定义插件，以支持一种新的编程语言，并实现其语法高亮。这将为你提供一个全面的指导，使你能够更好地利用 VS Code 强大的扩展能力。

定义新语言

package.json 文件是插件的配置文件，我们需要在这里定义语言支持和语法高亮的相关信息。

以下是一个简单的 package.json 配置示例：

{
  "name": "my-language-support",
  "displayName": "My Language Support",
  "description": "Support for My Language",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.60.0"
  },
  "categories": [
    "Languages"
  ],
  "contributes": {
    "languages": [
      {
        "id": "myLanguage",
        "aliases": ["My Language", "mylang"],
        "extensions": [".mylang"],
        "configuration": "./language-configuration.json"
      }
    ],
    "grammars": [
      {
        "language": "myLanguage",
        "scopeName": "source.mylang",
        "path": "./syntaxes/myLanguage.tmLanguage.json"
      }
    ]
  }
}

定义语法高亮

为了实现语法高亮，我们需要创建一个 TextMate 语法文件。首先，创建一个 syntaxes 目录，并在其中创建 myLanguage.tmLanguage.json 文件。以下是一个简单的语法定义示例：

{
  "scopeName": "source.mylang",
  "patterns": [
    {
      "match": "\\b(keyword1|keyword2|keyword3)\\b",
      "name": "keyword.other.mylang"
    },
    {
      "match": "\\b[0-9]+\\b",
      "name": "constant.numeric.mylang"
    },
    {
      "match": "\".*?\"",
      "name": "string.quoted.double.mylang"
    }
  ],
  "repository": {}
}

这个文件定义了三种语法元素：

keyword1、keyword2 和 keyword3 作为关键词高亮显示。
数字作为常量高亮显示。
双引号包裹的内容作为字符串高亮显示。

配置语言特性

为了更好地支持你的新语言，可以配置一些语言特性。例如，创建一个 language-configuration.json 文件来配置注释、括号匹配等：

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  },
  "brackets": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"]
  ],
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "\"", "close": "\"" }
  ]
}

添加代码片段

代码片段（Snippets）是开发者常用的功能，可以通过简短的缩写快速插入常用的代码模板。我们可以在 package.json 中添加代码片段的配置。

首先，创建一个 snippets 文件夹，并在其中创建一个 myLanguage.code-snippets 文件。以下是一个代码片段的示例：

{
  "Print to console": {
    "prefix": "print",
    "body": [
      "print(\"$1\");"
    ],
    "description": "Print to the console"
  }
}

这个片段定义了一个缩写 print，当输入 print 并触发代码片段时，它会自动展开为 print(“”);，并将光标置于引号之间。

在 package.json 中添加以下配置，将此代码片段关联到插件：

{
  "contributes": {
    "snippets": [
      {
        "language": "myLanguage",
        "path": "./snippets/myLanguage.code-snippets"
      }
    ]
  }
}

添加自动补全（IntelliSense）

自动补全是现代编辑器的重要功能之一。VS Code 提供了丰富的 API 来支持这一特性。我们可以在 src/extension.ts 文件中添加自动补全的逻辑。

首先，创建一个 providers 文件夹，并在其中创建一个 completionProvider.ts 文件。以下是一个简单的自动补全提供者示例：

import * as vscode from 'vscode';

export class MyLanguageCompletionItemProvider implements vscode.CompletionItemProvider {
  public provideCompletionItems(
    document: vscode.TextDocument,
    position: vscode.Position,
    token: vscode.CancellationToken,
    context: vscode.CompletionContext
  ): vscode.CompletionItem[] {
    const completionItems: vscode.CompletionItem[] = [];

    const keywords = ['keyword1', 'keyword2', 'keyword3'];
    for (const keyword of keywords) {
      const item = new vscode.CompletionItem(keyword, vscode.CompletionItemKind.Keyword);
      completionItems.push(item);
    }

    return completionItems;
  }
}

然后，在 src/extension.ts 文件中注册这个提供者：

import * as vscode from 'vscode';
import { MyLanguageCompletionItemProvider } from './providers/completionProvider';

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "my-language-support" is now active!');

  const provider = new MyLanguageCompletionItemProvider();
  const disposable = vscode.languages.registerCompletionItemProvider('myLanguage', provider);

  context.subscriptions.push(disposable);
}

export function deactivate() {}

添加代码格式化

代码格式化可以帮助开发者保持代码风格一致。我们同样可以在 src/extension.ts 中添加代码格式化的逻辑。

创建一个 formattingProvider.ts 文件：

import * as vscode from 'vscode';

export class MyLanguageDocumentFormattingEditProvider implements vscode.DocumentFormattingEditProvider {
  provideDocumentFormattingEdits(
    document: vscode.TextDocument,
    options: vscode.FormattingOptions,
    token: vscode.CancellationToken
  ): vscode.TextEdit[] {
    const textEdits: vscode.TextEdit[] = [];

    // 示例：将所有内容转换为大写
    const fullText = document.getText();
    const fullRange = new vscode.Range(
      document.positionAt(0),
      document.positionAt(fullText.length)
    );
    textEdits.push(vscode.TextEdit.replace(fullRange, fullText.toUpperCase()));

    return textEdits;
  }
}

在 src/extension.ts 文件中注册这个格式化提供者：

import * as vscode from 'vscode';
import { MyLanguageCompletionItemProvider } from './providers/completionProvider';
import { MyLanguageDocumentFormattingEditProvider } from './providers/formattingProvider';

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "my-language-support" is now active!');

  const completionProvider = new MyLanguageCompletionItemProvider();
  const formattingProvider = new MyLanguageDocumentFormattingEditProvider();

  const disposableCompletion = vscode.languages.registerCompletionItemProvider('myLanguage', completionProvider);
  const disposableFormatting = vscode.languages.registerDocumentFormattingEditProvider('myLanguage', formattingProvider);

  context.subscriptions.push(disposableCompletion, disposableFormatting);
}

export function deactivate() {}