Code Server とはブラウザで使用できるVisual Studio Codeです。
具体的にはUbuntuなどのLinuxサーバで起動し、クライアント側からブラウザでアクセスして使用します。
このブログもCode Serverで書いています。
🤔 < 通常のPCにインストールするVisual Studio Codeとどう違うの？Code Serverって、使えるの？何ができるの？
という疑問がありましたので、この記事で紹介します。
用語について
この記事では、以下のとおり用語を使い分けて書いています。
| 用語 | この記事での意味 |
|---|---|
| Visual Studio Code | 通常のVSCode。WindowsやMacにインストールして使っているもの |
| Code Server(サーバ側) | Ubuntuなど、Code Serverを実行しているサーバホスト |
| Code Server(VSCode) | WindowsやiPhoneなど、Code Serverにアクセスして使用しているVSCode |
クライアント側は、どの端末から使えるの？
私が検証した環境では、以下の端末からCode Serve を利用することができました。
- Windows10(Surface Go) + Chrome
- Windows10(Surface Go) + Firefox
- iPhone(SE2) + Safari
Surface Go は Windows11にも対応していない非力なマシンですが、処理遅延もなく問題なく使用できました。
iPhone SE2 も問題なく使えますが、Safariの設定変更が必要（デスクトップ版をリクエスト ＆ 拡大縮小率を50%）で、さらにBluetoothキーボードとモバイルディスプレイが必須です。
iPhone SE2 は画面がとても小さいので、ソフトウェアキーボードを出すと作業エリアが狭くなります。
10インチのiPadくらいでしたらSurface Go と同じディスプレイサイズですので、モバイルディスプレイは無くても問題ないかもしれません。
キーボードショートカットは使える？
Visual Studio Codeのキーボードショートカットは使えますが、ブラウザのキーボードショートカットが優先されます。
例えばWindows環境で「Ctrl + Shift + P」を押すとコマンドパレットを表示できるはずですが、FirefoxからCode Server(VSCode)を利用すると、Firefoxのプライベートウィンドウが表示されます。
また、通常であれば「Ctrl + W」でファイルを閉じることができますが、ほとんどのブラウザではタブ（Code Server）が閉じます。
そのため、最初は使い方に少し戸惑いがあるかもしれません。
Terminal はどこにつながるの？
通常のVisual Studio Codeでは、Terminalはローカルのシェルに繋がります。
ただし、Code Server(VSCode)はブラウザからアクセスしますので、ローカルのシェルにはアクセスできません。
Code Server(VSCode)のTerminalは、Code Server(サーバ側)のシェルに繋がります。
SSHなど環境によってはタイムアウトすることもありますが、Code ServerのTerminalはタイムアウトがありません。
SSHで接続するよりも使い勝手がいいという印象でした。
拡張機能は使えるの？
Visual Studio Codeには拡張機能が豊富にあります。
Visual Studio Codeでは「Visual Studio Market Place」にからダウンロードしますが 、Code Server では「Open VSX Registry」からダウンロードすることになります。
いくつかピックアップして、Code Serverで使えるか検証してみました。
ほかの拡張機能も検証して欲しい！というものがあれば、検証します。
Twitter (@Harus0313) へ連絡をお待ちしています。
Material Icon Theme
Material Icon Theme は、フォルダツリーにアイコンを表示してくれる拡張機能です。
このとおり、Code Serverでも問題なく使用することができました。
Bracket Pair Colorizer
Bracket Pair Colorizer はカッコの開始と終了を分かりやすく色付けしてくれる拡張機能です。
ネストの深さによって色が変わります。
Bracket Pair Colorizer2 をインストールしたところ、エラーが出て使うことができませんでした。
ただし、古いバージョンである「Bracket Pair Colorizer」は問題なく使用することができました。
Live Server
Live Server はローカルにウェブサーバを起動してHTMLやCSSなどのプレビューしてくれるツールです。
ウェブ開発には必須のツールかもしれません。
簡単にHTMLファイルを作ってLive Serverを起動してみたところ、ちゃんと表示することができました。
使えそうですね。
Visual Studio Intellicode
Visual Studio Intellicode は、AIを使ったソースコードの自動補完ツールです。
自動補完リストの中から特に使われそうなものを「★」マークで表示してくれます。
Visual Studio Code の Intellicodeは、TypeScript/JavaScript, Python, Java に対応していますが、
Code Server が利用している「Open VSX Register」には、Intellicode そのものがありませんでした。
よって、Coder Serverでは使えない、という結論になりました。
Open VSX Registryってなに？
Open VSX Registryとは、Eclipse財団が立ち上げた、Microsoft Visual Studio Marketplace に代わる、Visual Studio Code 拡張機能のマーケットプレースです。
The Open VSX Registry is a vendor-neutral, open source alternative to the Microsoft Visual Studio Marketplace for VS Code extensions. It’s built on the Eclipse Open VSX project, and delivers on the industry’s need for a more flexible and open approach to VS Code extensions and marketplace technologies.
オープンソースでベンダー中立なマーケットプレイスというのが特徴です。
Visual Studio Codeは機能ありすぎ！
Visual Studio Codeはオープンソースのコードエディタです。
コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。
インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。
そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。
「Visual Studio Code実践ガイド」は、
- Visual Studio Codeの基本的な使い方
- TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
- Visual Studio Code拡張機能の開発方法の紹介
などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。
電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。
コメント