みんな~。今日も元気にVS Code使っとるかな?ワシは使っとるよ。

VS Codeはショートカットキー(ホットキー)を駆使するとイイ感じにカッコいいアレが感じるの気がしてるです。
だから教えてやるよ。無料でな!

俺が良く使うものだけ紹介するから、俺の知らない便利機能は出てこない。「これ便利あるよ」ってのがあったら教えていただきたい。

あと、伴ってWindowsやChromeの操作のはなしもする。キーボードから手を離さずに作業しよう。

◆エディタ自体の操作

▼Alt

分かってると思うけど、ツールバーにアクセスできる。単純かつ強力だけど意外と忘れがち。

▼Ctrl + P

ほんとこれ。キーボードから手を放す時間を極力減らしたい人はこれ。

Ctrl + Pを入力することによりコマンドパレットが開く。そこにファイル名を入力し、選んでEnterを押せ。開くから。離脱はEscapeキー。

ファイル名を忘却したときはCtrl + Shift + Eでファイルエクスプローラーを召喚しろ。

▼Ctrl + Shift + P

さっきの「コマンドパレット」に「>」が入力された状態で開かれる。でね?たとえば「>case」と入力すると「小文字に変換」とか「大文字に変換」とか表示されますね?そいつにフォーカスしてEnterを押せば、選択範囲の英字が大文字小文字変換されるんですね!すごいですね!拙者興奮してきました!

これは後で紹介する「矩形選択」と一緒に使えばえらいことになる。

また、拡張機能を呼び出すときも主にCtrl + Shift + Pからですね。「>git」と入力すればGitのコマンドも大体使える。クッソ便利。

あと、エラー行にホバーするとその原因が表示されるじゃん?それはCtrl + KからのCtrl + Iで表示できるらしいんだが、なぜか効かないからコマンドパレットで「>hover」と入力して表示をしている。

▼Ctrl + B

これ。ほんとこれ。これすぎる。

サイドバーの開閉をすることが出来る。

▼Ctrl + PageUpDown

タブからタブへ移動できる。Ctrl + Shift + PageUpDownでタブを掴んで移動させることもできる。タブを閉じるときはCtrl + W。

▼Ctrl + \

これだ!(驚愕)

エディタを左右に分割することが出来る。一つの長いファイルは左右に開いて編集すると便利だね。
ただ、こいつを使いこなすためにはCtrl + Alt + 左右Arrowを知らなければならない。Ctrl + Altを押しながら左右キーを押すと、開いているタブを分割域(?)に移動させることが出来る。

▼Ctrl + 1

エディタが分割されているとき、最初の分割に移動する。Ctrl + 2で二個目の分割に移動する。

▼Ctrl + @

ターミナルさんを開く。フロントエンド開発だと超重要ですね。
node_modulesを葬るコマンドは「rm -r node_modules」です。

Ctrl + Shift + @で新しいターミナルさんを召喚することも可能。

◆テキストエディタの操作

▼Ctrl + CとかCtrl + VとかCtrl + XとかCtrl +AとかCtrl + ZとかCtrl + YとかCtrl + Sとか

知ってるだろ。

▼Home/End

行頭、行末にカーソルを移動させることが出来る。強力。でもみんな忘れがち。
Shiftを一緒に押すとテキストの選択をすることができる。

つまり、Home ⇒ Shift + Endで行頭から行末まで選択することが出来る。

▼Ctrl + 左右Arrow

カーソルを単語単位で動かすことが出来る。こいつもShiftを一緒に押すとテキストの選択をすることができる。

▼Ctrl + Shift + Alt + Arrow

Ctrl + Shift + Altをおしっぱにしながらアローキーを上下左右に押すことにより、テキストを矩形選択することができる。クッソつよい。先頭に文字を足すとか応用がいくらでも効く。

ひとつじゃなくてマルチにカーソルが配置されるので、「マルチカーソル」と呼ばれている。複数の位置にカーソルがある時に文字を打つとそりゃあ全部のカーソルで文字が入力される。すごい。上下にカーソルを伸ばしたいだけならCtrl + Altだけでいいよ。

Escapeキーでマルチカーソルモードから離脱できる。

マルチカーソル中にEndキーを押すと、複数行の行末にまとめてカーソルを当てることができる。また、その状態からCtrl + 左右Arrowもできる。ヤバすぎ。

▼Alt + Click

ポチポチとクリックすると、クリックした位置にカーソルが置かれる。複数置くことができる。メニューバーの「選択」から「マルチカーソルを~切り替える」を見つけてクリックすると、Ctrl + Clickで同じことが出来るようになる。

▼テキスト選択しながらCtrl + D

選択している文字列と同じ文字列を次々とマルチカーソル状態で選択していく。選択された状態で文字を打つと当然ながら置き換えられる。

▼Shift + Alt + 上下Arrow

行を上下にコピーできる。Alt + 上下Arrowで、行を掴んで移動できる。

複数行でもコピれる。移動できる。すごい。

▼Ctrl + F

大体わかってるだろうけど・・・テキスト検索ですね。

テキスト置換はCtrl + H。Ctrl + Hをもう一回押すと、置換後テキストの入力にフォーカスできる。Tabキーでもカーソル移動できるね。

Alt + Rで正規表現(Regex)モードで、Ctrl + Alt + Enterで全置換え。

Escapeで終了するとハイライトが消えちゃうから、Ctrl + 1とかCtrl + 2でエディターにフォーカスを移せ。

GrepはCtrl + Shift + Fです。

▼Shift + Alt + F

テキスト整形。利用頻度と比較してクソ押しづらい。

「あんたはん、保存時に自動整形しておくれやす」って京都人はコマンドパレットで「>setting」と入力して「基本設定:ユーザー設定を開く」を選択したら基本設定が開くから、「format on save」と入力しなさい。そしてTabキーをガチャガチャ押して「Editor: Format On Save」のチェックボックスにフォーカスしてEnterキーを押しちゃいなよ。そしてCtrl + Wでタブを閉じちゃいなよ。俺が許可するよ。

▼F12

変数やらを定義している場所に飛ぶ。Alt + Clickでもいけるよ。

Alt + F12で、定義を子ウィンドウに表示することが出来る。便利。そこからShift +Tabを押すと子ウィンドウ内で操作ができるよ。終わったらEscapeで離脱。

▼Ctrl + Space

インテリセンス

▼(全角入力モード中)Shift + Space

これはIMEの機能だと思われるが、Shiftを押すと全角モードでも半角スペースを入力することが出来る。

◆VS Codeのカスタマイズ

VS Codeのショートカットをカスタマイズした。

Ctrl + Shift + Pでアレを開いて「shortcut」とか入力して「キーボード ショートカットを開く」を選択していい感じにしろ。

俺が設定しているのは

  • Ctrl + numpad0でテキスト整形
  • Ctrl + numpad1で最初の分割に移動
  • Ctrl + numpad2で二個目の分割に移動

だ。numpadはテンキーのことです。あるとやっぱり便利。

◆Windowsのショートカット

Escapeキーは大体なんでもキャンセルできる。
Tabキーは大体フォーカスを移動できる。Shift + Tabでフォーカスを逆順に移動できる。

▼Alt + Tab

クッソ重要。作業アプリケーションを変える。

▼Windowsキー + Arrowキー

画面を最大化したり最小化したり左半分に開いたり右半分に開いたり。 

デュアルモニタでウィンドウを移動させたい時もコイツ。

▼Alt + F4

ウィンドウを閉じる。

▼Shift + F10

コンテキストメニューを開く。つまり右クリック的な。

▼Windowsキー + L

画面ロック

◆Chrome

タブ操作はVS Codeと操作が若干似ているんで、試せ。

▼Ctrl + L

アドレスバーへのショートカット

▼Ctrl + T

新しいタブを開く

▼Ctrl + Enter

リンクを新しいタブで開く

▼Ctrl + Shift + V

プレーンテキスト貼り付け

▼Alt + 左右Arrow

戻る/進む

▼拡張機能

デフォルトでは、Googleの検索結果を開くのにTabキーをガシュガシュ連打しなければならない。Google検索キーボードショートカットを入れろ。

◆結論

マウスに触れる時間を減らそう。