Chapter 03

Language Client を作る

takl
takl
2020.12.22に更新

Language Client を作る

まずは Language Client を作ります。これは VSCode の拡張として作ります。

Language Client を作るといっても全て作る必要はありません。vscode-languageclientというライブラリがあるのでこれを使います。実際の作業としては VSCode 拡張の設定ぐらいです。

まずは空のディレクトリを作り、中に次のようなファイルを作ります。

- .vscode/
  - launch.json ; VSCode 上で F5 を押したときにデバッグモードに入るための設定
- extension.js  ; 拡張の本体
- oreore.js     ; 言語処理系
- package.json  ; VSCode拡張の設定

それぞれ作っていきましょう。

.vscode/launch.json

.vscode/launch.json は「VSCode 上で F5 を押したときにデバッグモードに入るための設定」です。内容はテンプレート的なものな上、特に難しいことはないので、ノリで読んでいただければと思います。

launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Extension",
            "type": "extensionHost",
            "request": "launch",
            "runtimeExecutable": "${execPath}",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ]
        }
    ]
}

package.json

package.json は「このディレクトリは VSCode の拡張ですよ」「依存ライブラリは vscode-languageclient ですよ」といった情報が入ります。本来 NPM 用のファイルだと思うのですが、VSCode 拡張に関する情報も一緒に書きます。

package.json
{
  "name": "oreore-mode",
  "version": "0.0.1",
  "author": "YOUR NAME",
  "license": "YOUR LICENSE",
  "description": "A tiny programming language that supports Language Server Protocol",

  "engines": {
    "vscode": "^1.52.1"
  },
  "main": "./extension.js",
  "activationEvents": [
    "onLanguage:oreore"
  ],
  "contributes": {
    "languages": [
      {
        "id": "oreore",
        "extensions": [
          ".ore"
        ]
      }
    ]
  },
  "dependencies": {
    "vscode-languageclient": "^7.0.0"
  },
  "private": true
}

ここでは本記事での package.json に書いたことだけをざっくり説明します。

name は拡張の名前です。俺々言語用のモードなので oreore-mode にしました。今回は公開するわけでもないので適当なのでいいでしょう。

version は拡張のバージョン番号、author は製作者の名前、license はライセンス、description は拡張の説明です。今回は公開するわけでもないので適当なのでいいでしょう。

engines はこの拡張を動作させられる環境を書きます。私の今使っている VSCode が 1.52.1 だったので ^1.52.1 にしています(だいたいみんな最新付近のを使ってますよね?)。

main は最初に実行されるファイルです。今回は ./extension.js にします。

activationEvents には「いつこの拡張が起動されるか?」を記述します。["onLanguage:oreore"] としておくと、 oreore 言語のファイルを開いたときに拡張が起動してくれます。

contributes には「どんな機能を提供するか」を書きます。ここでは oreore という言語の機能を提供しており、その言語の拡張子は .ore である、としています。

dependencies は依存するライブラリを記述します。vscode-languageclient を使うのでこれを書いておきます。今回 Semantic Tokens という Language Server Protocol の v3.16 で定義された機能を使うので、^7.0.0 としました。

"private": true はうっかり NPM で公開してしまうのを防ぐためのものです。

詳しく知りたい方はその筋のドキュメントを読んでください。

extension.js

拡張の本体です。

大した量ではないのでコードをすべて貼り付けてしまいます。

"use strict";
const vscode = require("vscode");
const languageclient = require("vscode-languageclient");

let client;

function activate(context) {
    try {
        const serverOptions = {
            command: "node",
            args: [
                context.extensionPath + "/oreore.js",
                "--language-server"
            ]
        };
        const clientOptions = {
            documentSelector: [
                {
                    scheme: "file",
                    language: "oreore",
                }
            ],
        };
        client = new languageclient.LanguageClient("oreore-mode", serverOptions, clientOptions);
        context.subscriptions.push(client.start());
    } catch (e) {
        vscode.window.showErrorMessage("oreore-mode couldn't be started.");
    }
}

function deactivate() {
    if (client) return client.stop();
}

module.exports = { activate, deactivate }

VSCode の拡張は activate(context)deactivate() を export しなければなりません。
activate() は拡張の起動時に呼ばれ、deactivate() は拡張の終了時に呼ばれます。今回はここで vscode-languageclient の起動と終了をしています。

serverOptions は Language Server の起動コマンドです。今回の記述では node 拡張のあるディレクトリ/oreore.js --language-server という感じで起動します。oreore.js が今回作成する言語処理系なのですが、第一引数が --language-server になっているときは Language Server として動作するようにしたい、という算段です。

clientOptions は Language Client へのオプションです。今回は「oreore 言語のファイル用に Language Server(oreore.js) を使うよ」です。

npm install

vscode-languageclient をインストールするために npm install しましょう。

VSCode なら TERMINAL から npm install すればよいです。

git を使う方は次のものも入れておきましょう。

.gitignore
node_modules/

Language Client おわり

以上で Language Client の作成は終わりです。

F5 を押すと別 window で VSCode が起動し、拡張子が .ore のファイルを開くと vscode-languageserver が oreore.js を動かそうとします(エラーが出ます)。

次章から oreore.js を作っていきます。

* ここまでのソースコード *