トップページ > ソフトウェアの操作 > Visual Studio Code でファイルやフォルダを開いて編集する方法

Visual Studio Code でファイルやフォルダを開いて編集する方法

Visual Studio Code はプログラムを行う際に利用するテキストエディタだが、複数のファイルで構成されるアプリケーションやウェブサイトではフォルダでまとめられることが多いため、VSCode でファイルやフォルダを開いて編集する方法について紹介する。

Visual Studio Code でファイルやフォルダを開いて編集する方法

1. プロジェクトごとにファイルをフォルダにまとめておくメリット

プロジェクトごとにファイルをフォルダにまとめておくメリットとしては、サーバへのアップロードのしやすさとプログラムファイル群の管理のしやすさが挙げられる。

プログラムやウェブサイト制作ではプロジェクトごとにファイルをフォルダにまとめることが多く、サーバへアップロードする際はフォルダごと転送すればよいので作業が楽になる。
また、フォルダを圧縮して 1 つのファイルにしてサーバに転送しても、サーバで解凍するとフォルダ構成を保ったままサーバに保存されるので 1 つずつアップロードするのに比べると作業時間が短縮できる。

加えて、最近ではプログラムを複数人で同時に操作したり、差分管理するために Subversion や Git を用いられることが多い。
その際もプロジェクト(システム)ごとにフォルダが分けられているとファイルをコミットしたり更新時にフォルダごとに操作できるの管理が楽になる。

2. Visual Studio Code とは

Visual Studio Code(略称:VSC)とは、Microsoft 社が無償で配布しているテキストエディタである。
同社ではプログラム開発向けに「Visual Studio」を製造・販売してきたが、VSC と Visual Studio は名前は似ているもののソフトウェアとは別の扱いとなっている。
VSC は統合開発環境(IDE)として名称を引き継いで提供されている。

VSC はテキストエディタであるため、拡張子 .txt を始め、PHP の .php や Python の .py などテキストファイルであれば開いて編集することが可能である。
さらに拡張機能(プラグイン)により開発したいプログラム言語をよりコーディングしやすくなるなど、開発する上で便利な機能を自由に用意することができる。

3. VSCode でファイルを開く方法

VSCode でファイルを開く方法としては、ファイルを VSC にドラッグ&ドロップするか、メニューから開きたいファイルを選択する。

「ファイル -> ファイルを開く」をクリック

メニューからファイルを開く場合は、上部メニューの「ファイル -> ファイルを開く」をクリックするとパソコン内のファイルを選択するウィンドウが表示されるので、開きたいファイルがあるフォルダまで辿ってファイルを指定する。

4. VSCode でフォルダーを開く方法

VSCode でフォルダを開く方法としては、メニューから開きたいフォルダを選択する。
下図のように上部メニューの「ファイル -> フォルダーを開く」をクリックするとパソコン内のファイルを選択するウィンドウが表示されるので、開きたいフォルダを指定する。

「ファイル -> フォルダーを開く」をクリック

開きたいフォルダーを指定すると下図のようにツリー状のエクスプローラーの形式でフォルダ階層と各フォルダにあるファイルが一覧で表示される。

VSC でフォルダーを開いた様子

フォルダーを開く場合には注意点がいくつかある。
1 つは、VSC でフォルダは複数同時に開くことができないため、異なるプロジェクトを並行して進めたり、異なるフォルダにあるファイルを比較しながらコーディングするのには難がある。

2 つ目は、編集中のファイルがある場合はフォルダーを開く際に破棄されるため、編集中のファイルを保存してからフォルダーを開く必要がある。

最後は、開いたフォルダは上位階層に移動できないため、より多くのフォルダを同時に開きたい場合は下位階層のフォルダーを開くのではなく、できるだけ上の階層のフォルダを開くことで、その下位にあるフォルダーもエクスプローラーに表示されるようになる。

5. VSCode でフォルダーを閉じる方法

VSCode で開いたフォルダーを閉じる方法は、上部メニューより「ファイル -> フォルダーを閉じる」を選択するとフォルダーが閉じられ、VSC が初期起動時の画面に戻すことができる。

「ファイル -> フォルダーを閉じる」をクリック

6. VSCode でファイルやフォルダを開くまとめ

VSCode でファイルやフォルダを開くまとめとしては、ファイルはドラッグ&ドロップまたはメニューでファイル指定して開くことができる。
フォルダーはメニューで指定して開く。

VSCode でファイルやフォルダを開くまとめ

ただしフォルダーを操作する場合はいくつか注意点があり、同時に複数のフォルダーを開くことができなかったり、下位の階層のフォルダーを開くと上位階層への移動ができないことがある。

関連記事

@webolve をフォローしてください