Zenn
💡

iPad × VSCodeServer 開発のコツ

2022/08/28に公開
iPad
VS Code
VS Code Server
コードサーバー
tech

概要

VScodeServerとipadの組み合わせで開発を行う際の、推奨設定や拡張機能を紹介します。

(ちなみにVSCodeServerはブラウザ版VSCode(https://vscode.dev)とほとんど同じなので、ipadの購入を迷っている方は、家電量販店などのipadでVScode.devにアクセスして触りごごちを試してみるのが良いと思います。)

構成

  • VSCodeServer
    -Windows10デスクトップPCにて、ローカルで起動させ、Cloudflare Tunnelにて外出先から自分だけがアクセスできるよう公開
  • ipad Air(第5世代)
    -Magic keybordと組み合わせて使用

主な使用方法

参考までに、私の主な使用状況を記載します。

サーバー側

  • VSCodeServerを起動(cloudflare Tunnelで自分用に公開)
  • Python(Django)開発用のDockerコンテナを立ち上げ(cloudflare Tunnelで自分用に公開)

クライアント側

  • ipadからサーバーで建てているVSCodeServer,Djangoサーバーに接続
  • ipadで接続したVScodeServer上のターミナルよりサーバー側PCを操作

使用上のコツ

【推奨設定】

オートセーブ設定

デフォルトではオートセーブ(afterDelay:1000msごとに保存)が有効になっています。
デスクトップ版と同じ挙動にする場合は、onFocusChangeに変更しましょう。
※オートセーブがONになっていると通信量の増加やバッテリーの消耗が激しくなる可能性があります（未検証）

設定の同期オン

複数の端末からVSCodeServerに接続する可能性がある場合は、設定の同期をONにすることで、全ての端末で環境を引き継ぐことが可能です。

文字サイズ変更

safariのデフォルトの設定では文字サイズが大きく、表示領域が非常に狭いので、文字サイズを変更してください。
検索バー左側の"ああ"と書かれた箇所を押すことで文字サイズを変更できます。

ターミナル上のcwd設定（起動時の開始ディレクトリを設定）

ターミナルを開いた際にデフォルトで開くディレクトリが低い階層に設定されています。
cwdによく使用するディレクトリを設定することで毎回、ディレクトリを移動する操作を減らすことができます。

【推奨拡張機能】

Project Manager

VScodeServerに接続した際、毎回フォルダが開かれていない状態から始まります。
毎回、フォルダを移動して目的のデータを開くのは面倒なので、「ProjectManager」の拡張機能を導入しましよう。
　ProjectManagerでは、よく使用するディレクトリを設定しておけばダブルクリックで簡単にワークスペースを開くことができます。

Docker

Dockerを使用して開発する場合は、この拡張を導入しましよう。サーバー側で起動しているコンテナのシェルをクライアント側のVSCode上のターミナルにアタッチすることができます。

使用できない拡張機能

VSCode Serverでは、現状(2022年8月時点)Remote Development系の拡張機能（Containers,SSH,WSL）は使用できませんので注意してください。

Discussion