『新改訂版VS Code実践ガイド』の 改訂要素からみるVS Codeの進化

VS Code Meetup #27
https://www.youtube.com/live/2YH3mhkkJcw?si=kVrBpIV5HZ7K9HZe&t=1385

『改訂新版Visual Studio Code 実践ガイド』販売中
https://gihyo.jp/book/2024/978-4-297-13909-4

Transcript

1. 『新改訂版VS Code実践ガイド』の 改訂要素からみるVS Codeの進化 Atsushi Morimoto (@74th) VS Code Meetup Organizer VS Code Meetup #27 2024-01-30
2. Atsushi Morimoto @74th • 本職 データエンジニア・アーキテクト • 『VS Codeデバッグ技術 2nd Edition』 （同人誌・技術書典11） • RISC-V MCU開発ボード 『74th. CH32V203 ProMicro Like』 （スイッチサイエンス マーケットプレイス） • 自作キーボード同人即売会 『キーケット』（2024/3/2）に出店
3. 2024/1/25 改訂新版発売！ • 2020年2月発売された 『Visual Studio Code実践ガイド』が 4年ぶりに改訂！ • ページ数も大増量 第１版 416ページ → 改訂版 544ページ • テーマ『基本機能だけでなく、実際の開発での使 い方の踏み込む』 ◦ Go、TypeScript、Pythonの 3言語を解説 ◦ 環境構築、リンター設定、ユニットテスト、デ バッグ実行他、開発時に使える機能をハン ズオンを通して解説。 • 拡張機能の作り方や、LSPの解説も。
4. 目次『第１部 Visual Studio Codeの基本』 • 第1章：インストールと初期設定 —— Visual Studio Codeを使いはじめる • 第2章：画面構成と基本機能 —— 直感的な画面に隠された多くの機能たち • 第3章：ビューとコマンドパレット —— いろいろな情報を整理し，簡単に呼び出 す • 第4章：Gitとの連携 —— 基本操作から便利な拡張機能まで • 第5章：デバッグ機能 —— さまざまな言語のデバッグを直感的なUIで行う • 第6章：そのほかの機能 —— タスク，リント，スニペット，ターミナル • 第7章：リモート開発機能 —— 開発環境と実行環境の差分を埋める新機能 • 第8章：GitHub連携／GitHub Codespaces —— GitHubと繋がった開発 環境とワークフロー • 第9章：カスタマイズ —— 柔軟な設定項目，ショートカットでより使いやすく • 第10章：拡張機能 —— 導入，管理，おすすめの拡張機能
5. 目次『第１部 Visual Studio Codeの基本』 • 第1章：インストールと初期設定 —— Visual Studio Codeを使いはじめる • 第2章：画面構成と基本機能 —— 直感的な画面に隠された多くの機能たち • 第3章：ビューとコマンドパレット —— いろいろな情報を整理し，簡単に呼び出 す • 第4章：Gitとの連携 —— 基本操作から便利な拡張機能まで • 第5章：デバッグ機能 —— さまざまな言語のデバッグを直感的なUIで行う • 第6章：そのほかの機能 —— タスク，リント，スニペット，ターミナル • 第7章：リモート開発機能 —— 開発環境と実行環境の差分を埋める新機能 • 第8章：GitHub連携／GitHub Codespaces —— GitHubと繋がった開発 環境とワークフロー • 第9章：カスタマイズ —— 柔軟な設定項目，ショートカットでより使いやすく • 第10章：拡張機能 —— 導入，管理，おすすめの拡張機能 ※大きな改訂ポイント
6. リモート拡張機能 Dev Container • コンテナの中で開発環境を動かす機能。 • 4年前は出たところだった DevContainer が、今や定着した環境に。 ◦ 昔： ▪ 必要なツールのために、Dockerfile を作り込む ▪ VS Codeの為の設定ファイル ◦ 今： ▪ Dev Container Featuresを導入する ▪ VS Code以外での利用も考慮した設定ファイル
7. Dev Container Features • Dev Containerに追加機能を 入れる為のパッケージ • 設定に追加するとDev Containerビルド時にステップ が増える • Dockerfileを作り込まなくて も、機能追加が容易に。 • https://containers.dev/fe atures
8. GitHub連携 • GitHub Pullrequest & Issue拡張機 能で、VS Code上でプルリクのレビュー が可能に。 • WebUIではなく、言語機能がフルに使え るVS Codeなので、定義へのジャンプ や、参照先の一覧などが表示でき、プルリ クのレビューがかなり便利になった。 • 去年前半まで不安定だったが、今やかなり 安定している。
9. GitHub Codespaces • Dev Containerをクラウド上 で動かすことができる • マシンスペックが欲しい時に 従量課金でさっと使える • 自動終了の仕組みがある • 設定同期しておけば、 自分の設定込みの環境が さくっと使える
10. お勧め拡張機能 GitHub Copilot • AIがコーディングをアシスト • こちらの意図を読んで、次に書く コードを予測してくれる • Copilot Chatで エラーメッセージを説明したり、 修正させる機能が便利 （完璧ではない）
11. 目次『第2部: 実際の開発でVisual Studio Codeを使う』 • 第11章：GoでのWeb API開発 —— 各種の開発支援ツールと連携した拡張機能 • 第12章：TypeScriptでの開発 —— デフォルトで使えるフロントエンド開発機能たち • 第13章：Pythonでの開発とDockerコンテナの利用 —— Web API開発と環境分離テクニック • 第14章：プログラムの開発にとどまらない活用 —— データ分析，ドキュメンテーション，構成管理
12. Docker拡張機能 • Dockerコンテナのファイルシステムを ツリー表示できる • デバッグ ”だけ” を、 Dockerコンテナの中で実行できる ◦ やっぱり、実際にアプリを動かす環境はコン テナなのだから、 その環境でテストすることができる。 コンテナ デバッガ アプリ
13. プログラムの開発にとどまらない活用 • Jupyter Notebook 対応 ◦ ほぼフル機能のJupyter Notebook。 ◦ VS Codeの拡張機能を、Jupyter Notebook内で使える感じ。 • 構成管理ツールへの強化 ◦ YAML補完の強化 ▪ Kubernetesの設定ファイルがかける ◦ Terraform公式拡張機能など、 ツールの公式拡張機能が出てきた
14. 目次『第3部：拡張機能の開発とLSP』 • 第15章：拡張機能開発の基本 —— Visual Studio Codeの拡張ポリシーとひな形の作成 • 第16章：実践・拡張機能開発 —— テキスト編集，スニペット，リント，カラーテーマ, Web View • 第17章：自作の拡張機能を公開する —— 広く使ってもらうために必要なさまざまな事項 • 第18章：Language Server Protocol —— エディター拡張のための次世代プロトコル
15. WebViewの解放 • これまではVS CodeのUI（サイドバーツ リー、ピッカーなど）に限った拡張しか作れ なかった。自由なUIを作れると、拡張機能 でVS Codeが重くなってしまう。 • WebViewでは”かなり大きな制限”がある ものの、自由なUIを作ることができるよう になった。 • 実は、タブを切り替えるだけで、WebView のHTMLやJSの変数は消滅する。 • この辺りの制限や、状態保存の方法につい て、書籍にて解説！！ 拡張機能 Arduino 拡張機能 Draw.io
16. その他の改訂ポイント • ワークスペーストラスト • 検索エディター • 設定同期、設定プロファイル • Live Shareの使い方 • VS Code for Webの使い方と、対応拡張 機能の作り方 • Pythonのリンター等の設定方法 • TypeScriptのリンター等の設定、デバッグ 実行方法 他多数
17. 全国の書店にて発売中！！ 電子版(Kindle他)もあるよ！！ DRMフリー電子版（PDF、EPUB）も あるよ！！（Gihyo Digital Publishing） 紙書籍: 3,520円 PDF, EPUB: 3,200円 (Gihyo Digital Publishing)