Zenn
Open4

VS Codeの拡張機能を開発したい(順次更新)

VS Code
VS Code 拡張機能
yg_siroyg_siro

VS Codeの横の虫眼鏡アイコンで正規表現で検索できるけど検索結果が重複したものがずらずら並んで見づらかったので以下の条件の拡張機能を作成したい

  1. 正規表現による検索のみとする
  2. 標準の検索と似たような表示にはしたい
  3. 結果の表示は重複を削除した検索結果を表示する
  4. 重複は削除しているが結果をクリックすればその位置に飛べるリンクを表示できるようにしたい

検索結果イメージ

+ result1
- result2 // + ボタンをクリックすると展開してリンクが表示されるといい
  - result2の検索に引っ掛かったところへのリンク1
  - result2の検索に引っ掛かったところへのリンク2
  - result2の検索に引っ掛かったところへのリンク3
+ result3
.
.
.
+ resultN
yg_siroyg_siro

Activity Barに表示するアイコンのスクリーンショット

SVGで白色で作成したけどVSCodeの背景が白の場合に色変更できるんだろうか？

yg_siroyg_siro

必要なものをnpmでインストール

npm install -g yo generator-code vsce

yo codeで拡張機能開発のための雛形を作成

yg_siroyg_siro

package.jsonのcontributesにviewsContainers-activityBarセクションを追加
ここで先ほど作成したアイコンを指定する
ここで指定したidは後で使用します

  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "RegSearch-Container",
          "icon": "./BarIcon.svg",
          "title": "RegSearch"
        }
      ]
    }

次に同じくcontributesにviews - 先ほどのidセクションを追加する。

"contributes": {
  "views": {
    "RegSearch-Container": [{
      "id": "RegSearch-id",
     "name": "RegSearch-id name"
    }]
  }
}

とりあえずこれでF5を押してデバッグするとアクティビティバーにアイコンが表示される