2019-05-22に更新

VSCodeのRemote Development機能が革命的な話。

背景

今月始めにMicrosoftからRemote Development Extension Pack. というのが発表された。簡単に言うと、VSCodeでコードを書くOSとプラグインが実行されるOSを別にすることが出来る。

よくあるパターンで、「MacでNokogiriがビルドできません」「WindowsでESLintを実行するにはどうしたら良いですか」みたいな質問がある。
最終的にサービスを公開するときにはどうせLinux使うのに、開発するときしか使わない別のOSで同じものを動かす苦労って無駄だよなあ、と思っていた。

じゃあ最初からLinuxで開発すればいいかというと、最近の高度化したWeb開発はIDEの支援なしに実行することが困難で、RubyだったらRuboCop、JavaScriptだったらPrettierやESLintで文法チェックしてもらわないと人類にはついていけない。これらを動かすためには開発環境をIDEと同じOSで動かす必要があって、そのためには上記の質問に悩まないといけない...というのが実情だった。

そういう悩みを解決するのが、VSCodeのRemoteDevelopmentだ。VSCodeはWindowsやMacで動かしつつ、SSHやDocker、WSLなどで動作するLinuxマシン上にあるソースコードを編集し、linuxマシン上でプラグインを動かすことが出来る。つまり、Windows/MacにはVSCodeさえあればよくて、ほかは全部Linux上で実行することが出来る。もはやNokogiriのビルドに悩む必要がなくなる!

やってみた

インストール

やり方はここで解説されている。早速やってみた。
Remote Development with VS Code

Remote Developmentはまだベータ版の機能なので、実行するためにはInsiders というβ版を使う必要がある。これは既存のVSCodeとは別のアプリケーションとして動作して、既存の環境を壊さないのでむしろ便利かも。

インストールが完了したら、ExtenstionsからRemoteDevelopmentをインストールする。ブラウザで開いてInstallクリックすると既存のVSCodeの方に入っちゃうので注意。サイドバーのExtenstionから「Remote Development」と入力してインストールする

1.PNG

マシンに接続

Linuxマシンに接続する方法はいろいろあるけど、今回は既存のマシンにlinux接続することにした。Ctrl+Chift+P でコマンドパレットから"Remote-SSH: Connect to Host"を実行

2.png

WindowsのPuttyで接続を管理していると、その設定ファイルの内容をインポートしてくれる(!)

3.png

ハマりポイント:Linux側にtmuxが入っているとうまく接続できないので、bash_profile編集して外して上げる必要がある。

接続完了。Open Fileを選ぶと、linuxマシン上のファイルを編集することになっている。

image.png

プラグインを使う

ここまではSSH経由でファイルマウントしたりする機能を使えばできないこともなかったので、今までできなかったことに挑戦。

ExtenstionからESLintとPrettierをインストール。WindowsのVSCodeからインストールしても、linuxで実行したほうが良い機能はlinux側にインストールされる。なにそれすごい...

4.png

設定から、Format on Saveを有効に。
5.png

で、こういう許されないJavaScriptを書いて保存すると...

6.png

勝手に整形される。ぼくらが夢見ていた機能!WindowsにはVSCodeしかインストールしていないのにlinuxの機能が使える!

7.png

Prettierだけだと、ぶっちゃけlinux上で上書きされたファイルを読んでるだけのような気もするので、あとでESLintも試してみよう

まとめ

ということで、WindowsにインストールしたVSCodeからlinuxの開発ツールの支援を受けつつコードを書くことが出来るようになった。

さいきんMacイケてないと思わない? とかっこいいこと言ってSurfaceに移ったのだけど、パワー不足で仮想マシンを使うのが辛かったり、hyper-Vでlinux動かしてもESLintが使えなかったりして、やっぱりMacに戻らないと駄目かなあ、もうちょっとなんとか...と思っているところだった。

RemoteDevelopmentがあれば、ネットの向こうで実行しているlinux VPSに対してVSCodeの各種支援機能を実現することが出来る。こうなってしまえば、もはやWindowsであれが動かないこれが動かないと悩む必要がなくなる。

数年前まで、開発マシンをインターネットの向こうに置くと、通信環境が確保できないと開発できないのがネックだったんだけど、最近どこでも無線LAN使えるし、テザリングもあるので、SSHでつなぐ程度の回線で良ければほぼ人権レベルに確保できるようになってきた。

この先5Gのモバイル接続が普及すれば、インターネット上で開発する動きはますます加速することが予想される。そういう予想のもとに提供されたのがAmazonのCloud9だったんだけど、MicrosoftはVSCodeという強力なツールに機能を追加することで同様の機能をよりスマートに実現してみせた。

GitHubの買収、TypeScript、VSCodeの提供と、あっという間にWEB開発の主流を抑えつつあるMicrosoftが、唯一ネックだったIDEの実行環境を埋めるツールを出してきて、最近のMicrosoftはイケてるよね。


daisuke furukawa

おひるねのできるフリーランサー。「モバイラーズオアシス」の中の人でもあります。

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント