VSCodeの基本操作を覚えよう

VSCodeを使う上で最も基本となる、ファイルの操作方法を学びます。

Wordで新しい文書を作ったり、保存したりするのと同じような感覚で、プログラムのファイルも扱うことができます。

基本操作4つ

動画に沿って、以下の4つの基本操作を練習します。

• ファイルの作成・編集：新しいファイルを作り、文字を書き込む方法
• ファイルの保存：編集した内容を保存する方法
  • [Command] + [S]
• 単語の検索：開いているファイルの中から、特定の言葉を探す方法
  • [Command] + [F]
• ファイルの検索：プロジェクト全体から、目的のファイルを見つけ出す方法
  • [Command] + [P]

保存忘れに注意！

プログラミング初学者の方は「保存忘れ」をよくします。

VSCodeではファイル名の横にあるタブに注目してください。

• ⚫︎ (丸い点) が表示されている時は「まだ保存されていない（修正中）」のサインです。
• × (バツ印) になっていれば「保存完了」のサインです。

手順

1. VSCodeの tests ディレクトリ の上で右クリックして"新しいファイルを作成"を選択

左側のエクスプローラーでtestsフォルダを右クリックし、「新しいファイル」を選択します。

2. 1.で作成したファイルに test.txt と名前をつける

ファイル名として「test.txt」と入力してEnterキーを押します。

3. test.txt ファイルを開いて"hogehoge"と入力する

作成したtest.txtファイルに「hogehoge」と入力します。

4. [Command] + [S] を押して編集を保存できることを確認する

キーボードでCommand + S（Windowsの場合はCtrl + S）を押して保存します。 タブの⚫︎が×に変わることを確認しましょう。

5. tests/document-1/demo-test.spec.ts を開いて [Command] + [F] を押し、検索フォームに"Click"と入力して Click を使用してる箇所が検索できることを確認する

tests/document-1/demo-test.spec.tsを開き、Command + Fを押します。 検索ボックスに「Click」と入力して、該当箇所がハイライトされることを確認します。

6. [Command] + [P] を押して検索フォームに tests/document-2/lesson-01.spec.ts と入力した際に、ファイルが検索されることを確認する

Command + Pを押して、検索ボックスに「tests/document-2/lesson-01.spec.ts」と入力します。 該当ファイルが候補に表示されることを確認します。

次のステップ

次のレッスンでは、ターミナル操作の基礎を学びます。