1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

脱マウス!キーボードでVS Codeを使いこなせ!(ショートカット編)

Posted at

opengraph-home.png

イントロ

どうもはじめまして。生物専攻でありながらウェブ開発やってる男です。(外人)

初投稿なので開発者なら誰にでも為になる話をします。みなさん、VS Codeを使うときは、ちゃんとキーボードだけで操縦してますか?コードを入力するキーボードから手を離してマウスに伸ばすだけで生産力は下がりますので、ここでキーボードだけでVS Codeをうまく使いこなせる豆知識をみんなに共有します!(ちなみに自分はマウス使ってます)

ショットカット篇

VS Codeでは多くの機能がそれぞれのキーバインドがついていて、キーボードだけでいろんな機能を使えます。Ctrl+CやCtrl+V以外にもCtrlとの組み合わせでいろんなことができます。

Ctrl + D ( Cmd + D )

まず紹介したいのはCtrl + Dとなります、下の例を見てみましょう。
image.png
もしこのようなコードでsomeStateとういう変数の名前を変更したい場合を一つずつではなく最初のsomeStateを選択して Ctrl + Dを押すとファイル中にある他の同じ文字列を一個ずつ選択できます。Ctrl + Shift + Lを使えば一気に全部選択できます!
src-1628252759786.gif
しかし上記のようにキャメルケースを使ってる場合は大文字を小文字にしてしまうときがあります、
image.png
そんなときは右上にあるボタンやAlt+Cで「大文字と小文字を区別する」を有効にすれば解決です!

Ctrl + ( Shift ) + ` ( Control + ( Shift ) + ` )

自分はVS Codeを使うときよくターミナルを使いますが、ターミナルが場所を取ってしまうのでコマンド入力し終わったらすぐ消します。
もう一回ターミナルを使いたい場合は表示設定で表示を有効するのではなくCtrl + `を押せばターミナルが出てきます!それにCtrl + ( Shift ) + `を押せば新しいターミナルを開くこともできます!
src-1628253337829.gif

Alt + / ( Option + / )

「二個目でもうすでに薄いな」と思ってる方もいると思いますが!単純によく使う順になってますので許してください。(泣)
次はこちらを見ましょう。
image.png
必要のときだけimport宣言を書くとこんなことになるのはよくありますね(私見)。きれいにするときついこうやってはいませんが?
src-1628253609574.gif
一回行を全部選択し、コピーして、置きたい行にペースト、結構手順かかりますね。こういつときはAlt + /が味方です!移動したい行にカーソルを置くだけで、Alt + /を押せば行が上や下に移動できます!
src-1628253807746.gif

Ctrl + / ( Option + / )

次はこちらを見てみましょう。
image.png
一見普通なコードですが、もし3行目最後の文字列を変更した場合カーソルキーで届くまでかなり時間がかかってしまいます。そこでマウスを使う方もたくさんいると思いますが、実はCtrl + / を使えば、カーソルをワードごとに移動することができます!
src-1628254291530.gif
さらに同時にShiftを押せばワードごとに選択することもできます!
src-1628254398615.gif

Ctrl + P ( Cmd + P )

プロジェクトスケールが大きくなればなるほどファイル数が増えて、エクスプローラーで開きたいファイルを探すのはかなり大変ですよね。
ここで紹介したいのはCtrl + Pです!
image.png
これでファイル検索ができて、すぐ欲しいファイルが開けます!めっちゃ楽です!(通販番組風)

万能Ctrl + Shift + P ( Cmd + Shift + P )

最初でも言ってましたが、VS Codeで多くの機能がショートカットキーで使える様になってますが、機能が多すぎて全部のショートカットを覚えるのは無理なんですよね(私見)。
ここで万能Ctrl + Shift + Pでコマンドパレットを使いましょう!
image.png
そこで使いたい機能を検索すればすぐ使えます!

最後

今回話したショートカットキーは個人的に結構使ってるものとなってますので、すでに使ってる方も多くいらしゃると思いますが、そもそもそういう機能があること知らない方もいらしゃると思いますので、に立てていれば幸いです。
次回はショートカットキー(2)か拡張機能について話す予定で、WSLを諦めた話もしようと思ってますので、是非宜しくお願いします。

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?