Visual Studio Codeでエックスサーバー上のリモートファイルを編集する

WordPressでブログを書いているとサイトのデザインをいじりたくなってきますよね。管理画面からの編集でももちろん十分なのですが、使い慣れたエディタで編集できたほうが生産性アップ！まちがいなしです。

そこで今回は、エックスサーバー上のファイルをVisual Studio CodeからSSH接続で編集する方法をご紹介します。もちろん、CSSファイルだけでなくサーバ上のJSファイルなども編集できるようになりますよ。

Step 1

Visual Studio Codeの「Remote VSCode」という拡張機能をインストールします。

cmd+p

ext install remote-vscode

Step 2

Code > 基本設定 > 設定 のユーザー設定に下記のコードを記述します。

//-------- Remote VSCode configuration --------
// Port number to use for connection.
"remote.port": 52698,
// Launch the server on start up.
"remote.onstartup": true

Step 3

サーバへのSSH接続の際にポート転送を行います。

ssh -R 52698:localhost:52698 user@example.org

あるいは、configファイルに設定を記述しておくと楽です。

vi ~/.ssh/config
Host yourXserverName
    HostName xxx.xsrv.jp
    Port 10022
    User root
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes
    RemoteForward 52698 localhost:52698


Step 4

エックスサーバーにSSH接続を行い、rmateをインストールします。

ssh yourXserverName
mkdir ~/bin
wget -O ~/bin/rcode https://raw.github.com/aurora/rmate/master/rmate
chmod a+x ~/bin/rcode

Step 5

サーバ上で次のコマンドを打つとVisual Studio Codeが立ち上がり、リモートファイルを編集できます。

rcode remote_file_name.css

以上、エックスサーバー上のリモートファイルをVisual Studio Codeで編集する方法のご紹介でした。みなさんもぜひ試してみてください。

今回の記事では下記のサイトを参考にさせていただきました。
Remote editing files over SSH with Visual Studio Code
aurora/rmate: Remote TextMate 2 implemented as shell script