こんにちは、好きなエディターはVisual StudioCode(VSCode)のとりゅふです。
皆さん、VSCode使ってますか？統合開発環境としては軽量でシンプルなUIと、豊富な拡張機能が素敵ですよね。
今回はそんなVSCodeの拡張機能の開発方法について学んだのでまとめました。
今回はプロジェクト作成、オリジナルのシンタックスハイライトの作成、拡張機能のパッケージ化についてご紹介します。
環境
Windows10にNode.jsをインストールして、node,npmコマンドが実行可能な環境で検証しています。VSCodeももちろんインストール済みです。この辺の手順は省略します。
$ node --version v12.10.0 $ npm --version 6.10.3
必要なパッケージのインストール
以下のコマンドでインストールするYo！
$ npm install -g yo generator-code --save $ npm install -g vsce --save
プロジェクト作成
yoは対話型でVSCode拡張機能プロジェクトの雛形を作ってくれます。早速実行するYo！
$ yo code
ハットをかぶったおじさん？が登場したらOKです。ここからは対話形式で設定を進めていきます。
拡張機能の種類を選択する
? What type of extension do you want to create?
拡張機能といってもいろいろな機能があるので雛形もある程度種類があるんですね。今回は「New Language Support」を選択します。
Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar. ? URL or file to import, or none for new: ()
新規作成する機能なので、そのままEnterで進めます。
拡張機能の名前、識別子、説明の設定
? What's the name of your extension? ()
作成する拡張機能の名前を入力します。今回は「truefly-demo」と入力してみます。
? What's the identifier of your extension? (truefly-demo)
拡張機能の識別子を決めます。デフォルトだと名前を識別子にしてくれるので、そのままEnterで進めます。
? What's the description of your extension? ()
拡張機能の説明を入力します。「BigQuery SQL Syntax Highlight」と入力してみます。
言語の設定
Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript' ? Language id: ()
言語のIDを決めます。「bqsql」と入力してみます。
Enter the name of the language. The name will be shown in the VS Code editor mode selector. ? Language name: ()
言語の名前を決めます。ここもとりあえず「bqsql」と入力してみます。
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb) ? File extensions: ()
対応する拡張子を決めます。「.sql」と入力してみます。
Enter the root scope name of the grammar (e.g. source.ruby) ? Scope names: ()
スコープ名を決めます。例に倣って、「source.bqsql」と入力してみます。
雛形を作成する
? Initialize a git repository? (Y/n)
最後にGitリポジトリを作成するか問われます。作っておいて損はないので「y」と入力してみます。
以上、「truefly-demo」というディレクトリが作成され、中に拡張機能の雛形が作成されたので確認してみます。VSCodeで新規ウインドウを開き、作成されたフォルダを開いてみます。以下のように雛形となるファイル群が作成されていれば準備完了です！
作成されたファイルを見てみる
ざっと自動作成されたファイルを見てみましょう。以下ドットで始まるファイル以外の解説です。
- README.md
拡張機能の説明文になります。 - vsc-extension-quickstart.md
拡張機能開発のクイックスタート、まずはここを読むと良いでしょう - package.json
ここに拡張機能の設定を定義していきます - language-configuration.json
言語設定です。かっこを入力すると閉じかっこも自動で入力してくれるアレですね - CHANGELOG.md
拡張機能の変更履歴を書くファイルです - syntaxes/bqsql.tmLanguage.json
ここがシンタックスハイライトする単語やルールを定義する設定ファイルになります
オリジナルシンタックスハイライトの作成とデバッグ実行
デバッグ実行してみる
まだ何も変更はしていませんが、とりあえず拡張機能はできたので、試しにデバッグ実行してみます。デバッグ実行するにはF5キーを推しましょう。[拡張機能開発ホスト]VSCodeが別ウィンドウで開きます。
このウインドウで、開発中の拡張機能が有効化されている状態になるので、早速拡張子が.sqlのファイルを開いてみます。
現状ではなにもハイライトされていませんね。ではシンタックスハイライトのルールを定義していきましょう。
シンタックスハイライトのルールを定義する
syntaxes/bqsql.tmLanguage.jsonを開き編集します。このJSON、TextMate文法という文法で定義されているみたいです。詳細はこちらのTextMate公式ページ（英語）を見てください。
試しに、デフォルトで作成されたファイルの16行目、 matchの中身を変更してみます。
変更前 "match": "\\b(if|while|for|return)\\b" 変更後 "match": "\\b(SELECT|FROM|WHERE|QUALIFY|ORDER|BY)\\b"
デバッグ実行して再度.sqlのファイルを開いてみます。
見事、SELECT、FROM、WHERE、QUALIFY、ORDER、BYの6単語のみがハイライトされました！
tmLanguageファイルの構造
syntaxes/bqsql.tmLanguage.jsonの構造を見ていきましょう。
{ "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json", "name": "bqsql", "patterns": [ { "include": "#keywords" }, { "include": "#strings" } ], "repository": { "keywords": { "patterns": [{ "name": "keyword.control.bqsql", "match": "\\b(SELECT|FROM|WHERE|QUALIFY|ORDER|BY)\\b" }] }, "strings": { "name": "string.quoted.double.bqsql", "begin": "\"", "end": "\"", "patterns": [ { "name": "constant.character.escape.bqsql", "match": "\\\\." } ] } }, "scopeName": "source.bqsql" }
4～11行目のpatternsでシンタックスハイライトするパターンを定義しています。このpatterns内で、"include": "#キー"と書くことで、repository内のルールを参照しています。
repository内には、keywords、stringsの2つのルールが定義されています。
keywords内にもpatternsが出てきましたね。ここで最終的なルールを定義しています。16行目のmatchで正規表現で一致する文字列を判定しています。TextMateですが、鬼車正規表現ライブラリを使っています。
そして、正規表現でマッチした箇所に、nameで命名します。ここで設定された命名に対して、VSCodeが勝手に色付けをしてくれます。私の環境では、keyword.control.bqsqlは紫色、string.quoted.double.bqsqlは橙色になります。この命名ですが、関数だったらentity.name.fuction、数値だったらconstant.numericといったように規則があります。これに従って命名していくことで、きれいなシンタックスハイライトが完成します。詳細は公式ページの「12.4 命名規則」を参照ください。
拡張機能をパッケージ化する
たった1行JSONを変更しただけですが、とりあえず拡張機能は作成できたので、これをVSCodeにインストールできるよう、パッケージ化してみます。
vsixの作成
パッケージ化するには、vsce packageを実行します。
$ vsce package ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
エラーになりました。publisher nameが必須みたいです。
package.jsonに、"publisher": "truefly"と追記してみます。ここが公開元の名前になります。
再度vsce packageを実行します。
$ vsce package ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
またまたエラーになりました。どうやらデフォルトのREADME.mdはダメみたいです。編集しましょう。
# Truefly demo BigQuery SQL Syntax Highlight
再度vsce packageを実行します。
$ vsce package WARNING A 'repository' field is missing from the 'package.json' manifest file. Do you want to continue? [y/N]
package.jsonにrepositoryがないと警告されました、ここは無視してyで進めてOKです。
Doneと表示され、truefly-demo-0.0.1.vsixというファイルが作成されました。これでパッケージ化が完了です！
拡張機能をインストールしてみる
以下のコマンドでインストールしてみます。
code --install-extension truefly-demo-0.0.1.vsix
successfully installed. と表示されれば成功です。早速VSCodeのUIの拡張機能一覧を見てみましょう。
無事インストールできました！これで自作のシンタックスハイライトも有効化されるようになります。
まとめ
以上、VSCodeの拡張機能の開発方法について、プロジェクト作成、オリジナルのシンタックスハイライトの作成、拡張機能のパッケージ化の3ステップでご紹介しました。
シンタックスハイライト以外にもVSCodeの拡張機能で作れるものはたくさんあります。次回はコードスニペットの作成についてご紹介します。
