VS Code Meetup #21 - もう一度知りたい基礎編 に参加したので学びをメモ

はじめに

2022.8.6の VS Code Meetup #21 - もう一度知りたい基礎編 に参加したので学びをメモします。

恐れ入りますが、私がMac環境なのでショートカットの記載などMacに限定して記載しているものが多いことをご了承ください。

また、一部、画像がないとテキストだけでは分かりづらかった箇所があり、スクリーンショットを撮らせていただきましたが問題が御座いましたらご指摘ください🙇‍♂️

自己紹介

• カスタマーサクセスで仕事ではほぼコーディングはしませんが、コーディングが大好きなので週末にちょっとだけ自分のサービス作ってます(勿論、VSCodeで)
• 昨年はPythonでの機械学習にハマっていましたが、モデル作っても表現の場がなく辛いので、今年は↑のサービス作りながらフロントエンドを学びはじめました。主にJavascript(TypeScript+React)で勉強がてら書いてます。
• Twitter、Facebook等でぜひつながってください。

ファイル操作、コーディングの基本 編 @74th

• screen-castモード

  • 押してるコマンドがわかるので勉強会などにおすすめの機能
  • コマンドパレットからscreencast Modeなどで有効・無効を切り替えできる

• ワークスペース、フォルダをドロップで開く

  • フォルダを選択してVSCodeにドロップすると開けて楽
    • 最初は信頼しますか、という画面がでる
    • ワークスペースの信頼で親のディレクトリを許可しちゃえばその配下は全て許可できる

• エクスプローラー(左のファイルツリー)のフィルタ

  • Command+F でフィルタ出来る
  • ファイルにもディレクトリにも効く

• 新規ファイル

  • エクスプローラーのディレクトリを直接右クリして新規ファイル作成が作成場所をミスらなくて良さそう

• コマンドパレット

  • Cmd+Pで開いてファイル探したりできる
    • 部分一致や曖昧検索も有効
    • ディレクトリも検索可能
      • ディレクトリ名 ファイル名 とすると絞り込み検索的なことが可能
  • Cmd+T
    • クラス名やオブジェクト名を対象に検索できる

• エクスプローラーからクリックで開くとファイル名が斜体で表示される

  • この状態は一時的に開いた状態、この状態であらたにファイルを開くとそのファイルが消えて新しいファイルが開かれる
  • ダブルクリックで開くと(一瞬斜体?)普通に開ける

• エディタ分割ができる

  • 

• 設定からfiles excludeで検索し、表示したくないファイルパターンを設定してエクスプローラーからファイルを非表示にすることができる

  • 個人メモ：こちら見てみましたが正規表現使って絞り込むとよいみたい

• 同様に設定からsearch excludeで検索の除外設定が可能

• 関数などの定義を表示することができる

  • F12を押して定義へ移動
  • Ctrl + -でジャンプ前に戻る
  • 全ての参照を検索、はエクスプローラーでファイルと参照箇所が表示される

• 関数などの名前をリネームする際には選択した状態でF2を押すと参照箇所も含め一気に変更可能

• パンくずリストを使うとアウトライン的に関数間など移動可能

• コンパイルエラーなどは問題パネルに表示される

• VSCodeの動作がおかしいときはコマンドパレットでreload windowでVSCode再読み込み

• その他

  • マウスのボタンに進むと戻るを割り当てると便利

Git操作 編 @makky12

• ソース管理

  • Ctrl+Shift+Gで表示できる

• 

• 「ブランチの発行」を押すとリモートリポジトリを作成できる

• 「GitHubに公開」でパブリック/プライベートどちらでも公開可能

• ソース管理上でステージング状態のものをマイナスを押すとステージ状態を解除できる

• コミット後に「変更の同期」をクリックするとプッシュ&プルできる

  • プッシュのみしたい場合はメニューから

• 

• 昨日のバージョンアップで3Wayマージエディタというものでコンフリクトを解消する機能も追加された(でもさほどわかりやすくない?)

• VSCodeからデフォルトではプルリクの作成はできない、GitHub Pull Request And Issuesという拡張機能でできるようになる

• おすすめ拡張機能

  • GitLens
    • 誰がいつ書いたのかソースコード上に表示してくれる
  • Git Graph
    • リポジトリの変更履歴をブランチツリーで表示できる(Gitクライアント的な感じ)
    • 

Live Share、Dev Container 編 @setoazusa

• リモートで開発ができて何が嬉しいか

  • クラウド上の資源を開発環境として使うことができる
  • アプリを動かす環境がLinuxだったら開発環境もLinuxに合わせるなどができる

• クラウド上の開発環境を使用する場合、必要に応じて開発環境をセットアップしたい

  • VSCodeのRemote ContainerとDocker Desktopを利用

  • 個人メモ：ホストの環境をリモートでも引き継ぐ方法はこちらがわかりやすかった

    • • ssh keyはホストから引き継げる
      • dotfilesが展開されることでシェル設定などが引き継げる
      • devcontainer.jsonに指定することでVSCodeの設定や拡張機能が引き継げる

• Remote ContainerとGithub CodeSpacesは互換あり

• Remote ContainerでサーバーのソースをLive Shareで皆で編集するのが便利!?

• Remote Docker on SSHとは

  • SSHで接続したLinuxホスト上のDockerコンテナにリモート接続する機能
  • この機能でDocker Desktopでホストのディスクをマウントしたときのパフォーマンス劣化の問題をクリア

• 人材育成のためのモブプロ環境の構築に利用したりしている

  •