🚀

VS Code の拡張機能を作ってみる - 1

2021/07/04に公開約4,800字

はじめに

VS Code の拡張機能を作ってみたくなりまして、作ってみることにしました。

Your First Extension

console
$ mkdir -p srcs/VSCode
$ cd srcs/VSCode
$ sudo npm install -g yo generator-code
$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension?
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? Yes
? Which package manager to use? npm

(snip)

helloworld ディレクトリをVS Codeで開いて、 Run -> Start Debugging を実行。

新しく開いたウィンドウでコマンドパレットから Hello World コマンドを実行すると、ポップアップメッセージが表示される。

ふむふむ。

あとは省略。

Extension Anatomy

先の HelloWorld を基に拡張機能に関する説明が記載されている。

以下の二つのファイルがメイン。

  • package.json
    • マニフェストファイル
    • Node.js の package.json を VS Code 特有のフィールドで拡張している
      詳細はここを参照。
  • src/extension.ts
    • 拡張機能の本体
      activate()deactivate() をエクスポートするのが作法らしい

拡張機能概要

作ってみるのは以下の拡張機能です。

  • 名称
    ToDo-Highlighter
  • 機能
    • ソースコードの TODO などを強調表示する
    • 対象キーワード
      • changed
      • fixme
      • hack
      • note
      • optimize
      • review
      • todo
      • warning
      • xxx
    • キーワード単位で前景色・背景色を設定できる
    • キーワード以外にも任意の正規表現を指定して強調表示できる
    • TODO の一覧をパネルに出力する

プロジェクトを作成

console
$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? ToDo-Highlighter
? What's the identifier of your extension? todo-highlighter
? What's the description of your extension?
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? Yes
? Which package manager to use? npm

Writing in /Users/kishi/mine/srcs/VSCode/todo-highlighter...
   create todo-highlighter/.vscode/extensions.json
   create todo-highlighter/.vscode/launch.json
   create todo-highlighter/test/runTest.js
   create todo-highlighter/test/suite/extension.test.js
   create todo-highlighter/test/suite/index.js
   create todo-highlighter/.vscodeignore
   create todo-highlighter/.gitignore
   create todo-highlighter/README.md
   create todo-highlighter/CHANGELOG.md
   create todo-highlighter/vsc-extension-quickstart.md
   create todo-highlighter/jsconfig.json
   create todo-highlighter/extension.js
   create todo-highlighter/package.json
   create todo-highlighter/.eslintrc.json

(snip)

GitHub にリポジトリを作成して Push 。

console
$ cd todo-highlighter
$ git remote add origin https://github.com/ksh2ksk4/ToDo-Highlighter.git
$ git branch -M main
$ git push -u origin main

https://github.com/ksh2ksk4/ToDo-Highlighter/commit/f71f320c1941b91440faa0eae3b3209a46c46527

手を加えていくのは主に以下の二つのファイル。

  • package.json
    • 拡張機能のマニフェストファイル
    • ルートディレクトリに配置
  • extension.js
    • 拡張機能本体
    • マニフェストファイルの main で指定したパスに配置

package.json

詳細は以下を参照。

https://code.visualstudio.com/api/references/extension-manifest

現段階では必須のフィールドと必要なフィールドのみにする。

  • main
    拡張機能のエントリポイント。
  • contributes
    拡張機能に関する設定など。
    これは後で設定するので現段階では何も設定しない。
  • activationEvents
    拡張機能をアクティベートするイベント。
    今回作成する拡張機能は「コマンドパレットから実行して有効化する」ようなものではなく、VS Code起動時に有効化されているようにしたいため、ここには * を指定しておく。

https://github.com/ksh2ksk4/ToDo-Highlighter/commit/1ce10fa2bf5900dc765c20ecc3f8cf1776b6e3b0

extension.js

解説コメントを削除し、インフォメーションを表示するよう変更。

https://github.com/ksh2ksk4/ToDo-Highlighter/commit/04937aa9a10ecec551717dae325fa03b65c6dd0c

テスト

VS Codeにローカルインストールして作成した拡張機能をテスト。
とりあえず、 ~/.vscode/extensions に放り込めば良いらしい。

console
$ cd ~/.vscode/extensions
$ ln -sfv ~/mine/srcs/VSCode/todo-highlighter

デバッグを開始後に起動するウィンドウ(Extension Development Host)の右下に activated というインフォメーションが表示されればOK 。

実装

取っ掛かりがないと難しいので、参考になりそうなサンプルを探す。

https://github.com/microsoft/vscode-extension-samples

これが参考になりそう。

https://github.com/microsoft/vscode-extension-samples/tree/main/decorator-sample

ひとまず作ってみたもの。以下の機能まで実装完了。

  • キーワードを含むコメントの強調表示
  • キーワード単位での色設定

https://github.com/ksh2ksk4/ToDo-Highlighter/commit/c531961b3a4f3903e894d0ca6433495335da0fa6

おわりに

続いて設定機能と一覧表示機能をやってみます。

Discussion

ログインするとコメントできます