Docker × VSCode × Rust な開発環境を３ステップで作る


VSCode の RemoteContainers を使った Rust の開発環境のテンプレートを作りました
この記事はその紹介です

https://github.com/schrosis/rust-template-for-vscode-remotecontainers

## 前提

次のものがインストール・持っていること

 - [Docker](https://www.docker.com/)
 - [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
 - [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)  (VSCodeの拡張機能)
 - [Git](https://git-scm.com/)
 - [GitHub](https://github.co.jp/) のアカウント

## 爆速環境構築

### Step1: リポジトリを作成する

https://github.com/schrosis/rust-template-for-vscode-remotecontainers

このプロジェクトの[「Use this template」](https://github.com/schrosis/rust-template-for-vscode-remotecontainers/generate)ボタンから新しくリポジトリを作成
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/1dd6266e-4d92-3e83-c2f6-b3c40055635d.png)](https://github.com/schrosis/rust-template-for-vscode-remotecontainers/generate)

### Step2: クローンしてVSCodeで開き「Reopen in Container」を実行

作成したプロジェクトをクローンしVSCodeで開く
その後、左下の「><」のようなボタンをクリックし「Reopen in Container」を実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/e9478ec2-3dde-928c-d3ed-22cc020e32c4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/842f1ab7-6a95-e043-b21c-a7ab8bec67ef.png)

### step3: 完成！！

**しばらく待って落ち着いたら環境構築完了です！**

> 初回はDockerのImageをビルドするので時間がかかります

お疲れさまでした:tea:
左下に「Dev Container:」と出ていればOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/9109f5ed-3c2f-4a57-0c23-8cfe537e31f0.png)

## この環境でできること

### Rust1.58

Rust1.58が入っています
以下のファイルを変更し、別のバージョンを入れることも出来ます
 - docker/rust/Dockerfile
 - .github/workflows/ci.yml

### コード補完、整形、推論されている型の表示など

https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer

VSCodeの拡張機能 [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer) が自動でインストールされます

 - コード補完、インポート挿入
 - 定義、実装、タイプ定義ジャンプ
 - 参照の検索、シンボルの名前を変更
 - ホバーで型とドキュメントの表示
 - 推論されている型の表示
 - 整形
 - などなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/64a8d97a-2fe8-c9dd-fab4-64ba6eb82143.png)

### Clippy(静的解析)

[rust-analyzer](https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer) のファイル保存時のチェック機能で clippy が実行されるように設定してあります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/a01c64c2-7f58-14c8-cdda-87bebce6961f.png)


### ステップ実行

https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb

VSCodeの拡張機能 [CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb) が自動でインストールされ、launch.json も設定済みのためすぐにステップ実行を行えます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/d8f8dd49-1f45-9464-d3b1-48b54511ad77.png)

### Cargo.tomlのサポート

次のVSCodeの拡張機能が自動でインストールされます
 - [Better TOML](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) (tomlファイルのサポート)
 - [crates](https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates) (依存関係の管理のサポート)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/cadac796-eb9b-6605-3ba1-45ccc4d8f6c1.png)

https://crates.io/crates/cargo-edit

[cargo-edit](https://crates.io/crates/cargo-edit) もインストールされていますのでCLIでの操作も快適に行なえます

### GitHub Actions での CI

clippy(静的解析)、rustfmt(フォーマットチェック)、自動テストが実行されるように設定済みです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/e2dd0539-4f56-2b75-9c06-1da7faabd460.png)

### 自分好みにカスタマイズ

お好きにどうぞ～