こんにちは、ダニエルです。
今回はVisual Studio Code（以下、VS Code）の「ファイルの開き方」について解説します。
結論から言うと、VS Codeでは「フォルダーから開く」のがベストです。
VS Codeでは、「フォルダーから開く」
その理由は、効率よく作業できるからです。
「フォルダーから開く」を行わないとどうなる？
VS Codeを使うときに、ついフォルダ内のファイルを右クリックして「Visial Studio Codeで開く」を選んでしまいがちです。つまり、下の画像の開き方です。
このように開きたいファイルを直接VS Codeで開くと、下記の画面表示になります。
「開いているエディター」にはファイルが表示されていますが、「開いているフォルダーがありません」の表示もでています。
これは、今現在開いているのが先ほど選んだファイルだけの状態。
この状態では、複数ファイルが絡み合うサイト制作のコーディング作業においては、とても効率が悪いまま作業していることになります。
ご存知のとおり、WebサイトはHTML・CSS・JavaScript・画像ファイルなど、階層構造をもったフォルダ単位で成り立っています。単体のファイルしか開けない状態だと、具体的には下記の問題が生じます。
- 他のファイルも開きたいときに、いちいちフォルダから指定し直す
- サイトの全体構造を意識した作業が行いにくい
対してVS Codeの「フォルダーを開く」で対象フォルダを選ぶと、左側のサイドバーにそのフォルダ内のファイルが一覧表示されます。これにより、
- フォルダー全体の構造を視覚的に把握できる
- ファイルの切り替えがワンクリックでスムーズ
上記のとおりです。とても便利になります。
特にWeb制作では、CSSを編集したあとすぐにHTMLを確認したり、画像フォルダを参照したりと、複数ファイルを行き来するのが日常です。そのため「フォルダーから開く」習慣をつけておくと、作業効率が大きく変わります。
フォルダーから開く手順
- その①：VS Codeのファイルメニューをクリックする
- その②：「フォルダーを開く…」をクリックする
- その③：ファイルが入っているサイトフォルダーを選ぶ
上記のとおりです。
注意点としては、サイトフォルダーを選んでください。index.htmlやassetsフォルダーをまとめている一番大きなフォルダ＝サイトフォルダーです。
無事に開けると、サイドバーにサイトフォルダーの構造一覧が表示されます。
今回は以上です。
