メインコンテンツまでスキップ

[vscode Remote]初心者向けの解説とおすすめの理由5つ

· 約10分
時雨風
時雨風
箱庭の管理者

この記事は？​

Visual Studio Codeについて簡単に紹介しつつRemote Developmentの使い方を解説します。

Visual Studio Codeとは？​

Visual Studio Codeはvscodeと略されます。 Microsoft社が開発をおこなっている統合開発環境と呼ばれるものです。 Electronと呼ばれるものを使用しており、webページをアプリに変換したものが配布されています。

vscodeの便利なところ５つ​

vscodeの利点を５つ紹介します。

1. 軽い！​

同社のVisual Studioに比べ起動時間が圧倒的に短く、ウインドウを複数表示しても動作が重くなりにくいです。 そのため、vscodeはIDE（統合開発環境）ながらテキストエディタとしても十分に使用することができます。 例えば、markdownと呼ばれる形式のテキストファイルの編集には、プレビュー機能とgitによる管理のことを含めるとvscodeを使用するのがbestです。 他にも、強力な文字列検索機能や置換機能、エクスプローラーなどテキストエディタとしても使える便利機能がしっかりとそなわっています。

2. ターミナルからcodeでファイルを開く！​

ソフトウェアの開発などをしていると、ターミナル上での操作が増えます。 vscodeではcodeというコマンドが使用できるので、ターミナル上の操作からシームレスでファイルの操作を行うことができます。

3. GUIのgit機能でバージョン管理が楽！​

ファイル編集の際に、「どこを変更したのかわからなくなってしまった！」「必要のないコメントアウトの行が後で使用するかもしれないので消せない」といった悩みを解決するのが、バージョン管理システムのGitです。 gitの操作は本来ターミナル上からコマンドで行います。これでは初心者が分かりにくいため、いくつかのGUIツールが提供されています。 その一つがvscodeです。 vscodeでは、基本的なコマンドはすべてこなせる上に、ファイルの変更箇所を色付きで表示してくれます。 また、meergeでコンフリクトした際もわかりやすい表示がされるため、コンフリクトが怖くなくなります。

4. 豊富で強力な拡張機能！​

vscodeは、インストール直後は機能が豊富とはいえません。そのぶんだけ軽量なのですが、機能不足では意味がありません。 これを補って余りあるのが強力な拡張機能たちです。 世界中の人々によって開発される各緒機能ですが、なかでもMicrosoft公式のとびっきり便利なものをこの記事では丁寧に紹介します。

5. ブラウザ上でも使える！​

vscodeがブラウザ上でも使用できるのは知っていましたか？ githubのリポジトリで「.」を押してみてください。vscodeが開きます。

下記はMicrosoftのリポジトリです。試しに開いてみてください。 https://github.dev/microsoft/vscode-remote-release

この機能を使用するとgithubでのファイルの編集がシームレスで可能ですね！

VScodeインストール方法​

また、ターミナル上でcodeが使用できるかインストール後に確認しましょう。

Windows, Linuxの場合​

Visual Studio Code​

こちらからダウンロードできます。

Macの場合​

homebrew​

Macの場合は、brewのcaskを使用するとpathの設定が必要なく簡単かもしれません。

brew install --cask visual-studio-code

Remote Developmentについて​

いきなりですがこの記事の本題である、Remote Development (+α)について紹介します。 Remote DevelopmentとはMicrosoftから提供されている、開発者向けの拡張機能です。 主に３種類のパッケージが内蔵されています。

Visual Studio Code Remote Development

Remote Development
 ├─ Remote - SSH
 ├─ Remote - Containers
 └─ Remote - WSL

 .
 └─ Remote - SSH: Editing Configuration Files

Remote Development SSH, Containers, WSLをまとめたパック。 ３つがまとめてインストールされる。

Remote - SSH vscodeからSSHを使用してサーバー上フォルダやファイルを編集できるようなる拡張機能。

Remote - Containers vscodeからDockerを使用してコンテナ内のフォルダやファイルを編集できるようになる拡張機能。

Remote - WSL vscodeからWSL内のフォルダやファイルを編集できるようなる拡張機能。 WSLとはWindows Subsystem for Linuxの略でWindows上で使用します。

Remote - SSH: Editing Configuration Files SSH設定ファイル編集の際に役立つ拡張機能です。 構文に色をつける機能、キーワードインテリセンス、スニペットを追加します。

今回はこの中から、特にSSHとContainersについて紹介します。

Remote SSH​

Remote SSHはsshをvscode上から使用できる機能です。その上ファイルやフォルダーも編集できるので、FTPアプリのような操作も可能です。 FTPターミナルとFTPアプリを交互に操作しながら行うサーバー作業が、vscodeひとつで作業効率が改善します。

SSHとは？FTPとは？​

引用

使い方​

Remote - SSH vscodeからSSHを使用してサーバー上フォルダやファイルを編集できるようなる拡張機能。

Remote - SSH: Editing Configuration Files SSH設定ファイル編集の際に役立つ拡張機能です。 構文に色をつける機能、キーワードインテリセンス、スニペットを追加します。

１回だけ接続する場合​

接続先を保存する場合​

/Users/{user}/.ssh/config

Remote Continer​

vscode上からコンテナに接続する拡張機能です。 コンテナとはDockerという仮想環境アプリケーションで作ることができる仮想環境のことです。 仮想環境をつくることで、（ホストマシンの）ローカルとはアプリの有無やバージョンを分けることができます。 複数のプロジェクトごとに環境を管理できるので、開発者にとってはとてもありがたい存在です。 なお、他社のIDEではコンテナに接続する機能は有料となっているところもあるので、無料で使用することのできるvscodeは強いですね。

使い方​

ここでは試しにpythonの仮想環境を作成します。 まずは、必要なアプリケーションがあることを確認します。

  • vscode
  • Docker

dockerについて​

・docker desktop
  ├─ docker engine
  └─ docker compose

Docker Desktopは2022/4/10現在、Mac/Windows版があります。 その他のOSを使用している、大規模な商用利用のためDocker Desktopを利用できないなどの場合はDcoekr engineとDcoekr Composeをインストールしてください。

サンプルコンテナの作成​

下記のようにDockerFileを作成すれば、すぐにvscodeでコンテナを作成できます。 別バージョンのPythonで、プログラムを試したい時に便利です。

DockerFile

FROM python
  1. vscode左下のリモートウインドウを開く
  2. 「Reopen in Container」を選択する

Sampleプロジェクト​

FastAPIのプロジェクトを自動で作成できます。

python-docker-example-project

devcontainer.jsonについて​

devcontainer.json reference

Dockerfile build時に実行される。 フォルダはコンテナにbindはされていないので、フォルダ内の依存関係を元にパッケージインストールなどはできません。

"onCreateCommand" コンテナ起動時に実行するコマンドを記載できます。 フォルダーがbindされた後に実行されるので、bashスクリプトを指定することでパッケージインストールや任意のコマンドが実行できます。

タグ:
に最終更新