🚀

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

2021/07/04に公開

VS Code

tech

はじめに

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

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

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

package.json

詳細は以下を参照。

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

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

extension.js

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

テスト

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

console

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

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

実装

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

これが参考になりそう。

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

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

おわりに

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

はじめに

Your First Extension

Extension Anatomy

拡張機能概要

プロジェクトを作成

package.json

extension.js

テスト

実装

おわりに

Discussion