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

A presentation at Post.DEV in October 2022 in Tokyo, Japan by Tomomi ❤ Imura

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

Tomomi ❤ Imura
@girliemac

1 / 30

Visual Studio Code はエンジニアのみなさんでしたら、とても馴染み深い印象をもたれているのではないでしょうか？現在、私はマイクロソフト社で Developer Advocate として VS Code 開発チームとも一緒に働いています。今回は Developer Experience の観点から、マイクロソフトの開発者たちと試みた取り組みに関してご紹介します。今回の試みでは、開発者の体験をより良いものにし、モチベーションを上げるために、開発者ならば誰もが好きな VS Code のエクステンションを使ったアイデアを実施しました。また、技術的な観点から VS Code の新機能や、これからの取り組みについてもお話ししたいと思っています。