Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使い倒そう Visual Studio Code!!! ~ここからはじめる基本のキ~

2,330 views

Published on

2018/11/15のHTML5 Conference 2018の資料です。

Published in: Technology
  • Be the first to comment

使い倒そう Visual Studio Code!!! ~ここからはじめる基本のキ~

  1. 1. 使い倒そう VISUAL STUDIO CODE!!! ~ここからはじめる基本のキ~ さっくる (本間咲来) 日本マイクロソフト株式会社 SOFTWARE ENGINEER 2018/11/25 HTML5 Conference 2018
  2. 2. 仕事では Azure を使用した IoT、Data分析、 Serverless、Web 等の開発の技術支援 ♥ Visual Studio Code ♥ さっくる @sakkuru 本間咲来 / Saki Homma Software Engineer@Microsoft
  3. 3. VISUAL STUDIO CODE • オープンソースの無料のエディタ • マイクロソフトが開発 • マルチプラットフォーム(Win/Mac/Linux) • さまざまな言語、プラットフォーム向け開発が可能 • とにかく拡張機能がたくさん!!
  4. 4. https://marketplace.visualstudio.com/ 拡張機能の Marketplace
  5. 5. Microsoft が出している拡張
  6. 6. 2018/11/25 現在 10513個 2018/10/27 時点 10102個
  7. 7. Azure を便利に使える拡張たち
  8. 8. 本体もどんどん アップデート
  9. 9. https://code.visualstudio.com/updates
  10. 10. ここから全部デモ!! WEB アプリを作ってデプロイ
  11. 11. デモでやること 1. 基本機能の説明 2. 拡張のインストール 3. テーマの変更 3. 基本設定、拡張設定の変更 4. ユーザスニペット 5. デバッグ 6. Git 7. デプロイ 8. 設定の保存と移行
  12. 12. ここからはデモで!
  13. 13. GIT 連携機能
  14. 14. GIT DIFF 表示
  15. 15. GIT LOG 表示
  16. 16. GIT BLAME 表示 1
  17. 17. GIT BLAME 表示 2
  18. 18. リビジョンの比較
  19. 19. GITHUB ISSUES の確認
  20. 20. 定義の確認
  21. 21. F12で定義に移動、Ctrl+- で戻れる
  22. 22. 設定の保存と移行
  23. 23. Gist を経由して、設定ファイル軍を同期
  24. 24. • 基本機能の説明 • ワークスペース • ユーザスニペット • 定義の確認 • デバッガ・Git連携等 • 統合ターミナル • Webアプリの Azure へのデプロイ • 設定の移行方法 ここまで
  25. 25. VISUAL STUDIO CODE で 遠隔ペアプログラミング
  26. 26. • Visual Studio と Visual Studio Code 間でリアルタイム に共同作業ができる機能 VISUAL STUDIO LIVE SHARE https://code.visualstudio.com/visual-studio-live-share
  27. 27. • Visual Studio と Visual Studio Code 間でリアルタイム に共同作業ができる機能 VISUAL STUDIO LIVE SHARE https://code.visualstudio.com/visual-studio-live-share ここからはデモで!
  28. 28. まずは拡張機能を インストール
  29. 29. この Share メニューから すべてがはじまる
  30. 30. ターミナルも ローカルサーバもシェアできる!
  31. 31. VS LIVE SHAREでできること • コードのシェア • カーソル位置、選択位置のシェア • デバッグセッションのシェア • ターミナルのシェア • ローカルサーバのシェア • Visual Studio と Visual Studio Code で問題ない • OS 違っても問題ない
  32. 32. まとめ
  33. 33. まとめ • コーディングに関する機能・拡張はとても充実 • 設定の保存、移行も簡単に • デバッガや Git 連携 • 遠隔ペアプロも! • コードのシェアだけじゃない! • ターミナルやローカルサーバもシェアできる
  34. 34. Let’s code!
  35. 35. KEYCASTR(キー表示アプリ) https://github.com/keycastr/keycastr
  36. 36. その他参考資料 Visual Studio Code で快適開発生活 -拡張を作って公開しよう- https://www.slideshare.net/sakkuru/visual-studio-code-77025428

×