プロジェクトファイルの作成

今回は、Visual Studio Code内でのプロジェクタフォルダの読み込み、プロジェクトファイルを作成・編集/保存・削除について説明していきます。

Visual Studio Codeでコーディングを始めるには、まず自分のPCにプロジェクトフォルダを作成します。
このフォルダは、HTMLやCSSなどのファイルを保存する場所になります。

次に、Visual Studio Codeを開いて、画面左上の「ファイル」メニューから「フォルダを開く」を選択します。
先ほど作成したプロジェクトフォルダを選んで「フォルダを選択」ボタンをクリックします。

これでVisual Studio Codeにプロジェクトフォルダが読み込まれ、フォルダ内に新しいファイルを作成したり、既存のファイルを編集したりすることができます。

それでは早速、プロジェクトファイルの作成を行っていきましょう。

プロジェクトフォルダの読み込み
ファイルから開く方法：「開く...」「フォルダーを開く...」から開くことができます。
ショートコードから開く方法：Command⌘ + 0

サイドバーにフォルダが表示されていれば読み込み完了となります。
開いているプロジェクトフォルダにプロジェクトファイルの作成
Visual Studio Code でフォルダを開いている場合、フォルダやサブフォルダに対して新しいファイルを作成することができます。

フォルダ名の右側に表示されているアイコンの中から「新しいファイル」アイコンをクリックしてください。

フォルダの中にファイルが作成され、作成する新しいファイル名を入力したあと Enter キーを押してください。

作成されたファイルがエディタで表示され、編集できる状態となります。

プロジェクトファイルの編集/保存

プロジェクトファイルの編集
先ほど作成した「index.html」ファイルを開き、エディタ内で編集を行なっていきます。

今回はHTMLの記述を行う際に最初に行うDoctype宣言というものを記述しています。
テキストであれば何でも問題ありません。
ショートコード：Shift⇧+ 1 + ⇒Tab
編集したファイルの保存
先ほど編集した「index.html」ファイルの内容を保存していきます。

エディタ内の「index.html」ファイルのタブには、白い丸が表示されています。
これは、編集したファイルがまだ保存されていないことを示しています。

保存方法
ファイルから保存する方法：「保存」をクリックすると保存できます。
ショートコードで保存する方法：Command⌘ + S

ファイルの「保存」をクリック、もしくは、Command⌘ + Sで保存してください。

エディタ内の「index.html」ファイルのタブに、白い丸がなくなっていれば保存完了です。