この記事で解決すること

「VS Codeをインストールしたけど、メモ帳と何が違うの?」

そう思っている人向けに、最初にやるべき設定と覚えるべき操作を10個だけに絞りました。全部覚えなくていいです。使いながら少しずつ身につければOK。

VS Code(Visual Studio Code)は、Microsoftが作った無料のコードエディタです。プログラミングをする人のほとんどが使っています。

最初にやる設定(3つ)

1. 日本語化

VS Codeは初期状態だと英語です。

  1. Ctrl + Shift + X を押す(拡張機能の画面が開く)
  2. 検索欄に Japanese と入力
  3. 「Japanese Language Pack for Visual Studio Code」をインストール
  4. VS Codeを再起動

2. 自動保存をオンにする

ファイル → ユーザー設定 → 設定 を開いて、検索欄に auto save と入力。

「Files: Auto Save」を afterDelay に変更。

これで、編集するたびに自動で保存されます。保存し忘れて「変更が反映されない」と悩むことがなくなります。

3. テーマを変える(お好みで)

Ctrl + KCtrl + T でテーマ選択画面が開きます。

好きな見た目を選んでください。暗い画面(ダークテーマ)が目に優しくて人気です。

覚えるショートカット(7つ)

全部Windowsのキーです。Macの人は CtrlCmd に読み替えてください。

4. ファイルを開く: Ctrl + P

フォルダ内のファイルをファイル名で検索して開けます。マウスでフォルダを辿るより圧倒的に速い。

5. 全体検索: Ctrl + Shift + F

プロジェクト内の全ファイルからテキストを検索します。「この変数どこで使ってたっけ?」というときに使います。

6. 行の複製: Shift + Alt + ↓

カーソルがある行をそのまま下にコピーします。似たコードを何行も書くときに便利。

7. 行の移動: Alt + ↑ / Alt + ↓

カーソルがある行を上下に移動します。コードの順番を入れ替えたいときに、コピペより楽。

8. 複数カーソル: Alt + クリック

複数の場所に同時にカーソルを置いて、同時に編集できます。同じ変更を何箇所もするときに使います。

9. コメントアウト: Ctrl + /

選択した行をコメント(無効化)にします。もう一度押すと元に戻ります。

コメントアウトとは、コードを削除せずに一時的に無効にすることです。

10. ターミナルを開く: Ctrl + `

VS Codeの中でターミナル(コマンドプロンプト)を開けます。別ウィンドウを行き来しなくて済みます。

` はバッククォートと呼ばれるキーで、キーボード左上の 半角/全角 キーの隣にあります。

おすすめ拡張機能(入れておくと便利)

最初から全部入れる必要はないです。必要になったときに入れればOK。

拡張機能用途
Prettierコードを自動で整形してくれる
Live ServerHTMLファイルをブラウザでリアルタイムプレビュー
indent-rainbowインデント(字下げ)に色がついて見やすくなる

拡張機能は Ctrl + Shift + X で検索してインストールできます。

まとめと次のステップ

  • まず日本語化・自動保存・テーマの3つを設定
  • ショートカットは使うものから少しずつ覚える
  • 拡張機能は必要になったら入れる

全部一度に覚えようとしなくて大丈夫です。毎日コードを書いていれば、自然と手が覚えます。

関連リソース

プログラミングを始めたい方へ: