私の VSCode の使い方紹介 ~アプリケーションのログ解析~
はじめに
かわむらです。
こういった技術共有の文章を書くのが始めてで、感覚がよくわからず、緊張しています。
私は普段、とある業務用のサーバーを制御する GUI アプリケーションの設計開発を行っているのですが、これといって尖った特徴的な技術を持っている人間ではないです。そんな中、Advent Calendar に参加させていただくということで何が皆さんに共有できるかと考えてみたところ、自分の VSCode の使い方を Tips 的に共有すればどこかしらの点で誰かしらの役に立てるのではないかと思い、このテーマに決めました。
私が普段 VSCode を使用する場面は java のコーディングと担当アプリケーションのログ解析といった２つの場面です。そういった作業の中、特にログ解析の作業中に VSCode が高機能テキストエディタとして重宝しています。VSCode は拡張機能の導入でより幅広い活躍をする場面も多いですが、今回はそういった拡張機能の話ではなく、「高機能テキストエディタ」としての VSCode の便利な使い方の Tips が共有できればと思っています。
目次
1. 右クリックからファイル/ワークスペースフォルダを VSCode で開く
2. エンコード自動判別
3. 言語モードの変更
4. 文字列検索
5. 行の折返しのオンオフ
6. タブの横移動
7. ファイルの比較
1. 右クリックからファイル/ワークスペースフォルダを VSCode で開く
VSCode インストール時に「エクスプローラーのファイル/ディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」にチェックを入れてインストールすることで有効にできる
VSCode インストール済みの状態で VSCode を上書きインストールして、上記の手続きをすれば問題なく有効にできる
まずは VSCode の開き方から。
Windows のファイルエクスプローラー上で目当てのファイル/フォルダを探して右クリックから開く、というのはやっぱり便利です。
下記の元ネタ記事でも強調していますが、インストール時にチェックしそびれたから使えてないんだよね～、という方も、上書きインストールで有効にできますよ、というのがポイントです。
2. エンコードの自動判別
[ファイル]⇒[基本設定]⇒[設定]を選択
[User Settings]タブが開く
ここで検索ボックスに「encoding」と入力する
// 有効な場合、ファイルを開くときに文字セット エンコードをエディターが推測します。言語ごとに構成することも可能です。
"files.autoGuessEncoding": false,
が表示される
"files.autoGuessEncoding": false, の部分を選択して true にする
自分担当のアプリケーションのログではそうそう起きませんが、人から渡されたファイルを開いたら文字化けしてる、なんてことありますよね。文字コードどれだろ、これかな、ちがう、これかな、、という作業からおさらばです。
3. 言語モードの変更
Ctrl + k, m → 目当ての言語名を入力 → Enter
Ctrl + k を押したあと、 Ctrl を離してから m のみを押す、というやつです。ウィンドウの右下の、現在の言語モードをクリックすることでも変更が可能ですが、このショートカットキーで言語モード変更の入力ボックスを開くことができます。
VSCode は基本的にはファイルの拡張子を見て言語モードを判別して、その言語の単語や構文によって文字の色分けをしてくれますね。いわゆるログファイルの色分けも行ってくれて解析に非常に便利なのですが、うちのログファイルは拡張子が .log とは限らないのでこのショートカットキーからの変更を重用しています。
4. 文字列検索
table: ・
ファイル内検索 Ctrl + f
ファイル内検索結果の前後移動 F3 / Shift + F3
ワークスペース内検索（全体検索） Ctrl + Shift + f
ワークスペース内検索結果の前後移動 F4 / Shift + F4
grep のようなもの
ウィンドウ左の全体検索の結果の上の方に、「○個のファイルに△件の結果 - エディターで開く」という表示があるので、その「エディターで開く」を押すと検索結果がテキストの一覧で表示できます。その一覧の一行をダブルクリックすると検索結果の元ファイルのその行に飛ぶこともできます。
文字列の検索はテキストエディタの基本中の基本ですが、VSCode はここまでできるんだよ、という話です。F3とF4も有名かもしれませんが、あるとないとで大違いです。F3は普通のVisual Studio でも共通ですね。grep も、ログ解析した結果を共有する際は検索結果のリストをテキスト化できるのは重宝します。
5. 行の折返しのオンオフ
table:・
ウィンドウに収まらない行を折り返すかどうかの切り替え Alt + z
テキスト表示の設定で、長い行の表示をウィンドウ幅で折り返すか横のスクロールを可能にするか、というのは、どちらの流派が多いんですかね。
私は基本的にはスクロールせずにテキスト全文が見られるのが好きなので折返し派なのですが、ログ解析時は基本的に一行がタイムスタンプ一つ分のログとなるので、折り返されて行数が不規則になると見づらい場合もあります。
VSCode では Alt + z で一瞬で切り替えられるので、覚えておくと非常に便利です。
ちなみに追加の Tips ですが、横スクロールが可能なウィンドウで Shift を押しながらマウスのホイールを転がすと左右にスクロールできる、というのも結構便利ですよね。
6. タブの横移動
C:\Users\(ユーザー名)\AppData\Roaming\Code\User\keybindings.json に下記を追加
code:json
{
"key": "ctrl+tab",
"command": "-workbench.action.quickOpenNavigateNextInEditorPicker",
"when": "inEditorsPicker && inQuickOpen"
},
{
"key": "ctrl+tab",
"command": "-workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup"
},
{
"key": "ctrl+tab",
"command": "workbench.action.nextEditor"
},
{
"key": "ctrl+pagedown",
"command": "-workbench.action.nextEditor"
},
{
"key": "ctrl+shift+tab",
"command": "-workbench.action.quickOpenNavigatePreviousInEditorPicker",
"when": "inEditorsPicker && inQuickOpen"
},
{
"key": "ctrl+shift+tab",
"command": "-workbench.action.quickOpenLeastRecentlyUsedEditorInGroup"
},
{
"key": "ctrl+shift+tab",
"command": "workbench.action.previousEditor"
},
{
"key": "ctrl+pageup",
"command": "-workbench.action.previousEditor"
}
json ファイルがない場合は作ってください。
複数のログファイルをぱらぱらと行き来したいときに、頻繁にタブの移動を行います。
私はネットブラウザなどのタブは Ctrl + tab / Ctrl + Shift + tab で左右に移動しているのですが、VSCode （普通の Visual Studio も）では Ctrl + tab を押すとよくわかんないタブ移動用のウィンドウ？が出てきますよね。こちらもこちらで慣れれば便利なのかもしれませんが、横移動に慣れてる身からすると使いづらいです。VSCode ではこれをネットブラウザのような左右移動に変更することができます。
私は設定画面からひとつずつショートカットキーを変更してこの設定を作りましたが、keybindings.json ファイルをいじる方が手っ取り早いのでそちらで導入してみてください。
Visual Studio もタブ横移動に変えられたら嬉しいのですがやり方を知らないです、もし知ってる人いたら教えてほしいです…！
7. ファイルの比較
比較したいファイルを２つ開く
ウィンドウ左の一番上のエクスプローラーを開く
「開いているエディター」のツリーから比較したいファイル2つを Shift + クリックなどで複数選択
右クリック→選択項目の比較
Git 上では修正点の差分表示は馴染みがあると思いますが、VSCode では任意の２つのファイルの差分表示が可能です。
おわりに
VSCode は、こんなことできないかな～とか、他のエディタでできるあれはできないのかな～とかを検索すると、標準機能として実は入っていたり、そうでないものもプラグインで解決したりと、だいたい代替案がある印象なのでぜひ調べてみてください。他にもこんなのあるぞよ、というのがあったらぜひコメントで教えてもらえると嬉しいです。