web-dev-qa-db-ja.com

Visual Studioコードでカスタム言語を作成する

Visual Studio Codeでサポートされている言語/文法を拡張する方法はありますか？カスタム言語構文を追加したいのですが、言語サービスがどのように提供されるかについての情報を見つけることができませんでした。

誰でも参照や既存の言語実装の例を指すことができますか？

visual-studio-codevscode-extensionstmlanguage
28
Rick Strahl

新しいバージョン0.9.0で可能です。カスタム言語の追加方法に関する公式ドキュメントがあります： https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

追加する言語の.tmLanguageファイルが必要です。既存のファイルを見つけることができます。 GitHubで、または独自の言語ファイルを定義できます。作成方法については、こちらをご覧ください： http://manual.macromates.com/en/language_grammars

.tmLanguageファイルを見つけたら、それに基づいて拡張機能を作成する2つの方法があります。

オプション1：Yeomanジェネレーターを使用する

  • Node.jsをインストールします（まだ行っていない場合）
  • npm install -g yoを実行してyoをインストールします（まだ行っていない場合）
  • コード用のYoジェネレーターをインストールします：npm install -g generator-code
  • yo codeを実行し、New language supportを選択します
  • 指示に従います（.tmLangaugeファイルを定義し、プラグイン名、ファイル拡張子などを定義します）
  • ジェネレーターは、現在の作業ディレクトリにプラグインの名前で拡張機能のディレクトリを作成します。

オプション2：自分でディレクトリを作成する

  • プラグインの名前でディレクトリを作成します（小文字のみ）。 mylangと呼ぶことにしましょう。
  • サブフォルダーsyntaxesを追加し、その中に.tmlanguageファイルを配置します

  • このようなコンテンツを含む拡張フォルダーのルート内にpackage.jsonファイルを作成します

    {
    "name": "mylang",
    "version": "0.0.1",
    "engines": {
        "vscode": ">=0.9.0-pre.1"
    },
    "publisher": "me",
    "contributes": {
        "languages": [{
            "id": "mylang",
            "aliases": ["MyLang", "mylang"],
            "extensions": [".mylang",".myl"]
        }],
        "grammars": [{
            "language": "mylang",
            "scopeName": "source.mylang",
            "path": "./syntaxes/mylang.tmLanguage"
        }]
    }
}

最後に拡張機能をVisual Studio Codeに追加します

拡張フォルダを拡張ディレクトリにコピーします。これは：

  • onWindows%USERPROFILE%\.vscode\extensions

  • onMac/Linux$HOME/.vscode/extensions

再起動コード。これで、指定したファイル拡張子を持つファイルを開くたびに、拡張子が自動的に実行されます。使用されているプラ​​グインの名前は、右下隅に表示されます。拡張機能の名前をクリックして変更できます。特定のファイル拡張子に対して登録されている拡張子があなたの拡張子だけでない場合、コードは間違った拡張子を選択する可能性があります。

53
Wosi

リバースエンジニアリングを使用すると、VSCodeに新しい言語を追加できます。 TypeScriptがJavaScriptプラグインとしてどのように実装され、パイプを介してnode.exeと通信する方法を確認できます。しかし、それはすべてドキュメントなしでやってくるので難しいことです。ここでは本当に短いドキュメントを提供します。

プラグインフォルダーC:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\pluginsで新しいプラグインを定義できます。

TypeScriptプラグインフォルダーをコピーし、すべてのファイルに記載されているファイル拡張子と言語名を新しい言語に変更して、.mylangファイルを開いたときに新しいプラグインが使用されるようにします。

typescriptServiceClient.jsで、子プロセスがフォークされており、そのstdoutがnew WireProtocol.Readerに結合されていることがわかります。独自のmylanguage.exeをバインドします（おそらく、このexeを自分で記述する必要があります）。 VSCodeは、そのバイナリに言語固有の情報を取得するように要求します。

typescriptMain.jsには、言語の機能登録があります。 monaco.Modes.XXXXXXSupport.registerを除くmonaco.Modes.DeclarationSupport.registerへのすべての呼び出しを削除します。

ここで、.mylangファイルを含むVSCodeのディレクトリを開き、CTRL+P + FileNameを介してファイルの1つを開きます。識別子を右クリックして、Go to Definitionを選択します。 VSCodeは、StdInを介してexeにこのようなリクエストを送信します

{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}

VSCodeは、次のような答えを期待しています。

Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }

すべてが機能する場合、VSCodeはMyOtherFile.mylangを開き、カーソルを列3の行124に設定します。

自分で試してみてください;-)

3
Wosi

Wosiの.tmLanguage answer を拡張するには、.tmLanguageファイルの使用はオプションです。通常の.jsonを使用することは完全に有効であり、私の意見では、より読みやすい代替手段です。

例については、VSCode_SQFを参照してください。 sqf.json

package.json内では、パスを./syntaxes/mylang.tmLanguageから./syntaxes/mylang.jsonに変更するだけで済みます。

2
Armitxes