VSコードでフォルダとファイルを追加する方法について解説

目次

1. 1. ワークスペースにフォルダを追加
2. 2. ワークスペースを保存
3. 3. ワークスペースを開く

1. ワークスペースにフォルダを追加

VSコード上でコーディングの作業を行う際は、ワークスペースに作業用のフォルダを追加します。

メニューの「ファイル」の中にある「フォルダーをワークスペースに追加…」をクリックします。

今回は、Codejumpの入門編のフォルダ一式を追加してみます。「profile」フォルダを選択して「追加」ボタンをクリックします。

追加するフォルダが信頼できるものであるかを聞かれるポップアップが表示されるので、「Yes」をクリックしてフォルダを追加します。

ワークスペースに「profile」フォルダが追加されました。

続いて「photo」フォルダを追加します。ワークスペースへのフォルダの追加はドラッグ&ドロップでもできます。
「photo」フォルダを選択した状態でワーススペースにドラッグ&ドロップします。

「Add Folder to Workspace」をクリックしてフォルダを追加します。

ワークスペースに「photo」フォルダが追加されました。
index.htmlなどのファイルを選択すると右側にファイルの内容が表示されるので、ここでコーディングを行っていきます。

2. ワークスペースを保存

ワークスペースを保存する際は、メニューの「ファイル」の中にある「名前を付けてワークスペースを保存…」をクリックして、保存先を指定してワークスペースを保存します。

3. ワークスペースを開く

保存したワークスペースを開く際は、メニューの中の「ファイル」内にある「ファイルでワークスペースを開く…」をクリックしてワークスペースのファイル（拡張子が「.code-workspace」）を指定します。

ワークスペースを開くと前回保存した内容が表示されます。