イントロ
どうもはじめまして。生物専攻でありながらウェブ開発やってる男です。(外人)
初投稿なので開発者なら誰にでも為になる話をします。みなさん、VS Codeを使うときは、ちゃんとキーボードだけで操縦してますか?コードを入力するキーボードから手を離してマウスに伸ばすだけで生産力は下がりますので、ここでキーボードだけでVS Codeをうまく使いこなせる豆知識をみんなに共有します!(ちなみに自分はマウス使ってます)
ショットカット篇
VS Codeでは多くの機能がそれぞれのキーバインドがついていて、キーボードだけでいろんな機能を使えます。Ctrl+CやCtrl+V以外にもCtrlとの組み合わせでいろんなことができます。
Ctrl + D ( Cmd + D )
まず紹介したいのはCtrl + Dとなります、下の例を見てみましょう。
もしこのようなコードでsomeState
とういう変数の名前を変更したい場合を一つずつではなく最初のsomeStateを選択して Ctrl + Dを押すとファイル中にある他の同じ文字列を一個ずつ選択できます。Ctrl + Shift + Lを使えば一気に全部選択できます!
しかし上記のようにキャメルケースを使ってる場合は大文字を小文字にしてしまうときがあります、
そんなときは右上にあるボタンやAlt+Cで「大文字と小文字を区別する」を有効にすれば解決です!
Ctrl + ( Shift ) + ` ( Control + ( Shift ) + ` )
自分はVS Codeを使うときよくターミナルを使いますが、ターミナルが場所を取ってしまうのでコマンド入力し終わったらすぐ消します。
もう一回ターミナルを使いたい場合は表示設定で表示を有効するのではなくCtrl + `を押せばターミナルが出てきます!それにCtrl + ( Shift ) + `を押せば新しいターミナルを開くこともできます!
Alt + ↑/↓ ( Option + ↑/↓ )
「二個目でもうすでに薄いな」と思ってる方もいると思いますが!単純によく使う順になってますので許してください。(泣)
次はこちらを見ましょう。
必要のときだけimport宣言を書くとこんなことになるのはよくありますね(私見)。きれいにするときついこうやってはいませんが?
一回行を全部選択し、コピーして、置きたい行にペースト、結構手順かかりますね。こういつときはAlt + ↑/↓が味方です!移動したい行にカーソルを置くだけで、Alt + ↑/↓を押せば行が上や下に移動できます!
Ctrl + ← / → ( Option + ← / → )
次はこちらを見てみましょう。
一見普通なコードですが、もし3行目最後の文字列を変更した場合カーソルキーで届くまでかなり時間がかかってしまいます。そこでマウスを使う方もたくさんいると思いますが、実はCtrl + ← / → を使えば、カーソルをワードごとに移動することができます!
さらに同時にShiftを押せばワードごとに選択することもできます!
Ctrl + P ( Cmd + P )
プロジェクトスケールが大きくなればなるほどファイル数が増えて、エクスプローラーで開きたいファイルを探すのはかなり大変ですよね。
ここで紹介したいのはCtrl + Pです!
これでファイル検索ができて、すぐ欲しいファイルが開けます!めっちゃ楽です!(通販番組風)
万能Ctrl + Shift + P ( Cmd + Shift + P )
最初でも言ってましたが、VS Codeで多くの機能がショートカットキーで使える様になってますが、機能が多すぎて全部のショートカットを覚えるのは無理なんですよね(私見)。
ここで万能Ctrl + Shift + Pでコマンドパレットを使いましょう!
そこで使いたい機能を検索すればすぐ使えます!
最後
今回話したショートカットキーは個人的に結構使ってるものとなってますので、すでに使ってる方も多くいらしゃると思いますが、そもそもそういう機能があること知らない方もいらしゃると思いますので、に立てていれば幸いです。
次回はショートカットキー(2)か拡張機能について話す予定で、WSLを諦めた話もしようと思ってますので、是非宜しくお願いします。