とりゅふの森

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

【VSCode】拡張機能の開発を学ぶ(コードスニペット編)

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

こんにちは、前回に引き続き、VSCodeの拡張機能開発についてまとめました。前回はシンタックスハイライト、今回はコードスニペット編です!
コードスニペットとは、以下のような、単語を入力して、よく使う構文などを補完してくる機能です。

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

コードスニペット自体はVSCodeの設定ファイルを変更することで自作することもできますが、今回は拡張機能として開発します。

プロジェクト作成

新規プロジェクトを作成します。

$ yo code

拡張機能の種類を選択する

? What type of extension do you want to create? 

今回は「New Code Snippets」を選択します。

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-snippets」と入力してみます。

? What's the identifier of your extension? (truefly-snippets)

拡張機能の識別子を決めます。デフォルトだと名前を識別子にしてくれるので、そのままEnterで進めます。

? What's the description of your extension? ()

拡張機能の説明を入力します。「BigQuery SQL Snippets」と入力してみます。

言語の設定

Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: ()

言語を設定します。「sql」と入力してみます。

雛形を作成する

? Initialize a git repository? (Y/n)

最後にGitリポジトリを作成するか問われます。作っておいて損はないので「y」と入力してみます。

以上、「truefly-snippets」というディレクトリが作成され、中に拡張機能の雛形が作成されたので確認してみます。VSCodeで新規ウインドウを開き、作成されたフォルダを開いてみます。以下のように雛形となるファイル群が作成されていれば準備完了です!

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

コードスニペットを作成する

作成されたsnippets/snippets.code-snippetsを編集しましょう。作成時点では{}のみのファイルです。

1単語登録する

まずは一単語登録してみます。

{
    "_PARTITIONTIME": {"prefix": "_PARTITIONTIME", "body": ["_PARTITIONTIME"],"description": "BigQueryのパーティション"}
}

デバッグ実行で拡張子が.sqlのファイルを開き、parと入力すると、登録した_PARTITIONTIMEが表示されます。
prefixは入力される単語、つまり変換元の単語になります。ここに書いてある単語に含まれる文字を入力すると補完がされます。
bodyは、補完されて実際に入力される値、descriptionは説明、先頭のキーは右の方に薄く表示される値になります。

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

複数行の構文を登録してみる

以下を登録します。

    "RANK() OVER(PARTITION BY ORDER BY)": {
        "prefix": "RANK()",
        "body": [
            "RANK() OVER(",
            "\tPARTITION BY",
            "\t\t $1",
            "\tORDER BY",
            "\t\t$2",
            ")"],
        "description": "RANK関数(WINDOW関数)"
    }

このようにbodyに複数行登録もできます。$1,$2は、タブストップです。補完入力後にカーソルが合わさる箇所になります。$1に入力後、TABを押すことで、$2にカーソルを移動できます。 f:id:true-fly:20210724214523p:plain

タブストップにプレースホルダーを設定する

先程のRANK関数を少し変更します。

    "RANK() OVER(PARTITION BY ORDER BY)": {
        "prefix": "RANK()",
        "body": [
            "RANK() OVER(",
            "\tPARTITION BY",
            "\t\t ${1:_partition_expr}",
            "\tORDER BY",
            "\t\t${2:_partition_expr}",
            ")"],
        "description": "RANK関数(WINDOW関数)"
    }

タブストップを、${1:_partition_expr}${2:_partition_expr}のように記述することで、プレースホルダーを設定できます。補完入力後にプレースホルダーに対してカーソルが当てられます。ユーザがどのような値を入力すればよいかわかりやすくなりますね。 f:id:true-fly:20210724214945p:plain

まとめ

以上、今回はVSCodeの拡張機能で、コードスニペットの作成方法をご紹介しました。前回のシンタックスハイライトと合わせて、どちらもJSONに設定を記述するだけで実装ができるので、自分の開発環境にちょっとした機能追加をする際に気軽に利用できるので、覚えておくと便利だと思います。
次回はJavaScriptを実行して、より柔軟な拡張機能の開発方法をご紹介します。

徹底解説Visual Studio Code

徹底解説Visual Studio Code

Amazon