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

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

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

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

◆エディタ自体の操作

▼Alt

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

▼Ctrl + P

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

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

ファイル名を忘却したときはCtrl + Shift + Eでファイルエクスプローラーを召喚しろ。あるいは「Ctrl + Qポチポチ」でもエクスプローラーを開ける。

開いたファイルの名前がイタリックで表記されていたらプレビューモードだから、開きっぱなしにしたかったらCtrl + K からのEnterでプレビューモード解除しろ。

▼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 + @を押せばよい。

▼言語モード変更

重要。何も考えずJSONをコピってVS Codeに貼り付けても整形は効かない。任意のFormatter拡張機能を入れて、更に言語モードを変更してやらなきゃならん。現在の言語モードはウィンドウ右下で確認できる。JSONを成形する流れは以下の通り。

  1. JSONをクリップボードにコピー
  2. VS Codeを開いて「Ctrl + N」で新しいエディタを開く。
  3. 貼っつける
  4. Ctrl + K からの Mで言語モードを開く。
  5. 「json」と入力してJSONモードにする。

こうですね。でもいちいちショートカット覚えてらんないから「Ctrl + Shift + P」からの「lang」で「言語モードの変更」を開け。

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

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

知ってるだろ。

▼Home/End

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

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

▼Ctrl + L

行選択。行選択なんだけど、カーソルが次の行の行頭に飛ぶからHomeキーが押しづらいキーボード使ってる人は代わりにできよう。

▼Ctrl + 左右Arrow

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

▼Ctrl + Alt + 上下Arrow

上下にカーソルが伸びる。伸びるっていうのは、カーソルが増えるってことだ。これは…クッソつよい。

ひとつじゃなくてマルチにカーソルが配置されるので、「マルチカーソル」と呼ばれている。複数の位置にカーソルがある時に文字を打つとそりゃあ全部のカーソルで文字が入力される。すごい。

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

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

change-caseって拡張機能を入れると複数選択状態でsnake_caseやらPascalCaseやらcamelCaseやらを行き来することもできる!もうExcelとサクラエディタ立ち上げなくていいんじゃよ!

▼Ctrl + Shift + Alt + Arrow

Ctrl + Shift + Altをおしっぱにしながらアローキーを上下左右に押すことにより、テキストを矩形選択することができる。

▼Shift + Alt + I

選択している複数行について、末尾にカーソルを置く。
基本的にEndキーでなんとかなるけど、大量データを扱いたい時に使うだろう。

大量データを作る時は

  • 「Ctrl + G」で行番号使って行にジャンプ
  • 「Ctrl + Shift + End」で末尾まで全選択
  • vscode-input-sequence」拡張機能で連番を入力

を覚えておけばよかろう。

あと、「Shift + Click」で大量の行を選択したり。

▼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

インテリセンス

▼Ctrl + Shift + \

対応するカッコに飛ぶ

▼Ctrl + K からの Ctrl + C

コメントアウト。Ctrl + K からの Ctrl + U でアンコメント。

▼Ctrl + /

コメントアウト、アンコメント。

だとしたらCtrl K Cは別のショートカットに使えるな。や、逆にCtrl + /に違うショートカットを当てるって説もある。が、ほかの人のエディタとあんまり設定変えると混乱するからやりたくねぇなぁ。

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

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

◆VS Codeのカスタマイズ

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

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

俺が設定しているのは

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

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

◆Windowsのショートカット

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

▼アプリケーションの立ち上げかた

重要。Windowsキー押してアプリケーション名をタイプしてEnterするとそれが立ち上がる。そして、Visual Studio Codeやらにフォーカスしている状態でアプリケーションキーやらShift + F10やらを押下するとコンテキストメニューが開く。そこには最近使用したアレコレが表示される。

これを駆使出来ればタスクバーもデスクトップも汚れづらい。

▼Alt + Tab

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

▼Windowsキー + Arrowキー

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

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

▼Alt + F4

ウィンドウを閉じる。

▼Shift + F10

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

▼Windowsキー + L

画面ロック

▼Windowsキー + T

タスクバーにフォーカスできる。アローキーで移動し、アプリケーションキーでコンテキストメニューを開ける。Shift + F10で開けないのはバグだろうか。

「最近使ったワークスペース」にすぐアクセスしたい時に便利。

◆Chrome

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

▼Ctrl + L

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

▼Ctrl + T

新しいタブを開く。
Shiftを混ぜると「閉じたタブを開く」できる。

▼Ctrl + Enter

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

▼Ctrl + Shift + V

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

▼Alt + 左右Arrow

戻る/進む

▼拡張機能

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

◆おま〇け

▼insidersビルド

通を気取りたい人はinsidersビルドを使おう。これはつまりカナリアリリースとかPreview版と呼ばれるあれだ。

▼アウトライン

Ctrl + Shift + Eで開けるエクスプローラーは、下に「アウトライン」というメニューを持っている。これをエクスパンドすると、コード上の要素が一覧で表示される。使うたび脱糞するほど便利なので是非もなく使おう。

キーボードショートカットは設定されていないんで、Ctrl + Shift + Pでコマンドパレットを開いて「shortcut」とかタイプして設定を開いたら、「outline」と検索してfocusを好きなように登録しろ。俺は「Ctrl + NumPad_Decimal」に登録した。

▼WANTED

VS Codeの「ようこそ」画面で「最近」グループの「その他」ってやつをクリックすると、以前開いたワークスペースをコマンドパレットで選択することができる。あれ探しても見つからない。誰か教えて。

◆結論

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