今回やること
この記事では、VS Codeの画面を「どこで何をする場所か」に分けて確認します。
初心者は、ショートカットを大量に覚えるより、まず画面の役割を理解することが重要です。
Step 1: Explorerでファイルを見る
左側のExplorerは、開いているフォルダの中身を見る場所です。
確認すること:
- フォルダ名が表示されている
- ファイルをクリックすると開ける
- 右クリックで新規ファイルやフォルダを作れる
練習として、次の構成を作ります。
practice/
index.html
styles.css
main.js
Step 2: Editorでファイルを編集する
中央の大きな領域がEditorです。ここでコードを書きます。
index.html に次を書きます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<h1>VS Codeの練習</h1>
</body>
</html>
保存してからブラウザで開き、見出しが表示されるか確認します。
Step 3: Searchで全体検索する
Cmd/Ctrl + Shift + F でファイル横断検索を開きます。
検索欄に VS Code と入力すると、プロジェクト内のどのファイルに含まれるか確認できます。
コードが増えると、検索は非常に重要になります。
Step 4: Terminalでコマンドを実行する
下部パネルのTerminalでは、コマンドを実行できます。
pwd
ls
Windows PowerShellでは、一覧表示に次も使えます。
Get-ChildItem
今いるフォルダと、ファイル一覧を確認します。
Step 5: Source Controlを見る
左側の枝分かれしたアイコンがSource Controlです。Gitを使うと、変更されたファイルがここに表示されます。
まだGitを始めていない場合は、無理に操作しなくて構いません。後でGit記事と組み合わせて使います。
Step 6: Command Paletteを開く
Cmd/Ctrl + Shift + P でCommand Paletteを開きます。
ここでは、機能名を検索して実行できます。
例:
Format DocumentOpen SettingsToggle TerminalReload Window
ポイント: VS Codeで迷ったら、Command Paletteで機能名を検索します。ショートカットを覚えていなくても操作できます。
よくあるエラー
| 困る状態 | よくある原因 | 確認する場所 |
|---|---|---|
| ファイルが見えない | フォルダを開いていない | Explorer |
| 変更が反映されない | 保存していない | Editorのファイル名 |
| コマンドが別フォルダで動く | Terminalの現在地が違う | pwd |
次にやること
VS Code拡張機能の最小セット で、入れすぎない拡張機能の選び方を確認します。
まとめ
VS Codeでは、Explorerでファイルを探し、Editorで編集し、Terminalでコマンドを実行し、Searchで全体を探します。Command Paletteを使えるようになると、機能を探しながら操作できます。
