Visual Studio Codeの画面のあれこれ

Visual Studio Codeの画面構成や用語などを補足資料的に作成したものです

Transcript

1. Visual Studio Codeの
   画面のあれこれ
   日本仮想化技術株式会社
   VirtualTech.jp
   2023/01/12
   1
   

   View Slide

2. 目次
   ● アクティビティバー
   ○ エクスプローラー
   ○ 検索
   ○ ソース管理
   ○ 実行とデバッグ
   ○ 拡張機能
   ○ GitHub
   ● サイドバー
   ○ プライマリーサイドバー
   ○ セカンダリーサイドバー
   ● パネル
   ● ステータスバー
   ● コマンドパレット
   2
   

   View Slide

3. アクティビティバー - 全体
   3
   

   View Slide

4. View Slide

5. 上から順番に
   ● エクスプローラー
   ● 検索
   ● ソース管理
   ● 実行とデバッグ
   ● 拡張機能
   ● GitHub(拡張機能をインストールで有効)
   5
   

   View Slide

6. エクスプローラー
   6
   

   View Slide

7. 7
   次の4つのセクションで構成されています
   1. 開いているエディター
   2. フォルダー
   3. アウトライン
   4. タイムライン
   

   View Slide

8. ソース管理
   8
   

   View Slide

9. View Slide

10. 10
    次の4つのセクションで構成されています
    1. メニュー
    2. コミットメッセージ
    3. コミットボタン
    4. 変更したファイルとステージング中のファイル一覧
    

    View Slide

11. 11
    ファイル名にマウスオーバーするとステージしたり、
    変更を取り消したりすることができます
    「変更」のセクション上でも全体をまとめて追加することができます
    

    View Slide

12. 12
    基本的には複数のコミットを積んだ上で、プッシュすることが多いと思いますが、コミット &
    プッシュをすることもできます
    

    View Slide

13. 13
    左から順番に
    1. ファイルの表示形式 (一覧/ツリー)
    2. コミット
    3. プルリクエストを作成
    4. 更新
    5. (Git Graph拡張機能をインストール時に有効 )
    6. メニュー
    

    View Slide

14. 14
    「・・・」を押下することで Gitで使用できる主要な機能を実行す
    ることができます
    

    View Slide

15. プライマリーサイドバー
    15
    

    View Slide

16. View Slide

17. セカンダリーサイドバー
    17
    

    View Slide

18. View Slide

19. パネル
    19
    

    View Slide

20. View Slide

21. ステータスバー
    21
    

    View Slide

22. View Slide

23. コマンドパレット
    23
    

    View Slide

24. 24
    「⌘ Command」 + 「⇧ Shift」 + 「P」でコマンドパレットを表示できま
    す
    

    View Slide