Better DevEx with VS Code (VS Code で試みる開発体験の向上)

Better Developer Experience with VS Code VS Code で試みる開発体験の向上 Tomomi Imura

Aloha! I am Tomomi Imura Principal Cloud Advocate at Microsoft @girlie_mac on Twitter @girliemac on GitHub 2

“ I love you but I hate you - 匿名 Teams アプリ開発者 3

Microsoft Teams Platform ⩥ 複数のテクノロジースタ ック(Azure, bot frameworks, Graph API など) ⩥ 初期設定が面倒 ⩥ 学習曲線が激しい Proficiency (Score) Teams の開発は簡単ではない Experience (hours) Learning Curve (Example, not actual!) 4

Example: Teams Bot Dev Flow M365 開発アカウント登録 Azure ユーザ登録 Azure AD でのアプリ登録 Bot Framework でのボット登録 App manifest (JSON) の作成と App ID を紐づけて アプリを設定 ⩥ コード & デバッグ ⩥ Teams クライアントでテスト ⩥ パブリッシュ ⩥ ⩥ ⩥ ⩥ ⩥ 5

“ I just hate you 🖕 - 匿名 Teams アプリ開発者 6

“ だけど VS Code は好き - 匿名 Teams アプリ開発者 7

Tools Developers Love OMG, we are so lucky to have ‘em!

Edge / DevTools VS Code Web Devs cannot live without いわゆるde-facto スタ ンダードと呼ばれる開 発ツールを持っていて ラッキー！ GitHub 9

Teams Toolkit for VS Code 開発者の苦悩を和らげるレスキュー！ 10

Teams Toolkit for VS Code 11

Teams Toolkit for VS Code アプリ雛形を 新規で作成 コード テンプレート 複数の dev env 12

Teams Toolkit for VS Code F5 13

Example: Teams Bot Dev Flow M365 開発アカウント登録 Azure ユーザ登録 Azure AD でのアプリ登録 Bot Framework でのボット登録 App manifest (JSON) の作成と App ID を紐づけて アプリを設定 ⩥ コード & デバッグ ⩥ Teams クライアントでテスト ⩥ パブリッシュ ⩥ ⩥ ⩥ ⩥ ⩥ 14

Dev Flow with Teams Toolkit 直感的な UI Tool / CLI アカウント・ログインの簡素化 Bot Framework へのボット登録の自動化 App ID と App manifest の紐付けと設定の自動化 雛形コード自動作成と、サンプルの充実 F5 での コードデバッグ F5 でアプリを Teams クライアントにインストール デプロイアシスト 15

More TeamsFx (共通機能を備えたライブラリ) 複数環境サポート コラボマネージメント ARM & Bicep を使った Azure プロビジョン CI/CD シナリオ・ベースの雛形アプリ Teams Toolkit for Visual Studio for .NET devs! 16

More VS Code Extensions by Microsoft 拡張機能で開発者体験をもっと豊かに ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ Azure Tools TypeScript intellisense ES Lint for VS Code integration Jupyter Notebook support Japanese Language Pack Edge DevTools for VS Code 社内向けツール 17

More VS Code Extensions by Microsoft 18

More with VS Code & GItHub I am bragging about cool stuff

VS Code & GitHub What’s New ⩥ ⩥ ⩥ ⩥ ⩥ Remote development Codespaces vscode.dev VS Code Server CoPilot 20

Release Timeline Remote Dev Codespaces Vscode.dev Copilot 2019 2020 2021 2021 2022 Remote Development GitHub Codespaces Vscode.dev GitHub Copilot VS Code Server VS Code Server 21

Remote Development ⩥ コンテナ ⊳ Docker ■ devcontainer.json でのコンテナの設定 ⩥ リモートマシン / VM ⊳ SSH ⩥ Windows Subsystem for Linux (WSL) 🔗 code.visualstudio.com/docs/remote/remote-overview 22

GitHub Codespaces ブラウザ、または VS Code で動くクラウドベース環境 🔗 github.com /features/codespaces 23

VSCode.dev – VS Code on Browser 🔗 vscode.dev 24

VS Code Server 自分の開発マシンを VS Code Server にして どこからでも vscode.dev で接続しよう 🔗 https://code.visualstudio.com/docs/remote/vscode-server 25

VS Code Server iPad 上でもコードができる! vscode.dev/+ms-vscode.remote-server/ My-app:8000/home/tomomi/… 26

GitHub Copilot 27

TikTok @vscode VS Code チームからの最新 ニュースや Tips & Tricks を TikTok でお届け 28

VS Code Roadmap github.com/microsoft/vscode/wiki/Roadmap 29

Mahalo! @girlie_mac 30