プログラミング

【VSCode】実務ベースのショートカットキーを覚えて効率よくコーディングする

更新日:

こんにちはカレイドです

 

初心者の方でVSCODEを選択する人最近は増えてきていますね!

 

私もVSCodeから入ったのですが、調べるとショートカット全部並べられて覚えられねーよとなりました。

そして、VScodeのctrl+cはもう少し便利になっていることとか、そのあたりコマンドをどう使っていくかの説明が書いてある記事は見当たらなかったので今回書かせていただきました。

 

それでは早速全体のコマンドからみていきましょう

 

実際に使うコマンド表

以下が実際に使うコマンドの表です。

順番に解説していくのでざっくりでも目を通しておきましょう。

 

Windowsキー Macキー 動作
ctrl+c cmd+c カーソルの行をそのままコピー
ctrl+x cmd+x カーソルの行をそのまま切り取り
ctrl+d cmd+d ファイル内の次の要素(マッチ部分)を選択状態に
alt+↑ or ↓ option+↑ or ↓ カーソル行、選択行を上下に移動
alt+shift+↑ or ↓ option+shift+↑ or ↓ カーソル行、選択行を上下にコピペ
ctrl+f cmd+f ファイル内の検索
ctrl+p cmd+p プロジェクト内のファイル名検索
ctrl+Shift+K cmd+shift+k カーソル行、選択行の削除
ctrl+enter cmd+enter カーソル行の下に空白行を挿入
ctrl+click (F12) cmd+Click(F12) 選択単語や関数の定義へジャンプ
alt+click option+Click 複数カーソルの出現

プロジェクト内単語検索

 

最後のプロジェクト内単語検索は実務で本当によく使うのでショートカットとは別に覚えておいておいた方がいいのでご紹介します。

 

ダブルクリック

実はダブルクリックはVSCODEのそもそもの機能ではないですが、複数回繰り返すことによって選択範囲が変わります

知っている人が大半だと思いますが本当の初心者だと結構知らない人もいるので紹介しておきます。

 

タブルクリックで選択範囲が広がります。なので単語消したいとかいうときは便利ですね。

 

Ctrl+C (Cmd+C)

おなじみコマンドに見えて普通に使うCtrl+Cより実はちょっと使い勝手いいんです。

カーソルがコピーしたい行にあればそのままコマンド叩けば1列丸ごとコピペできるんですよね。

 

わざわざ範囲コピぺしているひとはこれだけで負担が減るので使ってみてください!

 

Ctrl+X (Cmd+X)

 

同じように行ごと切り取りできるので知らなかった人はこれを気に使いこなしましょう。

日常茶飯事レベルで使う必須コマンドです。

 

Ctrl+Shift+K (Cmd+Shift+K)

その行、または範囲を削除します

わざわざバックスペース押して消している人いませんか?

複数行消すときはシフト上下で適当に消したい行にラインを引いてctrl+kで綺麗に行を消せます。

同様に今日からでも使える必須コマンドになります。

Ctrl+Enter (Cmd+Enter)

超必須コマンドラストは ctrl+enter

カーソル行の一つ下の行に空白行を差し込みます

これもいちいち普通にenterを押すと割り込まれてしまうので行の終わりまで行っている人いませんか?

今日から一発なので必須レベルで使いましょう。

Ctrl+D (Cmd+D)

何か簡単なアプリを作り始めるとすぐに使うコマンド ctrl+dです。

特定の単語だったり文字列を次々に選択できます。まとめて変更したい時は便利ですね。

変数一括で変更出来ますので、少し勉強し始めたら割とたくさん出てくることになると思います。

 

Alt+↑ or ↓ (Option+↑ or ↓)

 

これはカーソル行を1行、または複数行上下に入れ替えられます

切り取ってはりつけでもいいですがこちらの方が便利です。

 

おまけにその移動したい行がハイライトされていればいいので全部選択してある必要はないです。

gifみてもらえれば感覚つかめると思います。

Alt+Shift+↑ or ↓ (Option+Shift+↑ or ↓)

 

その行または範囲をそのまま上か下にコピぺします

業務だと似たような構造を作るときとかに一旦範囲でコピペしてちょこちょこ直すって感じで使うことが多いです、

 

Ctrl+F (Cmd+F)

 

そのファイル内で文字列の検索ができます

ctrl+dと若干似ていますが部分ごとの修正も可能になります。

置換も選択すればその部分を修正することも可能ですね。

 

プロジェクト全体検索窓

左画面の虫眼鏡はこれの強化版です。

プロジェクト内で使われているその単語を全て検索してくれます。

例えば、デプロイ時にconsole.logのような

コンソールへ出力する類のものもここで検索すれば漏れなくチェックして消せます。

 

私なんかは特に、業務では大きなプロジェクトを扱うので、意図しない単語とかをエラーに吐かれたりするわけですね。

そのときにその単語が入っている入るをとりあえず見つけるために虫眼鏡をつかったりしてあるかどうかチェックしたりします。

 

規模が小さいうちはそこまで使うことはないかもしれません、ちょっとしたアプリでもぜひ使ってみてください

Ctrl+P (Cmd+P)

こちらは先ほどの虫眼鏡と違ってファイル名を検索してジャンプするものになります。

さっきのはファイルの中にある単語を探すもの。

こっちはプロジェクト内にあるファイル名を検索するものです。

 

初心者のうちでも割とどんどん使っていくコマンドだと思いますのでガンガン使いましょう。

プロジェクト自体が大きくなると目的のファイルへ到達するだけで疲弊するようになります。

そこでこのコマンド使えば本当に一瞬なのでないと死にます。

Ctrl+Click (Cmd+Click)

 

これは特定の関数や定数の元の定義へ飛んでくれます

これも自分で作った関数が違うファイルなどで保存されている場合そこへ行かずともこのコマンドですスキップ可能です。

 

これも実際の現場で過去の先輩が作った関数とかを探しにいく時に重宝します。

同様にないと死にます。

 

でも冗談はおいておいて、割と関数の中身修正したいって時にすぐ飛べるのでめちゃくちゃ便利です。

とにかくファイル数が増えると移動だけであああああああああってなってくるのでこの辺のコマンドは必須です。

 

 

 

Alt+Click (Option+Click)

alt clickで複数の単語にカーソルを持ってこれます

ctrl+Dは被っている単語名を全部ハイライトしていくため、若干使いづらい時などがあります。

あとは、似ているとこまとめていっぺんにやってしまいたいときとかに便利ですね。

 

今までのコマンドと比べると若干頻度は下がるので後回しでもいいと思います!

 

まとめ

 

いかがでしたでしょうか。

実務ベースで使っているものに絞って、具体的な説明をいれた記事はなかったのでなかなか満足にいくものになっています。

ただ、どうしても私自身完璧ではないので抜け落ちているコマンドや、他にも使いこなした方がいいコマンドが絶対にあると思います。

 

ぜひこの記事を読んで、他にも便利だよって言うのがあったら教えていただけると幸いです。DMのコメントでもこちらにコメントでも大丈夫です。

 

 

  • この記事を書いた人
  • 最新記事

カレイド

1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。 4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。

-プログラミング

Copyright © カレイドブログ, 2019~2020 All Rights Reserved