1. 使い倒そう
VISUAL STUDIO CODE!!!
~ここからはじめる基本のキ~
さっくる (本間咲来)
日本マイクロソフト株式会社
SOFTWARE ENGINEER
2018/11/25 HTML5 Conference 2018

2. 仕事では Azure を使用した IoT、Data分析、
Serverless、Web 等の開発の技術支援
♥ Visual Studio Code ♥
さっくる @sakkuru
本間咲来 / Saki Homma
Software Engineer@Microsoft

4. VISUAL STUDIO CODE
• オープンソースの無料のエディタ
• マイクロソフトが開発
• マルチプラットフォーム(Win/Mac/Linux)
• さまざまな言語、プラットフォーム向け開発が可能
• とにかく拡張機能がたくさん！！

5. https://marketplace.visualstudio.com/
拡張機能の Marketplace

6. Microsoft が出している拡張

7. 2018/11/25 現在
10513個
2018/10/27 時点
10102個

8. Azure を便利に使える拡張たち

9. 本体もどんどん
アップデート

10. https://code.visualstudio.com/updates

11. ここから全部デモ!!
WEB アプリを作ってデプロイ

12. デモでやること
1. 基本機能の説明
2. 拡張のインストール
3. テーマの変更
3. 基本設定、拡張設定の変更
4. ユーザスニペット
5. デバッグ
6. Git
7. デプロイ
8. 設定の保存と移行

13. ここからはデモで！

14. GIT 連携機能

15. GIT DIFF 表示

16. GIT LOG 表示

17. GIT BLAME 表示 1

18. GIT BLAME 表示 2

19. リビジョンの比較

20. GITHUB ISSUES の確認

21. 定義の確認

22. F12で定義に移動、Ctrl+- で戻れる

23. 設定の保存と移行

24. Gist を経由して、設定ファイル軍を同期

25. • 基本機能の説明
• ワークスペース
• ユーザスニペット
• 定義の確認
• デバッガ・Git連携等
• 統合ターミナル
• Webアプリの Azure へのデプロイ
• 設定の移行方法
ここまで

26. VISUAL STUDIO CODE で
遠隔ペアプログラミング

27. • Visual Studio と Visual Studio Code 間でリアルタイム
に共同作業ができる機能
VISUAL STUDIO LIVE SHARE
https://code.visualstudio.com/visual-studio-live-share

28. • Visual Studio と Visual Studio Code 間でリアルタイム
に共同作業ができる機能
VISUAL STUDIO LIVE SHARE
https://code.visualstudio.com/visual-studio-live-share
ここからはデモで！

29. まずは拡張機能を
インストール

30. この Share メニューから
すべてがはじまる

31. ターミナルも
ローカルサーバもシェアできる！

32. VS LIVE SHAREでできること
• コードのシェア
• カーソル位置、選択位置のシェア
• デバッグセッションのシェア
• ターミナルのシェア
• ローカルサーバのシェア
• Visual Studio と Visual Studio Code で問題ない
• OS 違っても問題ない

33. まとめ

34. まとめ
• コーディングに関する機能・拡張はとても充実
• 設定の保存、移行も簡単に
• デバッガや Git 連携
• 遠隔ペアプロも！
• コードのシェアだけじゃない！
• ターミナルやローカルサーバもシェアできる

35. Let’s code!

36. KEYCASTR（キー表示アプリ）
https://github.com/keycastr/keycastr

37. その他参考資料
Visual Studio Code で快適開発生活 -拡張を作って公開しよう-
https://www.slideshare.net/sakkuru/visual-studio-code-77025428