とりゅふの森

GCPデータエンジニアとして生きる

【VSCode】拡張機能の開発を学ぶ(プロジェクト作成~シンタックスハイライト編)

f:id:true-fly:20210729221001p:plain

こんにちは、好きなエディターは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

f:id:true-fly:20210724154034p:plain

ハットをかぶったおじさん?が登場したら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で新規ウインドウを開き、作成されたフォルダを開いてみます。以下のように雛形となるファイル群が作成されていれば準備完了です!

f:id:true-fly:20210724160049p:plain

作成されたファイルを見てみる

ざっと自動作成されたファイルを見てみましょう。以下ドットで始まるファイル以外の解説です。

  • README.md
    拡張機能の説明文になります。
  • vsc-extension-quickstart.md
    拡張機能開発のクイックスタート、まずはここを読むと良いでしょう
  • package.json
    ここに拡張機能の設定を定義していきます
  • language-configuration.json
    言語設定です。かっこを入力すると閉じかっこも自動で入力してくれるアレですね
  • CHANGELOG.md
    拡張機能の変更履歴を書くファイルです
  • syntaxes/bqsql.tmLanguage.json
    ここがシンタックスハイライトする単語やルールを定義する設定ファイルになります

オリジナルシンタックスハイライトの作成とデバッグ実行

デバッグ実行してみる

まだ何も変更はしていませんが、とりあえず拡張機能はできたので、試しにデバッグ実行してみます。デバッグ実行するにはF5キーを推しましょう。[拡張機能開発ホスト]VSCodeが別ウィンドウで開きます。
このウインドウで、開発中の拡張機能が有効化されている状態になるので、早速拡張子が.sqlのファイルを開いてみます。

f:id:true-fly:20210724185511p:plain

現状ではなにもハイライトされていませんね。ではシンタックスハイライトのルールを定義していきましょう。

シンタックスハイライトのルールを定義する

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のファイルを開いてみます。

f:id:true-fly:20210724185712p:plain

見事、SELECTFROMWHEREQUALIFYORDERBYの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内には、keywordsstringsの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"と追記してみます。ここが公開元の名前になります。 f:id:true-fly:20210724164341p:plain 再度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.jsonrepositoryがないと警告されました、ここは無視してyで進めてOKです。
Doneと表示され、truefly-demo-0.0.1.vsixというファイルが作成されました。これでパッケージ化が完了です!

拡張機能をインストールしてみる

以下のコマンドでインストールしてみます。

code --install-extension truefly-demo-0.0.1.vsix

successfully installed. と表示されれば成功です。早速VSCodeのUIの拡張機能一覧を見てみましょう。

f:id:true-fly:20210724164833p:plain

無事インストールできました!これで自作のシンタックスハイライトも有効化されるようになります。

まとめ

以上、VSCodeの拡張機能の開発方法について、プロジェクト作成、オリジナルのシンタックスハイライトの作成、拡張機能のパッケージ化の3ステップでご紹介しました。
シンタックスハイライト以外にもVSCodeの拡張機能で作れるものはたくさんあります。次回はコードスニペットの作成についてご紹介します。

徹底解説Visual Studio Code

徹底解説Visual Studio Code

Amazon