【初心者向け】VSCodeを使い始めたら最初に覚えておきたいショートカット １０選（Mac）

# １．はじめに
はじめまして、未経験からエンジニア転職を目指しているごんです。

VSCodeを使い始めて、約２ヶ月が経ちました。
この２ヶ月の間に、
**「こんなショートカットがあったのか！」**

**「もっと早く知りたかった(T_T)」**

って思うことがあったので、
**<font color = green>「VSCodeを使い始めたけど、ショートカット何から覚えようかな？」</font>**
って人は、ここで紹介するショートカットから覚えていけば楽になるんじゃないかなと思います！

それでは最低限覚えておきたいショートカット（Mac版）を１０個ご紹介していきます。
![undraw_Programming_re_kg9v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117662/562d77e7-a5e2-f3fe-3dbc-abf67ff0b246.png)



# ２.ショートカット　１０選 
| キー           | 動作                             |◎ポイント                                   |
| -------------- | -------------------------------- | -------------------------------------- |
| [⌘]+[X]        | 行の切り取り                     | 未選択状態の行全体を切り取り           |
| [⌘]+[C]        | 行のコピー                       | 未選択状態の行全体をコピー             |
| [⇧]+[⌥]+[↓] | カーソル行を下にコピー           | 複数行を選択中はその行数分             |
| [⌥]+[↓] | カーソル行を下に移動           | 複数行を選択中はその行数分             |
| [⌘]+[⇧]+[K]    | カーソル行を削除                 | 行全体を削除(複数行を選択中は全ての行) |
| [⌘]+[↩︎]       | 現在のカーソル行の下に空行を追加 | カーソルは行頭に移動する               |
| [⌘]+[']']      | カーソル行のインデントを追加                   | 複数行を選択中はその行数分                        |
| [⌘]+['[']      |カーソル行のインデントを削除               |  複数行を選択中はその行数分                        |
| [⌘]+[F]      | 検索ウィンドの表示               |                                        |
| [⌘]+[S]      | ファイルを保存               |                                        |
# （１） ⌘Command ＋ 「X」
行の切り取りをしてくれます。
ポイントはいちいち行を全て選択しなくても、
**<font color = red>カーソルさえ切り取りしたい行に合わせておけば</font>**、行全体を切り取ってくれます。

# （２） ⌘Command ＋ 「C」
行のコピーをしてくれます。
こちらもポイントはいちいち行を全て選択しなくても、
**<font color = red>カーソルさえコピーしたい行に合わせておけば</font>**、行全体をコピーしてくれます。

# （３） ⇧ Shift ＋ ⌥ Option ＋ 「↓」
カーソル行を下にコピーをしてくれます。
「行全体をコピー」⇒「改行」⇒「貼り付け」をこのショートカットで一発でしてくれるのでとても便利です。
一行のみでなく、**<font color = red>複数行を選択するとその行数分コピー**してくれますのでよく使用しています。
また、「↓」の代わりに「↑」を入力すると上にコピーしてくれるので併せて覚えておきたいですね。

# （４） ⌥ Option ＋ 「↓」
カーソル行を下に移動してくれます。
「行全体を切り取り」⇒「貼り付け」をこのショートカットでしてくれるので便利です。
一行のみでなく、**<font color = red>複数行を選択するとその行数分移動**してくれますのでよく使用しています。
また、こちらも「↓」の代わりに「↑」を入力すると上に移動してくれるのでついでに覚えておきましょう。

# （５） ⌥ Option ＋ ⇧ Shift ＋「K」
カーソル行を削除してくれます。
**<font color = red>カーソルがどの位置にいても</font>**、その行を削除してくれるので方向キーを押す手間が省けて助かっています。
僕がもっと早く知りたかったショートカットの一つですね。

# （６） ⌘Command ＋ ↩︎ Enter
現在のカーソル行の下に空行を追加してくれます。
**<font color = red>カーソルがどの位置にいても</font>**、追加してくれるのでコードを一行追加しないといけないってときに助かっています。
また、カーソルが追加した空行に移動しているので、そのままコードが書きやすくなっていますよ。

# （７） ⌘Command ＋ 「' ] '」
カーソル行のインデントを追加してくれます。
一行のみでなく、**<font color = red>複数行を選択するとその行数分インデントを追加**してくれますので、インデントを揃える際に使用しています。
コードを見やすくする際に活躍してくれるショートカットです。

# （８） ⌘Command ＋ 「' [ '」
カーソル行のインデントを削除してくれます。
一行のみでなく、**<font color = red>複数行を選択するとその行数分インデントを削除**してくれますので、インデントを揃える際に使用しています。


# （９） ⌘Command ＋ 「F」
検索ウィンドを表示してくれて、そのまま検索文字が入力できるようにカーソルが検索ウィンドに移動してくれてます。
探したい文字を大量のコードから目視で確認するより、検索機能だと一瞬ですもんね。

# （10） ⌘Command ＋ 「S」
こちらはご存じの方も多いと思いますが、ファイルを保存してくれます。

:::note warn
ここからは余談になるのですが、私はファイル保存のショートカットキーはほとんど使用しておりません。
というのも、VSCodeには自動保存の設定があるからです。
こちらのVSCodeの**設定画面の【Auto Save】** より<font color = red>「afterDelay」</font>を選択すると編集の1秒後に自動保存される設定になります。

Webサービス等を作成する際にブラウザで細かい挙動を確認したいときは、いちいちファイル保存をしてブラウザをチェックの繰り返しでしたが、自動保存のおかげでファイル保存の手間が省け効率的になったので、臨機応変に自動保存の機能も使いこなしていきたいですね。

![スクリーンショット 2023-03-12 19.32.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117662/5ae6340e-09e3-1965-cd2d-92b674c8190b.png)
:::

# ３.最後に
最低限、これだけは覚えておきたいショートカットを１０個紹介してきました。
ショートカットを使いこなして、効率的にコードを書いていきたいですね。

あと、ショートカットを当たり前のように使いこなしている人ってめっちゃカッコいい！！
私もそうなれるように日々ショートカットを使って慣れていきたいと思います(^^)
最後まで見ていただき、ありがとうございました(^O^)


# ４.参考記事
VSCodeのショートカットを調べる際に、こちらの記事より学ばさせていただきました。
ありがとうございました。
[カンニング万歳!逆引きVS Codeチートシート](https://qiita.com/4_mio_11/items/e304809b10c400fba407)