今見ているファイル内をSearchしやすくするVSCode拡張を作りました

今見ているファイル内をSearchしやすくする「Search in Current File」というVSCode拡張を作ったので紹介です。

• https://github.com/shibayu36/vscode-search-in-current-file
• https://marketplace.visualstudio.com/items?itemName=shibayu36.search-in-current-file

背景

Emacsにはhelm-occurという拡張があって、インクリメンタルサーチからスムーズにファイル内の検索結果一覧を見れる拡張がある。これが現在のファイルを探索するのに非常に便利で愛用していた。

VSCodeでも同じようなことが出来ないかなと思ったので、勉強がてら拡張を作ることにした。

使い方

Search in Current File - Visual Studio Marketplaceからインストールすると、「Search in Current File」というコマンドが追加される。これを実行するとFindからスムーズにSearchに移行し、現在カーソルのあるファイルのみのマッチ結果を出すことが出来る(Searchパネルのfiles to includeに自動で現在のファイルがフィルインされる)。

デモ

また以下のようなキーボードショートカットを設定しておくと便利。Find中にctrl-oを押すだけですぐさまSearchに移行する事ができる。もちろん別のキーボードショートカットを設定しておくことでFind中以外でも現在ファイルからSearch出来る(範囲選択していたらクエリに自動でフィルインされる)。

// Only type ctrl+o when using Find.
// the query in Find is filled into the query in Search.
{
  "key": "ctrl+o",
  "command": "search-in-current-file.searchInCurrentFile",
  "when": "editorFocus && findInputFocussed"
},
{
  "key": "ctrl+cmd+o",
  "command": "search-in-current-file.searchInCurrentFile",
  "when": "editorFocus"
}

技術的Tips

• VSCodeにコマンドを追加する拡張を作りたい時はpackage.jsonのcontributes.commandsを設定すれば良い。コマンドを実行するまで拡張読み込みを遅延するために、activationEventsも正しく設定する。
• コマンドを作成する時は、基本コマンドの組み合わせで実装していくことになりそう。以下のようなドキュメントを駆使して頑張って探す
  • VS Code API | Visual Studio Code Extension API
  • Commands | Visual Studio Code Extension API
  • Built-in Commands | Visual Studio Code Extension API
  • キーボードショートカット一覧からそれっぽいの探す
  • よく分からなかったら諦めてvscodeのコードを読む
• 今回のコマンド発掘作業
  • 色々探していると workbench.action.findInFiles が使えそうと分かった
  • 使える引数がいまいち分からなかったので、諦めてコード読んだら、このあたりで分かった

まとめ

今回は、今見ているファイル内をSearchしやすくするVSCode拡張を作ったので紹介しました。VSCode拡張の基本的な作り方が把握できたのが良かったです。

参考資料

Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック

「Visual Studio Code実践ガイド」を読んだ

最近コードを書く時はもっぱらVSCodeを使っていて、拡張とかも書いてみたいなと思い始めていたので、基本知識を付けるために「Visual Studio Code実践ガイド」読んだ。VSCode使い始めたばかりの人には基本的な概念や、便利拡張紹介、簡単なカスタマイズ、拡張開発など網羅的に学べて良い本だと思った。

Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック

個人的には特に拡張周りが非常に参考になった。拡張周りは公式ドキュメントを読んでたときにイマイチよく分からないなとなっていたが、この本を読んで開発から公開まで一通り学べたのはありがたかった。テキスト編集、スニペット、リント、カラーテーマそれぞれの拡張の実装サンプルもあるのも今後開発するときの指針になりそうだった。

読書ノート

• 検索結果のファイル名をマウスオーバー -> xアイコンをクリックでそのファイルが一時的に検索結果から外れる。必要ないファイルを外した後に全て置換で残ったファイルのみ置換できる 733
• パラメータを含むコマンドを設定する 2231
  • 例) editorScrollにパラメータを与えることで、ページの半分をスクロールする、みたいなことができる
• 便利そうな拡張 2342
  • Code Spell Checker
  • Visual Studio IntelliCode
  • Path Intelisense
  • Auto Close Tag
  • Bracket Pair Colorizer 2
• VSCodeを拡張できるAPIが用意された(限られた)箇所をコントリビューションポイントと呼ぶ 4070
  • 例: コマンドに関するもの: commands/menus/keybindings
  • 拡張を書く時は、このコントリビューションポイントをpackage.jsonで指定する
• package.json中でコントリビューションポイントを指定する 4141
  • contributes
  • activationEvents
• テキスト編集、スニペット、リント、カラーテーマの拡張のサンプルがあって参考になる 4218
• 拡張機能は ~/.vscode/extenstionsに置くだけでVSCodeに読み込まれるようになる。手元で確認したいときに便利

$ cd ~/.vscode/extensions
$ git clone https://github.com/74th/vscode-book-markdown-goplay.git
$ cd vscode-book-markdown-goplay
$ npm install
$ npm run compile

• 拡張機能を公開する前のチェック事項 5093
  • プログラムチェック
    • 外部ファイル参照をするならMac/windows/linuxいずれでも動くようにpathモジュールをつかってるか
    • VSIXファイルを直接インストールしても動作するか
  • Gitにリリースバージョンを示すタグは付けたか
  • .vscodeignoreファイルを適切に作成し、公開してはならないファイルを取り除いたか
  • LICENSEは作ったか
• 拡張の公開方法 5152
  • vsce packageでvsixを作って、code —install-extension hoge.vsix で手元からインストールできる

VSCodeでQuickOpenの幅を広げ、ファイルを探しやすくする

　VSCodeで大きめプロジェクトを触っていると、QuickOpenでファイルを探すときにコマンドパレットの幅が狭くて探しにくいな...と思うことがあった。調べたら広げる方法があったのでメモ。

　まず Option to widen the command palette · Issue #85374 · microsoft/vscode · GitHub のissueにある通り、設定できるようにする機能は公式のbacklogに載ったようだ。そのため、待ってれば公式の機能で変えられるだろう。

　ひとまずそれまでの間にwork aroundするには、issueにある通りCustomize UIという拡張を使うと良い。この拡張をインストールした後に、以下の設定をsettings.jsonに入れるだけでカスタマイズできる。

  "customizeUI.stylesheet": {
    ".quick-input-widget": "width: 1000px !important; left: calc(50% - 200px);"
  }

これだけで以下のように幅が広がり、ファイルが探しやすくなった。

Before

After