###### tags: `vscode` # VSCode ハンズオン ## アジェンダ - Tech Party について - 今日のゴール - ハンズオンについて - VSCode について - 機能紹介 - ワークスペース - 画面構成 - 設定 - 拡張機能 - ハンズオン C言語プログラム開発 - Git 連携 - リモート開発機能 - デバッグ機能 - タスク ## Tech Party について ## 今日のゴール - VSCode について、ハンズオン参加前より詳しくなる。 - 基本的な機能について知る、調べ方について知る。 - トラブル・エラー発生時の調査方法を知る。 ## ハンズオンについて - ハンズオンとは - 体験学習を意味する教育用語。講師が講義をしながら、参加者も実際に操作を行い理解を深める方法です。 - 参加方法（一例） - ディスプレイが2画面ある人 - 左画面に Teams の画面と資料を表示し、右画面に VSCode を表示し操作を行う。 - ディスプレイが1画面の人 - 画面の左側上部に Teams の画面を表示し、左側下部に資料を表示する、右半分に VSCode を表示し操作を行う。 - 操作はしない人、ながら聞きの人 - 実際に体験することで身につくこともありますので、できれば一緒に操作をしながら参加してもらうことをおススメします。 - 意識してほしいこと - 話を聞くだけではなくて、自分の手を動かして理解すること。 - 複数のタスク（話を聞きながら、操作を行う）を同時並行で行うことに慣れる。 ## VSCode について - 公式ドキュメント - https://code.visualstudio.com/docs - 困ったらここを見る。 ## 機能紹介 ### ワークスペース - What is a VS Code "workspace"? - https://code.visualstudio.com/docs/editor/workspaces - ワークスペースとは何か？ > A Visual Studio Code workspace is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace. VSCode ウィンドウで開かれる1つ以上（ほとんどの場合は1つ）のフォルダをワークスペースと呼びます。 - ワークスペースでできること > The concept of a workspace enables VS Code to: - Configure settings that only apply to a specific folder or folders but not others. - Persist task and debugger launch configurations that are only valid in the context of that workspace. - Store and restore UI state associated with that workspace (for example, the files that are opened). - Selectively enable or disable extensions only for that workspace. - 特定のフォルダーのみに適用され、他のフォルダーには適用されない設定を構成します。 - そのワークスペースのコンテキストでのみ有効なタスクとデバッガの起動設定を保持します。 - そのワークスペースに関連付けられたUI状態（開かれているファイルなど）を保存および復元します。 - そのワークスペースに対してのみ拡張機能を選択的に有効または無効にします。 - ワークスペースの開き方 > You can open a workspace by using the File > Open Folder... menu, and then selecting a folder. [ファイル] > [フォルダーを開く…]メニューを使用してフォルダーを選択すると、ワークスペースを開くことができます。 ### 画面構成 - User Interface - https://code.visualstudio.com/docs/getstarted/userinterface - 画面構成 - 基本レイアウト - アクティビティバー - プライマリーサイドバー - エディターグループ - パネル - ステータスバー - ミニマップ - スティッキースクロール - パンくずリスト #### アクティビティバー - エクスプローラービュー - 検索ビュー - ソース管理ビュー - 実行とデバッグ - 拡張機能 ### 設定 - User and Workspace Settings - https://code.visualstudio.com/docs/getstarted/settings ### 拡張機能 - Extension Marketplace - https://code.visualstudio.com/docs/editor/extension-marketplace ## ハンズオン C言語プログラム開発 - C言語のサンプルプロジェクトを使用して、VSCode の便利な使い方を紹介します。 ### Git 連携 - Using Git source control in VS Code - https://code.visualstudio.com/docs/sourcecontrol/overview ### リモート開発機能 - VS Code Remote Development - https://code.visualstudio.com/docs/remote/remote-overview - Remote development over SSH - https://code.visualstudio.com/docs/remote/ssh-tutorial ### デバッグ機能 - Debugging - https://code.visualstudio.com/docs/editor/debugging ### タスク - Integrate with External Tools via Tasks - https://code.visualstudio.com/docs/editor/tasks