開発をする際にファイルや文字の検索,コーディングの様々なミニ機能をキーボードショートカットやコマンドでできると便利ですよね?本記事ではVSCodeやJetBrainsで使うことのできるキーボードショートカットやコマンドの例を記載する.
react,next.jsでコンポーネントベースのアーキテクチャを使用する際の工夫点やコンポーネントの探し方は以下の記事から
ファイル操作をコマンドで行いたい場合は以下の記事に記載されている
全体検索
VSCodeの全体検索機能を使用すると,プロジェクト全体のファイルから特定の文字列を検索できる.これにより,コンポーネント名や特定のプロパティ,メソッドなどを素早く見つけることができる.
コマンド
Cmd+Shift+F または Ctrl+Shift+F
使用方法
- コマンドを入力して全体検索ウィンドウを開く
- 検索したいキーワードを入力
- 結果一覧から該当ファイルと行を選択
定義へジャンプ
定義へジャンプ機能を使用すると,特定の変数や関数,コンポーネントの定義元にすぐに移動できる.コードの追跡やリファクタリングに非常に便利である.
コマンド
Ctrl+ClickまたはCmd+Click
使用方法
- コード内で対象のシンボルを選択
- F12キーを押すか,Cmdキーを押しながらクリック
- 定義元の場所にジャンプ
シンボル検索
シンボル検索機能を使用すると,プロジェクト内の関数やクラス,変数などのシンボルを素早く見つけることができる.
コマンド
Cmd+T または Ctrl+T
使用方法
- コマンドを入力してシンボル検索ウィンドウを開く
- 検索したいシンボル名を入力
- 結果一覧から該当シンボルを選択
ファイル内検索
ファイル内検索機能を使用すると,現在開いているファイル内で特定の文字列を検索できる.短期間で特定の場所を見つけるのに便利である.
コマンド
Cmd+F または Ctrl+F
使用方法
- コマンドを入力してファイル内検索ウィンドウを開く
- 検索したいキーワードを入力
- 結果一覧から該当箇所を選択
ディレクトリの構造からファイルを特定する
コマンドラインからディレクトリの構造を表示し,ファイルを特定することもできる.以下のようにfindやgrepコマンドを使用すると便利である.
ファイルを検索する
find . -name "ファイル名"
特定の文字列を含むファイルを検索する
grep -r "検索したい文字列" .
ファイルのパスを表示する方法
VSCodeでは,コマンドパレットを使用してファイルのパスを表示することができる.またはファイル名を左クリックしてパスのコピー
を選択するとパスをコピーできる.
コマンド
Cmd+Shift+P または Ctrl+Shift+P
使用方法
- コマンドを入力してコマンドパレットを開く
- 「Copy Path」と入力
- 選択してファイルのパスをコピーを表示
コマンドラインから特定のファイルのパスを表示するには,pwdやrealpathコマンドを使用する.
現在のディレクトリのパスを表示する
pwd
特定のファイルの絶対パスを表示する
realpath ファイル名
マルチカーソル編集
コマンド
Cmd + Option + ↑/↓またはCtrl + Alt + ↑/↓
使用方法
- コマンドを入力し複数行を選択する
- 文字を入力する
複数行を同時に編集できる。
行の複製
コマンド
Shift + Option + ↓または Shift + Alt + ↓
現在の行を下に複製する。
コメントアウト/解除
コマンド
**Cmd + /**または Ctrl + /
選択した行をコメントアウトまたは解除する。
ファイル間の移動
Ctrl + Tab
WindowsもMacもLinuxもCtrl
キーなので注意(Cmdではない)
開いているファイル間を移動する。
エラーや警告へのジャンプ
コマンド
F8
エラーや警告にジャンプできる.