『新改訂版VS Code実践ガイド』の 改訂要素からみるVS Codeの進化 Atsushi Morimoto (@74th) VS Code Meetup Organizer VS Code Meetup #27 2024-01-30

Atsushi Morimoto @74th ● 本職 データエンジニア・アーキテクト ● 『VS Codeデバッグ技術 2nd Edition』 （同人誌・技術書典11） ● RISC-V MCU開発ボード 『74th. CH32V203 ProMicro Like』 （スイッチサイエンス マーケットプレイス） ● 自作キーボード同人即売会 『キーケット』（2024/3/2）に出店

2024/1/25 改訂新版発売！ ● 2020年2月発売された 『Visual Studio Code実践ガイド』が 4年ぶりに改訂！ ● ページ数も大増量 第１版 416ページ → 改訂版 544ページ ● テーマ『基本機能だけでなく、実際の開発での使 い方の踏み込む』 ○ Go、TypeScript、Pythonの 3言語を解説 ○ 環境構築、リンター設定、ユニットテスト、デ バッグ実行他、開発時に使える機能をハン ズオンを通して解説。 ● 拡張機能の作り方や、LSPの解説も。

目次『第１部 Visual Studio Codeの基本』 ● 第1章：インストールと初期設定 —— Visual Studio Codeを使いはじめる ● 第2章：画面構成と基本機能 —— 直感的な画面に隠された多くの機能たち ● 第3章：ビューとコマンドパレット —— いろいろな情報を整理し，簡単に呼び出 す ● 第4章：Gitとの連携 —— 基本操作から便利な拡張機能まで ● 第5章：デバッグ機能 —— さまざまな言語のデバッグを直感的なUIで行う ● 第6章：そのほかの機能 —— タスク，リント，スニペット，ターミナル ● 第7章：リモート開発機能 —— 開発環境と実行環境の差分を埋める新機能 ● 第8章：GitHub連携／GitHub Codespaces —— GitHubと繋がった開発 環境とワークフロー ● 第9章：カスタマイズ —— 柔軟な設定項目，ショートカットでより使いやすく ● 第10章：拡張機能 —— 導入，管理，おすすめの拡張機能

目次『第１部 Visual Studio Codeの基本』 ● 第1章：インストールと初期設定 —— Visual Studio Codeを使いはじめる ● 第2章：画面構成と基本機能 —— 直感的な画面に隠された多くの機能たち ● 第3章：ビューとコマンドパレット —— いろいろな情報を整理し，簡単に呼び出 す ● 第4章：Gitとの連携 —— 基本操作から便利な拡張機能まで ● 第5章：デバッグ機能 —— さまざまな言語のデバッグを直感的なUIで行う ● 第6章：そのほかの機能 —— タスク，リント，スニペット，ターミナル ● 第7章：リモート開発機能 —— 開発環境と実行環境の差分を埋める新機能 ● 第8章：GitHub連携／GitHub Codespaces —— GitHubと繋がった開発 環境とワークフロー ● 第9章：カスタマイズ —— 柔軟な設定項目，ショートカットでより使いやすく ● 第10章：拡張機能 —— 導入，管理，おすすめの拡張機能 ※大きな改訂ポイント

リモート拡張機能 Dev Container ● コンテナの中で開発環境を動かす機能。 ● 4年前は出たところだった DevContainer が、今や定着した環境に。 ○ 昔： ■ 必要なツールのために、Dockerfile を作り込む ■ VS Codeの為の設定ファイル ○ 今： ■ Dev Container Featuresを導入する ■ VS Code以外での利用も考慮した設定ファイル

Dev Container Features ● Dev Containerに追加機能を 入れる為のパッケージ ● 設定に追加するとDev Containerビルド時にステップ が増える ● Dockerfileを作り込まなくて も、機能追加が容易に。 ● https://containers.dev/fe atures

GitHub連携 ● GitHub Pullrequest & Issue拡張機 能で、VS Code上でプルリクのレビュー が可能に。 ● WebUIではなく、言語機能がフルに使え るVS Codeなので、定義へのジャンプ や、参照先の一覧などが表示でき、プルリ クのレビューがかなり便利になった。 ● 去年前半まで不安定だったが、今やかなり 安定している。

GitHub Codespaces ● Dev Containerをクラウド上 で動かすことができる ● マシンスペックが欲しい時に 従量課金でさっと使える ● 自動終了の仕組みがある ● 設定同期しておけば、 自分の設定込みの環境が さくっと使える

お勧め拡張機能 GitHub Copilot ● AIがコーディングをアシスト ● こちらの意図を読んで、次に書く コードを予測してくれる ● Copilot Chatで エラーメッセージを説明したり、 修正させる機能が便利 （完璧ではない）

目次『第2部: 実際の開発でVisual Studio Codeを使う』 ● 第11章：GoでのWeb API開発 —— 各種の開発支援ツールと連携した拡張機能 ● 第12章：TypeScriptでの開発 —— デフォルトで使えるフロントエンド開発機能たち ● 第13章：Pythonでの開発とDockerコンテナの利用 —— Web API開発と環境分離テクニック ● 第14章：プログラムの開発にとどまらない活用 —— データ分析，ドキュメンテーション，構成管理

Docker拡張機能 ● Dockerコンテナのファイルシステムを ツリー表示できる ● デバッグ ”だけ” を、 Dockerコンテナの中で実行できる ○ やっぱり、実際にアプリを動かす環境はコン テナなのだから、 その環境でテストすることができる。 コンテナ デバッガ アプリ

プログラムの開発にとどまらない活用 ● Jupyter Notebook 対応 ○ ほぼフル機能のJupyter Notebook。 ○ VS Codeの拡張機能を、Jupyter Notebook内で使える感じ。 ● 構成管理ツールへの強化 ○ YAML補完の強化 ■ Kubernetesの設定ファイルがかける ○ Terraform公式拡張機能など、 ツールの公式拡張機能が出てきた

目次『第3部：拡張機能の開発とLSP』 ● 第15章：拡張機能開発の基本 —— Visual Studio Codeの拡張ポリシーとひな形の作成 ● 第16章：実践・拡張機能開発 —— テキスト編集，スニペット，リント，カラーテーマ, Web View ● 第17章：自作の拡張機能を公開する —— 広く使ってもらうために必要なさまざまな事項 ● 第18章：Language Server Protocol —— エディター拡張のための次世代プロトコル

WebViewの解放 ● これまではVS CodeのUI（サイドバーツ リー、ピッカーなど）に限った拡張しか作れ なかった。自由なUIを作れると、拡張機能 でVS Codeが重くなってしまう。 ● WebViewでは”かなり大きな制限”がある ものの、自由なUIを作ることができるよう になった。 ● 実は、タブを切り替えるだけで、WebView のHTMLやJSの変数は消滅する。 ● この辺りの制限や、状態保存の方法につい て、書籍にて解説！！ 拡張機能 Arduino 拡張機能 Draw.io

その他の改訂ポイント ● ワークスペーストラスト ● 検索エディター ● 設定同期、設定プロファイル ● Live Shareの使い方 ● VS Code for Webの使い方と、対応拡張 機能の作り方 ● Pythonのリンター等の設定方法 ● TypeScriptのリンター等の設定、デバッグ 実行方法 他多数

全国の書店にて発売中！！ 電子版(Kindle他)もあるよ！！ DRMフリー電子版（PDF、EPUB）も あるよ！！（Gihyo Digital Publishing） 紙書籍: 3,520円 PDF, EPUB: 3,200円 (Gihyo Digital Publishing)