【VS Code】ファイルマネージャとターミナルを内包できる!

 

私が VS Code(Visual Studio Code) Microsoft 製コードエディタ
公式サイト
を使い始めたときは、

VS Code の他にもファイルマネージャ(エクスプローラ)とターミナル(コマンドプロンプト)、合計3つのウィンドウを開き、

切り替えながら作業を行っていました。

Web 開発であればブラウザも開くので、多い時には4つのウィンドウを行き来しなければならない…。

ところが、VS Code でもファイルマネージャのようなものとターミナルの機能が使えることを知り、

今ではブラウザ以外の3つの機能をひとつのウィンドウから管理できるようになり、たいへん作業がしやすくなりました。

今回は、VS Code における

  • フォルダ・ワークスペースの使い方
  • ターミナルの使い方
  • 具体的にうれしかったこと

についてお話します。


フォルダ・ワークスペースの使い方

単一のフォルダを開く方法と、複数のフォルダを同時に開く方法(ワークスペース)があります。

フォルダを開くときは、File > Open Folder… (または ctrl+k ctrl+o)からファイルマネージャが開きますので、

そちらで開きたいフォルダを選択します。

ワークスペースを開くときは、File > Add Folder to Workspace… からファイルマネージャが開きますので、

そちらで開きたいフォルダを選択します。

また、一度フォルダを開いてからサイドバーの空白で右クリックし、

Add Folder to Workspace… から同様にフォルダを開くことでワークスペースとすることもできます。


フォルダやワークスペースでは、ここからそのまま新規ファイル・フォルダの作成や削除ができます。

フォルダ名を右クリックすると New File、New Folder、Rename、Delete などと出てきます。


ワークスペースは File > Save Workspace As… から.code-workspace形式で保存できます。

(保存先はどこでもいいですが、私はわかりやすいように<username>/.vscode/workspace/以下に保存しました。)


ターミナルの使い方

ヘッダーの Terminal から New Terminal を選択(または ctrl+shift+@)すると、エディタの下にターミナル画面が出てきます。

VS Code ターミナル

右上のドロップダウンリストから Select Dafault Shell をクリックし、ターミナルの種類を選択すると、

VS Code で新しいターミナルを起動したときにそのターミナルが使われるようになります。

関連記事

【VS Code】超便利!
Snippets の使い方

【VS Code】超便利!Snippets の使い方


何がうれしかったか

3 in 1 になってウィンドウの切り替えが楽になったということの他にもうれしいことがあります。

フォルダ内のファイル内容の全検索ができる(フォルダ・ワークスペース)

正直これが一番助かっているかもしれないです笑


例えば、複数のファイルにまたがって使われている変数や関数の名前を変えたくなったとき、

検索機能から置き換えができるのですが、

ワークスペースなどを使っていない場合、検索に引っかかるのは開いているファイルだけです。

だから、どこのファイルにどの変数や関数が使われているか把握しなければなりませんでした。

あるいは、サイト構築でデベロッパツールから見つけた HTML がどこのテンプレートファイル由来のものなのかを見つけ出すには、

フォルダ名とファイル名からあたりをつけるしかありませんでした。

(今考えたら何てアホなことをと思いますが…笑)


しかし、フォルダやワークスペースを開いている状態だと、

開いているフォルダ内の内容をすべて検索してくれるのです。

もっと早く知りたかったなあ…笑

複数のターミナルを同時に開けて管理しやすい(ターミナル)

これはターミナルを別で複数開くことで実現できるのですが、それだとウィンドウが多くなってしまって大変です。

VS Code では New Terminal(ctrl+shift+@)でさらにターミナルを追加したり(ドロップダウンリストで切り替えできます)、

Split Terminal(ctrl+shift+5)でターミナルを分割して横に並べたりもできます。

また、今表示しているターミナルの種類や起動している言語なども表示してくれるので、

どれがどれだかがわかりやすいです。

VS Code ドロップダウン

関連記事

【初心者向け】サイトのカスタマイズ方法

【初心者向け】サイトのカスタマイズ方法


使うと使わないとでは作業効率が全く変わってくるので、ぜひ使ってみてください。

お役に立てたらうれしいです。

では👋