【初心者】Visual Studio Code (VSCode)の下準備と使い方

VSCodeを使う前に最初にフォルダを作成するか予め開発で使われているフォルダを読み込ませる必要がある。

今回はデスクトップ画面から右クリックで新しくフォルダを作成し、このフォルダでサイト開発を進める。フォルダ名は「test」でも良いし、分かりやすいものがよい。

作成したフォルダをVSCodeにドラッグ＆ドロップでVSCodeに持っていく。

またはVSCodeのサイドメニューにある「フォルダーを開く」から読み込みたいフォルダをウィンドウから選択する事もできる。ドラッグ＆ドロップの方が楽だと思うが。

「このフォルダー内のファイルの作者を信頼しますか？」のウィンドウで「新規フォルダーデスクトップ内のすべてのファイルの作成者を信頼します」にチェックを入れ、「はい、作成者を信頼します」ボタンを押すと読み込まれる。

サイドメニューのアイコンの機能の解説

アイコン	説明
	エクスプローラー：フォルダの中身のファイルを表示する事ができる。ほぼこれしか使わない
	検索：全てのファイルの中にある検索したい文字列を検索してヒットしたファイルをピックアップしてくれる
	ソース管理：インターネットにソースコードをバックアップして管理するGitの機能を使用する。VSCodeに慣れたら試してみるとよい
	実行とデバッグ：JavaScriptのコードを書いて実行する際に動作をトレースして細かくバグがないかチェックできる。応用編で解説したい
	拡張機能：VSCodeの拡張機能(プラグイン)を追加や有効/無効にする。便利な拡張機能が多いので開発を効率的に進める自分に合ったものを探して試すのもよい。別のページで解説

エクスプローラー

最初はこのエクスプローラーが開いている。しかし何も表示されていないと思うが、新規作成したフォルダを読み込んで、その中に中身が何も入っていない為に空なのだ。

サイドメニューの領域で右クリックして「新しいフォルダーを作成」をクリックして名前を付けてフォルダを新規作成しよう。

ちなみに基本的にWebサイトを開発するファイル名やフォルダ名は半角の英数字を使うべきなので覚えておこう。

ここでは「page」というフォルダ名にして、Enterキーを押して確定し、pageフォルダを作成した。

今度はhtmlファイルを作成しよう。pageフォルダが選択されている事を確認し、右クリックで「新しいファイルを作成」を選択して、「index.html」と名前を付ける

エクスプローラーのメニュー

左から1番目は「新しいファイル作成」
左から2番目は「新しいフォルダーを作成」
左から3番目は「最新の状態へ更新」※基本的に使わない。VSCodeで参照するファイルは常に最新
左から4番目は「エクスプローラーのフォルダーを折りたたむ」※フォルダやファイルが多くなるとエクスプローラーの表示がごちゃごちゃしてくる。一旦、このボタンを押してから現在触っているフォルダをクリックして展開表示するようにするとよい

VSCodeの上のメニュー

ほとんど使わないからどうしても必要な時に解説する。