VSCodeで一部のファイルだけをバイナリエディタ開く
VSCodeで一部のファイルだけをバイナリエディタ開く
開発をしていると画像データなどをバイナリとして確認したいときがたまにあります。
そういった場合に自分はVSCodeの拡張機能であるHex Editorを利用しています。
Hex Editorとは
Hex EditorはMicrosoftが開発しているVSCodeの拡張機能です。
主に画像などのバイナリファイルを扱うためのエディタを追加することができます。
ファイルの開き方
コマンドパレットから開く場合
- 画像データを通常の方法で開く
- タブがアクティブな状態でコマンドパレットを開く
-
> Hex Editor: Open Active File in Hex Editorを入力
コンテキストメニューから開く場合
- 画像データを通常の方法で開く
- タブがアクティブな状態でタブのコンテキストメニューを開く
- 「エディターを再度開くアプリケーションの選択」をクリック
- 開いたメニューの中に
Hex Editorがあるのでそれを選択
特定のファイルのみ自動的にHex Editorで開く
もしプロジェクト内でテストに使用する画像データなど、特定の画像データのみHex Editorで開きたい場合はVSCodeの設定を行うことで自動的にHex Editorで開くように設定ができます。
リポジトリ内にVSCodeの設定を含める場合、.vscode > settings.jsonに記述を追加するためその前提で進めていきます。
settings.jsonの記述
拡張機能の紹介ページでも記載されていますが、workbench.editorAssociationsという項目に設定を追加することで通常のテキストエディタかバイナリエディタ（Hex Editor）などどのエディタでファイルを開くのかを指定できます。
"workbench.editorAssociations": {
"*.hex": "hexEditor.hexedit",
"*.ini": "hexEditor.hexedit"
},
上記の記述の場合、.hex/.iniの拡張子のファイルはHex Editorで開くようになります。
この指定ではglobが使用できるため下記のように特定のディレクトリを指定することも可能です。
"workbench.editorAssociations": {
"**/__test__/**/*.png": "hexEditor.hexedit",
"**/__test__/**/*.jpg": "hexEditor.hexedit",
"**/__test__/**/*.webp": "hexEditor.hexedit"
}
この指定では__test__ディレクトリ配下にある各種画像データを対象としています。
この設定をリポジトリに含めることで通常の画像プレビューではなく直接バイナリエディタ（Hex Editor）で開くようになります。
その他の設定情報
Hex Editor自体の設定についても記載しておきます。
hexeditor.columnWidth
行の折り返しを何列ごとに行うのかを設定できます。
デフォルトは16で数値で指定できます。
hexeditor.inspectorType
データインスペクタと呼ばれる情報欄の表示方法を変更できます。
デフォルトは"aside"で下記の表の値の項目から選べます。
| 値 | 説明 |
|---|---|
"aside" |
バイナリエディタ内のサイドエリアに表示 |
"sidebar" |
VSCodeのサイドバー（デフォルトだとエクスプローラーなどがある箇所）に表示 |
"hover" |
ホバー時にツールチップのように表示 |
hexeditor.dataInspector.autoReveal
hexeditor.inspectorTypeで"sidebar"を選択したときのみ有効な設定です。
サイドバーが自動的にデータインスペクタに移動するのかどうかを指定でき、デフォルトではtrueです。
直前まで開いていたサイドバーの状態を維持したい場合などはfalseを設定することで状態を維持できます。
hexeditor.showDecodedText
テキストとしてデコードした場合の結果を表示するかを選択できます。
デフォルトではtrueに設定されているため表示を消したい場合はfalseに設定します。
hexeditor.maxFileSize
Hex Editorは一定以上の容量のファイルを開く場合に警告を表示してくれますがその閾値となる容量を変更できます。
単位はMBでデフォルトだと10MBに設定されています。
hexeditor.defaultEndianness
デフォルトのエンディアンネスを選択できます。
"big"を選択した場合はビッグエンディアン、"little"を選択した場合はリトルエンディアンがデフォルトになります。
Discussion