VS Code 拡張機能でログ出力環境をよくしてみた

Transcript

1. NCDC株式会社 VS Code 拡張機能でログ出力環境をよくしてみた
2. 自己紹介 2 中原 • NCDC株式会社 o エンジニア ▪ Nextjs、Flutter • プレイベート o ４歳児のパパ o 休日 ▪ 買い物や子供と公園に行く
3. 3 目次 1. Log File Highlighter 2. Turbo Console Log 3. まとめ
4. 4 ログファイル、なんか見ずらいな〜 文字ばっかりで正直、どこ見てるか分かんなくな るんだよな… そんな悩みを Log File Highlighter がまるっと解決！ こ の拡張機能を導入することにより、ログファイルの表示 に色をついて見やすくなります
5. 5 Log File Highlighter Log File Highlighterとは • ログファイルの可読性を向上させるための拡張機能。 • ログファイル内の情報を色分けして表示することができる。 できること • 異なるログレベル（ERROR、WARNING、INFOなど）を色分けで表示 • パターンのカスタマイズ: 自分のプロジェクトに合わせてハイライトパターンをカスタマイズ可能 • 複数ファイル形式対応: .log、.txt、その他のカスタムファイル拡張子に対応 • 日付・時刻のハイライト: タイムスタンプを自動的に認識してハイライト
6. 6 導入方法 1. VS Codeを開く 2. 左側のアクティビティバーから拡張機能アイコンをクリック 3. 検索ボックスに「Log File Highlighter」と入力 4. 検索結果から「Log File Highlighter」を見つけて「インストール」ボタンをクリック
7. 7 ログファイルの出力
8. 8 設定その１
9. 9 設定その２
10. 10 ログファイルの表示 設定無しの表示 設定ありの表示
11. 11 値を確かめたいけど、いちいちconsole.log書くの面倒だな〜 Console.logを消し忘れちゃうな そんな悩みを Turbo Console Log がまるっと解決！ この拡張機能を導入することにより、面倒なログ入力や管理 が楽になります
12. 12 Turbo Console Log Turbo Console Logとは • JavaScriptやTypeScriptなど、開発中にconsole.logを使った変数や処理内容の確認（デ バッグ）を効率化するための拡張機能。 できること 1. console.log文の素早い挿入 2. console.log文の一括コメントアウト 3. console.log文の一括削除
13. 13 導入方法 1. VS Codeを開く 2. 左側のアクティビティバーから拡張機能アイコンをクリック 3. 検索ボックスに「Turbo Console Log」と入力 4. 検索結果から「Turbo Console Log」を見つけて「インストール」ボタンをクリック
14. 14 設定 1. VS Codeのsettings.jsonを開く 2. 上記の設定を追加 ※ 特に設定を追加していなくても動作するのでお好みで設定してください
15. 15 使用方法（Macの場合） その他のショートカット console.logを一括コメントアウト ・Shift + Option + C console.logを一括削除 ・Shift + Option + D 1.出力したい変数（例: sum）にカーソルを 合わせる 2.ショートカットコマンドを入力 ・Ctr + Option + L console.log を追加方法 注意点 これらのショートカットは、特定のVSCode拡張機能に よって追加された console.log に対してのみ有効です。
16. 16 まとめ • Log File Highlighter o ログファイルを見やすく色分けし、重要な情報を素早く確認できる • Turbo Console Log o コマンド一つでconsole.logの挿入、一括コメントアウト、 削除ができ開発時のログ管理を効率化できる
17. 17 ご清聴ありがとうございました