Visual Studio CodeでSSH接続越しに、リモート環境のファイルを編集したい!

最近、IDEとしてVisual Studio Codeを使う方が増えていますね。
IDEではeclipseやphp storm、Visual Studio、エディタではEmeditorや秀丸エディタ、サクラエディタなどなど、いろいろなものを触ってきましたが、最近は私もVisual Studio Codeをよく使うようになってきました。

ターミナルでssh接続するのも面倒くさい

「Visual Studio Codeのターミナル使えばいいじゃん」
ええ、つい先日まで同じこと思ってました。とはいえいちいちsshコマンドを入力するのが意外と面倒だったりします。(面倒くさがりなんです)
それが面倒でTerraTermとかPoderosaとかそんなターミナルソフトを使いだすんですが、それはそれでいちいちウィンドウを切り替えたりするのが面倒だったりします。

「Visual Studio CodeでSSH接続しながら、Visual Studio Codeのエディタでファイル編集できるよ」

そんな話を聞いて若干目が点になりながら、最近のエディタは技術が進んでいるなあとしみじみしつつ、早速試してみることにしました。

Visual Studio CodeでSSH接続を試してみた

何はともあれ、使いやすいならセットアップしてやってみようじゃないか、ということで早速やってみました。
「Remote – SSH」という拡張機能をインストールすると使えるようになるみたいですね。

続いて今度はssh接続設定を記載するconfigファイルを作成する必要があるみたいです。(標準で用意されるconfigファイルはパーミッションの関係で読み込めないのだとか)
というわけで任意の場所にconfigファイルを作成しました。

ここで作成したファイルをVisual Studio Code側で読み込んでくれるように設定してあげます。
コマンドパレットを開いて、「Remote-SSH:Settings」と入力して設定画面を開きます。

割とすぐ出てくると思います。Remote.SSH: Config Fileを先ほど作ったファイルパスを指定するように記載します。
肝心のconfigファイルの中身ですが、私は開発環境にVagrantを使っているので、こんな感じに書いています。

あとは接続するだけ。画面左のメニューに、「リモートエクスプローラー」があるのでそれを選択します。
リモートエクスプローラーのターゲットを「SSH Targets」を選択して、先ほど作った設定ファイルに記載した環境がリストされているので、接続ボタンをクリックするだけ。

別のVisual Studio Codeウィンドウが立ち上がります。
SSHキーを特に設定していなければ、パスワードの入力が求められるので入力するとログインできます。

そのあとはいつものように(?)フォルダを開くを押すと、画面上部にホームディレクトリを入力できるエリアが表示されます。

ホームディレクトリを入力すると・・・。

ファイルエクスプローラーにディレクトリやファイルが表示されました!
後はいつものようにエクスプローラーからファイルを編集できますし、ターミナルを開けばコマンドの入力もできます。

便利になったなぁとしみじみ思いながら、せっかくなのでVisual Studio Codeをこのまま少し使ってみようと思いました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です