VSCode 插件开发实战(五):实现新语言支持和语法高亮

前言

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

定义新语言

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

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

clike 复制代码
{
  "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 文件。以下是一个简单的语法定义示例:

clike 复制代码
{
  "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 文件来配置注释、括号匹配等:

clike 复制代码
{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  },
  "brackets": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"]
  ],
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "\"", "close": "\"" }
  ]
}

添加代码片段

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

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

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

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

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

clike 复制代码
{
  "contributes": {
    "snippets": [
      {
        "language": "myLanguage",
        "path": "./snippets/myLanguage.code-snippets"
      }
    ]
  }
}

添加自动补全(IntelliSense)

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

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

clike 复制代码
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 文件中注册这个提供者:

clike 复制代码
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 文件:

clike 复制代码
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 文件中注册这个格式化提供者:

clike 复制代码
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() {}

总结

通过这篇教程,我们详细讲解了如何为 VS Code 创建一个自定义插件,以支持新的编程语言,涵盖了语法高亮、代码片段、自动补全和代码格式化等关键功能。这不仅为你的编程工作流提供了更高的效率,也展示了 VS Code 强大且灵活的扩展能力。

相关推荐
一棵开花的树,枝芽无限靠近你6 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
0xdadream7 小时前
typora数学符号
编辑器
带电的小王10 小时前
VSCode:VSCode安装 -- 最简洁的VSCode安装教程
ide·vscode·编辑器
会说法语的猪12 小时前
IDEA使用Alt + Enter快捷键自动接受返回值一直有final修饰的问题处理
java·ide·intellij-idea
叶羽西12 小时前
Android Studio Gradle Sync timeout
android·ide·android studio
我是一个对称矩阵13 小时前
Visual Studio2019基础使用指南
ide·visual studio
m0_7482412313 小时前
ElasticPDF-新国产 PDF 编辑器开发框架(基于 pdf.js Web PDF批注开发,实现高亮多边形橡皮擦历史记录保存注释文字)
前端·pdf·编辑器
sg_knight14 小时前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
GPT祖弘15 小时前
【VScode】第三方GPT编程工具-CodeMoss安装教程
ide·vscode·gpt