このすみノート

Webエンジニアが技術や趣味を書くブログです。

Visual Studio Code用のKuin言語の拡張機能を公開したので、作成から公開の流れを共有してみる

プログラミング言語Kuinには、エディタとコンパイル機能とデバッグ機能がセットになったIDEが付属しています。

f:id:konosumi:20181028205221p:plain

とても便利ではあるのですが、自分が普段から使っているエディタで開発したい気持ちも強いので、Visual Studio Codeも併用しつつ開発したいと思いました。

そこで、プログラミング言語Kuin用の、VSCodeのシンタックス拡張を作ってみました。まだまだ不完全ではあるのですが、週末中に公開するという目標を立てていたので、VSCodeのマーケットプレイスに公開しました。

Kuin syntax - Visual Studio Marketplace

コード保管なども、将来的には実装したいなと思っています。取り急ぎは、最低限の色付けで公開しました。

(注釈:シンタックスハイライトも充実させたいのですが、それに時間が取られるとゲームを作る時間がなくなってしまう!)

Visuel Studio Code の拡張機能を公開する流れ

まずは、テンプレートとなるプロジェクトを作成します。作成には、npm経由でインストールする「Yo Code - Extension Generator」を使います。

Yo Code - Extension Generator | 非公式 - Visual Studio Code Docs

npmは、Node.js用のパッケージマネージャーです。ない場合は、Node.jsのインストールが必要です。

npm install -g yo generator-code
yo code

色々と質問されます。公開するまでは「package.json」で気軽に変更できますので、素直に応えていきます。

f:id:konosumi:20181028205623p:plain

  • 今回は、言語拡張を作りたかったので「New Language Support」を選びました。
  • 「Scope names」は、text.〜かsource.〜が使われることが多いようです。

私は、「VS Code 拡張機能公開までの流れ – 環境構築」を参考にしました。丁寧な解説があります。

シンタックスハイライトの実装

Visual Studio Codeのシンタックスハイライトには、TextMateの構文である「tmLanguage」という形式が採用されています。

qiita.com

今回は「tmLanguage」をJSONで実装しました。

作成した「kuin.tmLanguage.json」を見れば分かりますが、今はとてもシンプルです。

色分けは意外と大変

プログラミング言語のシンタックスハイライトは、こだわると大変である事が分かりました。

最初は、正規表現を駆使してやっていました。でも、そうすると対応したいケースがどんどん増えてきます。今回は、途中で方針を転換して、シンプルにキーワードに反応するシンタックスハイライトに切り替えました。

勿論、入念にこだわってチューニングすれば、もっと細かい色付けは実現できるのですが。頑張ろうとすると、それだけで週末が終わってしまいそうな勢いです(苦笑)。

道半ばではあるのですが、週末に公開すると決めていたので、踏み切って公開することにしました。コード本体は、GitHubにあります。

github.com

マスター設定をつまみ食いしながら、色付けを反映する

色付けには、以下のマスター設定を使います。

https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json

「comment / constant / variable」など、対応する設定を探して、当てはめていきます。ちなみに、思い通りの色にはなりません。

エディタには様々なカラースキームがあるので、スキームによって色合いは変わってきます。

拡張機能をVisual Studio CodeのMarketplaceに公開する

拡張機能の公開には、npm経由でインストールする「vsce」というツールを使います。

拡張機能の公開 | 非公式 - Visual Studio Code Docs

npm install -g vsce
vsce publish

publishをしようとすると「Personal Access Tokens」を聞かれます。「Azure DevOps」上で発行する必要があります。

なお、アクセストークンはパブリッシャーと紐付けておく必要があります。

パブリッシャーの作成

パブリッシャーとは、Visual Studio Code Marketplaceに拡張機能を公開できるユーザーのことです。

vsce create-publisher (publisher name)

これによって、まずはパブリッシャーを作成した上で、発行した「Personal Access Token」とパブリッシャーを紐づけます。

拡張機能の公開

アクセストークンを作成した上で、パブリッシャーが出来上がっていると、「vsce publish」に成功します。

f:id:konosumi:20181028213726p:plain

てっきり、WEB画面上のGUIでやるのかと思っていたのですが。アクセストークンの発行以外は、CUIで作業しました。

マーケットへの反映には、数分かかります。完了すると、公開したというメールが来ます。早速VSCodeで拡張機能を検索してみたところ、無事に公開されていました。

f:id:konosumi:20181028214002p:plain

さいごに

週末の間に公開するという目標を立てていたので、それ自体は達成することができました。

ただ、まだまだ不完全です。プルリクエストも受け付けています。もしくは、新たにVSCodeの拡張機能を開発いただいても良いかと思います。

「本当はコード補完も実装したい!」ですが、周辺環境ばっかり整えていつまでもコードを書かないのは、アンチパターンな気もします(苦笑)。

普段のプログラミングに疲れた時に、少しずつ手直しをやっていきたいと思います。

github.com