Edited at

VSCode Insider で最高の作業環境が出来上がる話


これはなに

現在夜中の3時です.完全に深夜テンションで書いてます.

僕は普段VSCodeをIDE代わりに使って書き書きしているのですが,たとえばローカルに存在していないライブラリをDockerコンテナの中だけで使っているとシンタックスエラーが表示されたりするんですね.

エラーじゃないとわかりつつも気持ち悪いですよね...

そこに出てきたRemote Development:sparkles::sparkles:

これを使えばこの気持ち悪い状況を抜け出せるのではないかと突然思い立って試してみました.

(勢いだけで書いています.わかりやすい画像とか付けてないのは許してヒヤシンス...)


どうやるの


下準備

Dockerがローカルに入っていない方は入れておきましょう.

VirtualBoxで立てた環境にSSH接続とかでもいけるとは思いますが試してないです...それはまた今度やってみます.

既出の記事がいっぱいあるのですが,VSCodeはちゃんとInsiderバージョンを入れましょう.

僕の環境はUbuntu 18.04なので.debパッケージからインストールしました.

既存のバージョンは残したままで大丈夫です.というか残しておくと一部設定を引き継いでくれます.

僕の場合はDockerHubのアカウント情報を引き継いでおいてくれました.出来る子.

インストーラーはこちら

VSCode Insiderが無事インストールできたら,早速拡張機能を入れていきましょう.

とりあえず入れておくべきなのは,Remote DevelopmentDockerです.両方ともMicrosoftが出している公式の拡張機能です.


実際に使ってみる

ここからは,

- Dockerfile / docker-compose.yml が既にある場合

- Dockerfile / docker-compose.yml が無い場合

の2パターンに分かれます


Dockerfile / docker-compose.yml が既にある場合

僕はこちらで使っています.

まずは該当のDockerコンテナを立ち上げましょう.編集したいコードを置いているローカルのディレクトリを--volumesで読み込ませるのを忘れずに!

コンテナが立ち上がったら,Ctrl + Shift + Pでコマンドパレットを出してremote-cとでも打ってみましょう.

候補の中にRemote-Containers: Attach to Running Containers...というのが出てくるはずです.

もしくは左下の緑色の,"><"みたいなマークを左クリックしてみても同じものが出せます.

そちらを選択すると,別ウィンドウでコンテナ内にアクセスできます.

そしたら先程volumesで読み込ませたファイルを置いたディレクトリを,Open Folderから開いてみましょう!

あとは言語やフレームワーク等それぞれに対応した拡張機能を適宜インストールしていきましょう(reloadが必要です).

Lintももちろん使えます:thumbsup:

ほら最高!


Dockerfile / docker-compose.yml が無い場合

※こちらは試していないです

この場合は,まずDockerfileを書く必要があります.でも書いたことが無くても大丈夫です.

コマンドパレットを出してRemote-Containers: Create Container Configuration file...を選択するだけ.

あとはVSCodeがいい感じにDockerfileを作ってビルドしコンテナを立ち上げてくれます.

こちらに詳しくまとめてくださっている方がいたので参考にしてみてください.


まとめ

Remote Developmentを使うと,人によっての環境の違いとか意識しなくてもよくなりそうなので期待大ですね:thumbsup:

Windows10 Pro 以外のWindows民向けにVagrantfileを別途配布する,くらいで全環境網羅できそうな気がします.最高です.

VSCodeはいいぞ!


ちょっと追記

書いたコードにエラーがあるまま保存すると,コンテナが停止してしまいます.

どうなるかというと,コンテナ内で編集するために開いていたウィンドウが閉じ,ローカルのファイルを開いていた最初のウィンドウに戻ります.

まぁ当然といえば当然ですね...もう1回コンテナ立ち上げる作業が増えるので気をつけましょう...

ショートカットとか割り当てておくといいかも.