@rabirgoです。
WordPress の style.css 編集画面が使いづらくて死にそうだったので、
なんとか VSCode などのモダンなテキストエディタできないかと検索してみたらサクッとできたので共有します。
サクッとできたもののその後繋がらなくなったのも含めて参考まで。
WordPress のテーマ編集画面は使いづらい
使いづらいと言ってるのはこの画面。
サジェストやインデントはうまく動いてるしリアルタイムで文法エラー検知もしてくれるのはいいんだけど、
いかんせんウィンドウが狭くてスクロールだったりカーソル移動がしづらい。
あと、ブラウザのタブでこの画面を開いて、保存後のリロードは別のタブでみたいな時にタブの切り替えが面倒。
そうだ、手動でインデント入れようとするとカーソルが別の要素に移動するからインデントをスペースで入れなきゃいけない。
もうやだ！
ということで別の手段で編集したいと思い立ちまして。
サーバは mixhost なので、mixhost にログインして vim で書いてもいいけど、css を書きやすくするための環境構築が面倒。
というかやったことないから調べるところからだし・・
ということで VSCode でできないのかなと思って調べたら
ほぼノーストレスでできたのでご紹介します。
VSCodeでmixhostのstyle.cssを更新する
参考にしたのは以下のページです。
ざっくり設定の流れをスクショとともに説明します。
以降、ローカルマシンは macOS Mojave バージョン 10.14.6 で試した結果となります。（ iMac (Retina 5K, 27-inch, Late 2015) ）
リモートサーバは mixhost です。
Linux なのは分かるんですけどディストリビューションは不明。
また、ssh 公開鍵を設定済みです。
VScode Insiders をインストール
以下のページにあるように Insiders build というバージョンを使う必要があるようです。
Note: You’ll need to use the Insiders build for now, but remote development support will eventually be available in the Stable release.
こちらから。
zip がダウンロードされ、解凍したら .app ファイルが出てくるので
$HOME/Application 配下へ移動。
以下のように使えるようになりました。
Remote Development 拡張機能パック をインストール
参考にさせていただいた方の qiita 記事は Windows 環境のようでPowerShell が使用されてました。
macOS では同じようにはできないので検索してインストールしました。
なお、貼っていただいてるリンクから拡張機能のページに飛ぶことができますが Insider 版ではない方の app を開こうとするのでやめました。
VSCode Insider 版の機能で拡張機能を検索してインストール。
「パック」だからと思うんですが、いくつかの拡張機能も合わせてインストールされました。
SSHの設定
ここからは ssh 公開鍵を設定済みという条件で記載。
事前に mixhost の cPanel という管理画面でユーザ名と IP アドレスを取得。
VSCode で ssh 設定ファイルを書き換えます。
ホストを追加。
普段使ってる macOS のユーザの設定ファイルに追加します。（/etc/ssh/ssh_config は使いません）
2段目の「mixhost」が今回追加した設定です。
IdentifyFile は id_rsa までであること（id_rsa.pub ではない）に注意。
“mixhost” は好きな名前で OK。識別しやすければ大丈夫です。
今後 数十台のサーバを管理する予定がなければ適当で大丈夫でしょう。
リモートホストにアクセス
コマンド入れてリモートサーバにアクセス。
この後、先ほど設定した「mixhost」が選択肢に出てきて選択してターンってやったら繋がりました。
簡単べんり！
アラームみたいなのが出てますけどそのうち調べます。
なんかエラーっぽいの出てるけど
こちらを参考にしました。感謝
VSCode公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】 – Qiitahttps://t.co/yJxQjfSqbB pic.twitter.com/fEAEKhfs8z
— rabirgo@Railsチュートリアル中 (@rabirgo) December 14, 2019
エラー発生
ただ、その後 Terminal からも繋げようとしたらエラーとなり「あ、同時には使えないんだ、理由はわからないけど」で Ctrl+C とか色々やってたら VSCode も接続できなくなりました。
VSCode の Terminal ウィンドウや、iTerm2 というターミナルソフトでもエラーが出てて、スクショは撮り忘れ。
唯一残ってるのが iTerm2 で出現したこのエラー。
（VSCode 側を終了させれば、iTerm2 ではログインできました）
このメッセージや、他のメッセージで検索しても見つからず途方に暮れてたら、
ふと「変なプロセス残ったりとか？」と思い立って調べてみたら多分ビンゴでした。
見るからに不要そうなプロセスがたくさん生きてたので kill -9 してあげると VSCode から接続できるようになりました！
VSCode で mishost サーバ上の style.css が編集できるようになってめでたしめでたし。
さいごに
どうやら、この手順に最初に当たったのは運が良かったみたいです。
追加で調査してみると、以前は Samba 設定して・・とかってことをしてたけどこの機能がついたことで楽なったって流れらしい。
自分も FTP ソフト使ったり Coda ってアプリがリモートサーバのファイルを編集できたような気がするなど色々考えてましたが、VSCode のみでできたのでお手軽でした。
VSCode は Mac でも Windows でも評判良さそうで、拡張機能を入れることでかなりべんりに使えるっぽいので使い込んでいきたいなとも思ってます。
