こんにちは。クリーク・アンド・リバー社 COYOTE 3DCG STUDIO テクニカルチームの宮川です。
実は最近料理にハマっています。
いやー料理はちゃんとやろうとすると機材やら調味料やらに初期投資がかかるんですが、
一通り揃ってからは安上がりで美味しいし健康!
最高ですね。
今回はVisual Studio Code(以下VSCodeと呼称)について便利なTipsを紹介していこうと思います。
【初心者編】ということで、想定読者はVSCodeを初めて触る学生さんや新卒社員になります。
かなり基礎的かつVSCodeに限らないテキストエディター全般のTipsをご紹介します!
なおショートカットキーはすべてWindowsのものを載せています。
サンプルプロジェクト
今回Tipsをご紹介するにあたりサンプルプロジェクトとして「ComaCut」というツールを使います。
先日弊チームからBoothでリリースしたものになります。ご興味ある方はぜひご参照ください!
なお今回使用するものは、より実践的になるようにファイルを分割してあります。
もくじ
- カーソルを単語ごとに移動
- カーソルを行頭(行末)へ移動
- 行を移動
- 行を複製
- 文字単位で範囲選択
- ファイル全体から特定の文字列を検索
- ワークスペース全体から特定の文字列を検索(Grep検索)
- 定義へジャンプ
- リネーム
- 画面をズーム
カーソルを単語ごとに移動
概要
マウスカーソルを動かす際、マウスでクリックして移動していませんか?
それでも移動はできますが、もっと素早く確実に移動する方法があります。
やり方
Ctrl + ←(→)を押下することで、単語の先頭に移動できます

カーソルを行頭(行末)へ移動
概要
改行したいとき、マウスカーソルを行末に持っていきますよね。
マウスクリックしたり、単語ごとに移動してもいいのですが、もっと早く移動する方法があります。
やり方
Home(End)を押下すると行頭(行末)に移動できます

行を移動
概要
行を上下に移動したいとき、カット&ペーストを使えば移動できます。
ただもっと素早く行う方法があります。
やり方
Alt + ↓(↑)を押下すると行を移動できます

行を複製
概要
行を複製したいとき、コピー&ペーストを使えば複製できます。
ただもっと素早く行う方法があります。
やり方
Alt + Shift + ↓(↑)を押下すると行を複製できます

文字単位で範囲選択
概要
範囲選択する場合、ドラッグで選んでいませんか?
それでもよいですが、より精密な動作をしたい場合は文字単位での範囲選択ができます。
やり方
Shift + →(←)を押下すると文字単位で範囲選択ができます

単語ごとの移動(Ctrl + →(←))との組み合わせとして、
Ctrl + Shift + →(←)で単語単位で範囲選択することもできます。

ファイル全体から特定の文字列を検索
概要
ファイルの中から特定の文字列を探したいときがあると思います。
例えば「cmds.listConnections」を使っている箇所を確認したい!というときなど…。
そんなときに便利な方法があります。
やり方
1. Ctrl +Fを押下する(画面右上に検索窓が出てきます)
2. 検索窓に検索したい文字列を入力する
3. 検索窓の右にある↓や↑を押下して、ヒットした文字列を順にフォーカスしていく
※F3キー(順送り)とShiftキー+F3キー(逆送り)で↓や↑のショートカットができて、更に検索が便利

ワークスペース全体から特定の文字列を検索(Grep検索)
概要
例えば開発中にCSV書き出しの処理を少し変更したくなったとします。
ただその処理をどこのファイルに書いたかを覚えていません。
一つ一つファイルを開いて探していくのは骨が折れます。
ワークスペース全体から「CSV」という文字列で検索したいですよね。
やり方
1. 画面左端のSearchマーク(🔍️)を押下する
2. テキストボックスに検索したい文字列を入力する
3. テキストボックス下部に該当箇所がリストアップされる
4. 該当箇所を左クリックするとそのファイルのその行を直接開きます
特にこの検索方法はGrep検索と呼ばれます。

定義へジャンプ
概要
処理を書いている途中、過去に作った関数がどんな処理だったかを確認したいときがあると思います。
ただその関数名でGrep検索するのは少し面倒です。
そんなときは定義へジャンプが使えます。

やり方
Ctrlを押しながら、関数名を左クリックします。
なおこれは関数だけでなく、定義があるもの(クラスや変数など)ならどんなものでも使うことができます。

リネーム
概要
関数名や変数名、ファイル名をリネームしたいときがあると思います。
そのまま普通にリネームしてしまうと、参照箇所まで変更が反映されません。
参照箇所をすべて手作業でリネームしていくのは大変ですよね。
やり方
1. リネームしたい箇所をダブルクリックで選択する
2. F2を押下する
3. リネーム後の文字列を入力する
4. Enterを押下して確定する

画面をズーム
概要
文字が小さくて読み辛いことがあると思います。
ただデフォルト状態だとズームすることはできません。
Settingsから有効にすることで使えるようになります。
やり方
1. File → Preferences → Settingsを開く
2. 検索テキストボックスに「zoom」を打ち込む
3.「Editor: Mouse Wheel Zoom」のチェックボックスをオンにする
4. Ctrl + マウスホイールでズームができるようになる

さいごに
いかがでしたか?
最初は覚えるのがめんどくさくても、一度覚えてしまえば自然と手が動くようになり、日頃の開発効率を格段に上げることができます。
またVSCodeの便利なTipsは今回ご紹介したもの以外にもまだまだたくさんあります。ぜひ調べてみてください!
それでは!

