BLOG

Visual Studio Code で リモートのファイルを開く

kuroda

新年あけましておめで…ええっ、もう令和2年でしかも12月!?

大変にご無沙汰いたしました、エンジニアの黒田です。前回は2016年の12月でした(約4年前…)。

久々のブログ記事担当ですので今回はちょっと軽めの小ネタをご紹介したいと思います。Visual Studio Code (以下 VSCode) でリモートホストのファイルを開く方法についてです……「お前は今更なにを言っているんだ」というお気持ちは分かりますが、まあちょっとお待ち下さい。「ああ、あれの事ね」と察した方は、それですので閉じてしまって大丈夫です、多分。

さて、ご存知のように VSCode には Remote – SSH という拡張機能があって、sshで接続できるリモートホストのファイルを手元のVSCodeで開くことができます。SSH用の他にもContainer用とWSL用がありますが、ここでは省略。

例えばアカウントを持っているリモートホストに ssh charlie とやって接続できるように ~/.ssh/config を設定しておくと、コマンドラインで以下を実行することで、指定したフォルダ(ここでは /home/kuroda/work/app )を VSCode で開くことが出来ます(残念ながら、 ~/work/app とか $HOME/work/app 等の指定はできず、フルパスで書く必要があります)。

> code --remote ssh-remote+charlie /home/kuroda/work/app

( https://github.com/……/issues/585#issuecomment-536580102 より)

このように VSCode でリモートホストに接続した状態では、 VSCode の中のターミナルで接続先を操作できます。 Ctrl+Shift+@ で開くアレです。実はこの時、環境変数 PATH に特殊なディレクトリが追加されていて、このリモートホストを操作するターミナルでも code コマンドを実行する事ができます

引数にファイル名を指定すると、ターミナルを開いている手元のVSCodeの新タブで指定したファイルが開かれます。

フォルダーを指定すると、別窓で開いてくれます。

通常はローカルの code コマンドを実行したときと同様に、ファイルなりフォルダーなりを開いた時点でコマンドが終了して戻ってきますが、code コマンドのオプション引数に -w というのがあって、ファイルを開くときにこれを指定すると指定したファイルを VSCode の新タブで開いてから、そのタブを閉じるまでコマンドの終了を待ってくれます。

これで例えば、リモートの gitEDITOR として手元のVSCodeを使うことができます。コミットメッセージくらいならVSCodeのソース管理サイドバーで済ませても良いですが、 git rebase -isquash するコミットを決めたりするときにとても便利です(あらかじめ、 環境変数 EDITOR"`which code` -w" を設定しておきます)。

他には、 sudoedit コマンドの EDITOR にも使えます。 接続先に VSCode 以外のエディタや設定を入れていないけど、ちょっと込み入った設定ファイルを編集したいときには、これまた便利です。

また、安全のため sudoedit でファイルを開くとディレクトリ・ファイル名が一時ファイルに変わるため、拡張機能の組み合わせによっては適切な言語モードが選択されない場合があります。そんなときには Modelines を入れてファイルの最初か最後に以下のようなコメントを仕込んでおくと、良い感じに言語モードが選択されます(以下の例では他に NGINX Configuration を入れています )。

# code: lang=nginx

あとはこの環境変数ですが、同じホストにVSCodeのターミナルと通常のssh接続の両方を使う場合は ~/.bashrc (またはお使いのシェルの初期化スクリプト) に以下のような処理を入れておくと、 VSCodeのターミナルでだけ EDITOR code を使えるので便利です。

if which code | grep -qF .vscode-server; then
  export EDITOR="`which code` -w"
fi

それではまた、次の機会に!