HSP
VSCode

【VS Code】HSPのSyntax Highlight Extensionを作った話


はじめに

初めまして。Monotreaと申します。

友人が久しぶりにHSPにハマったというので、かつて親しんだHSPでも少しいじってみるかと思った私。

いつも通りVS Codeを開いてソースコードをちょびっと書いてみました。

そこで気づきました。あ、Syntax Highlightされてない。

Githubとかで探すと有志の方が作成されているExtensionが見つかったような気もしますが、この時の私は何の気もなしに「じゃあ自分で作ってみよっか」ということで勉強もかねて自作することにしました。

初めに言うと、別にExtensionを公開しようとかそういう記事ではないです。

自分がつまづいたところを書いただけの備忘録のようなものです。


Visual Studio CodeのExtensionを作る環境構築

Extensionの雛形を作ってくれるアプリケーションをここにある通り導入します。

前提としてNode.jsが使える環境である必要があるので、インストールしていない場合はインストールします。

まず、以下のコマンドを入力します。

npm install -g yo generator-code

また、作ったエクステンションを自分で使いたい場合に、パッケージ化する際に必要なものをここを参考にインストールします。

npm install -g vsce


Visual Studio Code用のSyntax Highlight Extensionの雛形の作成

まず、Extensionの雛形を作ります。

というわけで、Extensionのディレクトリを作成したいディレクトリまで移動して、yo codeというコマンドを打ちます。

多分以下のような表示を得られると思います。

? What type of extension do you want to create? (Use arrow keys)

New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
> New Language Support
New Code Snippets
New Keymap
New Extension Pack

私が作りたいのはHSPのSyntax Highlight Extensionなので、New Language Supportを選びました。

要求された項目に答えていくと、雛形が完成します。

この後は、ひたすら(identifier).tmLanguage.jsonをいじっていきます。

・・・。いじっていった後のものは、こちらになります。

命令とパラメータに分けてハイライトされるようにしています。

ただ、マルチステートメント対応させようと:(コロン)を特別扱いしたら文字列の中の:にまで反応してしまい、うまくハイライトされない状態になっています。

というわけで、記述法などについてはここでは触れません。

だって、よくわからないもの。

まだ、制作中。完成させるか知らないですが。

まあ、少し書くのにはそこそこ使えそうなものになったので一区切り。

一応完成はしました。

以下に対応しています。


  • ステートメント(命令 p1, p2,...)の形

  • マルチステートメント(命令 p1, p2,... : 命令 .... : ...)の形

  • if, gotoなどのキーワード

  • #defineなどのいわゆるプリプロセッサ系の命令


Extensionを自分用にインストール

さて、ここまでで自分の適当に作ったExtensionが出来上がっているわけです。

これをインストールするためには、vsceを使って、vsixファイルにパッケージングしてあげれば良いです。

Extensionのディレクトリまで移動して、

vsce package

と実行するとパッケージングできます。

ここで多分問題になるのが以下の2点。


  • publisherって何?

  • README.mdを編集って?

前者は、各Extensionは作成者の名前を持たなければならないのでvsceがエラーを吐くわけです。

package.jsonファイルの中に、"publisher": "(publisher name)"を追記する必要があります。

多分ですが、自分だけで作る場合はこの名前は何でもいいと思います。

これが、MarketにPublishする場合だとそうはいきません。

Azure DevOpsでアカウントを作り、Organizationを作成した後、Personal Access Tokensを発行する必要があります。そのPersonal Access Tokensを使って、vsceでpublisherを作成し、その名前を記述する必要があります。

vsce create-publisher (publisher name) (Personal Access Tokensが要求される)

公式では、Publishしない場合にもvsceでpublisherを作成する必要があるとは記述されていませんし、Githubのissueでも文句が言われているように、publisher nameとは何かという指定はどこにもありません。

実際、適当なpublisherをpackage.jsonに書くだけで、vsixファイルの作成はできました。

後者は、単にREADME.mdを編集しろという警告のようなものです。

Yeomanによって作成されたREADME.mdには、作成者に対しての言葉が連ねられています。

自分だけで使うなら良いのですが、そこはまあ配布するときには受取った人には訳の分からないものになってしまいます。

そうしたことを防ぐための警告だと思っています。

まあある程度編集すると、このエラーはなくなります。

これで晴れて、vsixファイルを作成できたことと思います。

後はVS Codeの拡張機能から「VSIXからのインストール」を選んで、作成したファイルを選択すればExtensionが自分の環境にインストールされます。


参考