Visual Studio Code向け プロデル用拡張機能の解説

# TL;DR
- 今年Visual Studio Code向け「プロデル」用拡張機能を大幅アップデートしました
- 定義の検索や変数名の変更などプロデルデザイナと同等の機能が利用できます
- SemanticTokens対応になりレベルの高いシンタックスハイライトが可能です
- ワークスペースに対応し、プロジェクトモードと同等の使い方が可能です
- プロデルデザイナのプログラムが消える問題などの経緯の話

https://marketplace.visualstudio.com/items?itemName=utopiat.produirelang

# 概要
日本語プログラミング言語「プロデル」に対応したVisual Studio Code向け拡張機能を公開しています。この拡張機能はLSP(Language Server Protocol)対応の言語サーバとなっており、エディタ内でプロデルプログラムを解析し、その抽象構文木から様々な開発支援を提供します。
2024年9月に拡張機能を大幅にアップデートしました。

主要な機能の解説は、次の公式ブログに記載しています。

https://produ.irelang.jp/blog/2024/09/4786/

# 拡張機能の主な機能

- シンタックスハイライト
- シンボルのアウトラインと検索
- 名前の変更
- すべての参照の検索
- ツールチップ
- ワークスペースでの横断検索

## シンタックスハイライト

2024年9月のアップデートでSemanticTokensに対応しました。変数や種類、定数が色分けされて表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/b069f4e5-7e27-5587-eefb-75079654fdb9.png)

## シンボルのアウトラインと検索

プロデルのプログラムで定義した識別子(シンボル)や字句を、Visual Studio Codeの各種機能で参照できます。プロデルの解析器(パーサ)から得られた抽象構文木(AST)を使うため詳しくて正確な情報を確認できます。

「アウトライン」ペインにはプログラム中に宣言された種類と手順、変数が一覧で表示されます。各定義をクリックすると、該当する行へ移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/c16f4e0f-2762-11aa-4f2a-6481e05ea7b8.png)

コマンドバーで「@」を指定すると、選択しているファイルのプログラム全体からシンボルを検索できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/62d27c2b-c69a-6e32-55b6-83fd887d7508.png)


## 名前の変更

変数名などの識別子の名称を変更できます。プログラム中で同じ識別子を使う箇所の名称を正確に置き換えられます。プログラムで名前を変えたい字句を選択して「シンボルの名前変更」を選びます。

| メニュー | 画面 |
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/3ece8dc3-7233-58e5-2219-f13ec796d32b.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/5e9e699c-e7ec-a2ea-a089-6296c102c7a9.png)|

## 変数や種類の参照の検索

プログラム中の変数や種類について選択した箇所と同じ変数や種類を参照する場所を検索できます。プログラムで字句を選択して「すべての参照を検索」を選びます。

| メニュー | 結果 |
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/de76af02-7ef0-423a-4a49-51476d8382dc.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/9b71d79d-fa69-3fb8-168a-cdd148073742.png)|

# ツールチップ

プログラム中の字句をマウスホバーすると、その字句の分類がツールチップとしてポップアップされます。その字句が種類や設定項目の場合は、テキストのリンクをクリックするとマニュアルの関連ページを開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/bedb37b8-b5c4-4134-d4fe-f5ad6bc6300d.png)


## ワークスペースでの横断検索

0.2.0よりワークスペースに対応しました。ワークスペースで複数のファイルを追加することで、プロデルデザイナのプロジェクトモードのような複数ファイルによる開発が可能です。大規模なプログラムの作成にも活用できます。

コマンドバーで「#」を指定すると、ワークスペース内や開いているファイル・フォルダのプログラムのシンボルを横断検索できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101225/43009ad9-8730-67d8-2546-5a25d34decdb.png)


# 未対応の機能

- コードレンズ
- デバッガ (検討中)
- ウィンドウの設計
- 入力補完 (検討中)

入力補完機能については、Visual Studio Codeの仕様や、かな漢字入力との兼ね合いを考慮する必要があり、今回は簡易的に実装しました。またIMEオフの時でも一部字句をローマ字で入力補完ができます。入力補完機能については模索段階です。

プロデルデザイナにあるようなウィンドウの設計画面については、Visual Studio Codeではプロデルデザイナと同等のGUI環境が提供できないため、未対応です。

# 消えるプログラムとの戦い

ここからは余談です。

5年以上前のバージョンのプロデルでは、プロデルデザイナでプログラムを入力していると「プログラムが消える」という現象に遭遇されていたかと思います。この現象でご不便・ご迷惑をおかけして本当に申し訳ありませんでした。

Visual Studio Code向けプロデル用拡張機能の開発動機は、このプログラムが消える現象を根本的に解決したかったためです。

プロデルは、日本語プログラミング言語であるため、分かち書きされないプログラムです。プロデルのプログラムに色分けがあるだけでプログラムの可読性が格段に良くなります。そこでプロデルデザイナでは、プログラムを構文解析した抽象構文木から色付きの書式付きテキストを生成することで、シンタックスハイライトを実現していました。しかしこの方法が仇となり、入力途中のプログラムなどで抽象構文木の生成に失敗すると、プログラムが消えてしまうという現象が起きていました。

現在のプロデルデザイナでは、プログラムが消えるという最悪の現象は完全に解消しましたが、それ以外の点でも、言語処理系を作ることに加えて、安定した開発環境を作ることはかなりの労力で、Visual Studio Codeのような安定したエディタを活用できると便利です。


# フィードバックについて
プロデルは、コミュニティが小さいので、バグフィックスが活発ではありません。バグなどお気づきの際は、具体的で建設的なフィードバックをお願いします。できる範囲で対応します。

またプロデルは、コンパイラ・開発環境・ドキュメント・ブログ記事をすべてワンオペで作業しています。一般のプログラミング言語で当たり前にあるような完成度の高い機能やドキュメントを提供するまでには至っておりませんので、ご利用はセルフサービスの精神でお願いいたします。

# まとめ
本拡張機能は、今後も継続的にアップデートする予定です。一方でプロデルデザイナも､Visual Studio Codeほどの強力な開発環境には敵いませんが、とても便利なエディタです。プロデルユーザさんの使い道に合った開発環境を選んで、プロデルをご活用ください。