• はじめに
• 謝辞
• サポートページ

第1章：Visual Studio Code入門

1.1　Visual Studio Codeとは

• 誰でも，どこでも使える
• 高いカスタマイズ性を持つ

1.2　Visual Studio Codeの歴史

• 2011年〜：オンラインエディターとして誕生
• 2014年〜：オープンソースのデスクトップエディターへの転換
• 現在：オープンソースプロジェクトとして発展中
• これから：拡張機能の充実

1.3　Visual Studio Codeのインストール

• Windows
• macOS
• Linux
  • Debian GNU/Linux，Ubuntu
  • Red Hat Enterprise Linux，Fedora，CentOS
  • Snapパッケージ
• 日本語化

1.4　Visual Studio Codeのアップデート

• 毎日アップデートするVisual Studio Code Insiders

1.5　Visual Studio Codeの画面構成

• アクティビティバー，サイドバー ── よく使う機能の一覧
• ステータスバー ── ファイルのエラーや情報の表示
• パネル ── デバッグ情報，エラー，ターミナルの表示
• ミニマップ ── ファイルの全体像の表示

1.6　Visual Studio Codeの基本操作

• フォルダを開く
• ファイルの作成
• ファイルの保存

1.7　お勧めの情報リソース

• Twitter
• Visual Studio Codeコミュニティ
• 公式ドキュメント

1.8　まとめ

第2章：実践的な編集操作

2.1　コマンドやファイルへのアクセス

• コマンドパレット ── コマンドの実行
• クイックオープン ── ファイルのオープン

2.2　検索／置換

• 検索
• 置換
• クイック検索／クイック置換

2.3　ショートカットキー

• 汎用メニュー
• 編集／移動
• マルチカーソル ── カーソルや選択範囲の追加

2.4　コード補完

• インテリセンス ── 入力内容の予測
• コードスニペット ── 複数行のコードをまとめて入力
  • コードスニペットの自作
  • 外部変数を使ったコードスニペット

2.5　タスク管理 ── 外部ツールを使ったコマンドの登録

• タスクの生成
• タスクの実行

2.6　まとめ

第3章：UIや設定のカスタマイズ

3.1　Visual Studio CodeのUIのカスタマイズ

• アクティビティバー，サイドバー
• ステータスバー
• パネル
• ミニマップ
• タイトルバー

3.2　テーマのカスタマイズ

• 配色テーマ
  • GitHub Theme ── GitHub公式の人気No.1テーマ
  • One Dark Pro ── Atomデフォルトのテーマ
  • Dracula Official ── 紫色の派手なテーマ
  • Monokai Pro ── Sublime Text由来の黒と黄色のシンプルなテーマ
• ファイルアイコンテーマ

3.3　設定の編集

• 設定ファイル
• 日本語環境用設定
  • 日本語用等幅フォント
  • 句読点や全角スペースごとのカーソルジャンプ

3.4　まとめ

第4章：お勧めの拡張機能

4.1　拡張機能のインストール方法

4.2　言語機能の強化

• IntelliCode ── AIを使ったコード補完
• GitHub Copilot ── 最新のコード補完
• 各言語向けの拡張
• 各Webフレームワーク向けの拡張

4.3　執筆環境

• vscode-textlint，テキスト校正くん ── 細かな文法チェック
• novel-writer ── 縦書きや鉤括弧のハイライト
• Japanese Word Handler ── 日本語向けのカーソル移動
• markdownlint ── Markdownファイルを読みやすく

4.4　カスタマイズと拡張機能の注意点

4.5　まとめ

第5章：Git/GitHubによるバージョン管理

5.1　Hello Git

• Gitのインストール
• リポジトリの初期化 ── Gitでの管理を始める
• コミット ── 変更の保存
• コミットの取り消し
• ブランチの操作 ── 作業内容を分岐させる
  • ブランチの作成と切り替え
  • ブランチのマージ
  • コンフリクトの発生と解決
• そのほかのGit操作機能

5.2　GitHubでのバージョン管理

• GitHub Pull Request and Issuesのインストール ── GitHubと連携する拡張機能
• GitHubへのサインイン
• GitHubへのリポジトリのアップロード
• Pull RequestとIssueの管理 ── ブラウザを開かずにコードレビュー
  • Pull Requestの作成 ── ファイルの変更提案を送る
  • 作成したPull Request，Issueの確認
  • Pull Requestブランチのチェックアウト
  • Pull Requestのコメントとレビュー
• そのほかのGitHub連携機能
  • クローン ── オンライン上のリポジトリを取り込む
  • コメント文によるコミュニケーション ── 関係するユーザーの紐付けやIssueの自動作成

5.3　関連する拡張機能

• GitLens ── コードの作成者を表示する
• GitHub Repositories ── クローンせずにGitHubリポジトリを編集する

5.4　まとめ

第6章：JavaScript/TypeScriptによる開発

6.1　JavaScript/TypeScript環境のインストール

• Node.js ── JavaScript/TypeScriptの実行環境
• TypeScript
• JavaScript/TypeScript拡張機能
  • ESLint ── JavaScript/TypeScriptコードのチェック
  • Jest ── ユニットテスト用フレームワーク
  • Prettier ── JavaScript/TypeScriptコードの整形
  • npm Intellisense ── モジュール管理

6.2　Hello JavaScript

• JavaScript作業用フォルダの作成
• JavaScriptファイルの編集
• JavaScriptのコードチェック
  • ESLintによるコードチェック
  • Prettierによるコードの整形
• JavaScriptの実行
• JavaScriptのデバッグ
• JavaScriptのテスト
  • Jestのインストール
  • Jestコマンドの追加
  • JavaScriptコードのテスト

6.3　Hello TypeScript

• TypeScriptプロジェクトの作成
• TypeScriptファイルの編集
• TypeScriptのコードチェック
  • ESLintによるコードチェック
  • Prettierによるコードの整形
• TypeScriptのトランスパイルと実行
• TypeScriptのデバッグ
• TypeScriptのテスト
  • Jestのインストール
  • Jestコマンドの追加
  • TypeScriptコードのテスト

6.4　ReactによるWebアプリケーション開発

• Reactプロジェクトの作成
• Reactプロジェクトの開発
• Reactプロジェクトのコードチェック
  • ESLintによるコードチェック
  • Prettierによるコードの整形
• Reactプロジェクトのビルド，実行
• Reactプロジェクトのテスト

6.5　まとめ

第7章：Javaによる開発

7.1　Java環境のインストール

• Javaの拡張機能
  • Extension Pack for Java ── Java関連の拡張機能をまとめてインストール
  • SonarLint ── Javaコードのチェック
• JDK ── Java開発のプログラムセット

7.2　Hello Java

• Javaプロジェクトの作成
• Javaファイルの編集
• Javaのコードチェック
  • SonarLintによるコードチェック
  • Extension Pack for Javaによるコードの整形
• Javaの実行
• Javaのデバッグ
• Javaのテスト

7.3　Spring BootによるWebアプリケーション開発

• Spring Boot Extension Packのインストール
• Springプロジェクトの作成
• Springプロジェクトの開発
• Springプロジェクトの実行
• Springプロジェクトのテスト

7.4　まとめ

第8章：Pythonによる開発

8.1　Python環境のインストール

• Pythonインタプリタ
• Pylint ── Pythonコードのチェック
• autopep8 ── Pythonコードの整形
• Pythonの拡張機能
  • Python拡張機能 ── コード補完とPython関連の拡張機能をまとめてインストール

8.2　Hello Python

• Python作業用フォルダの作成
• Pythonファイルの編集
• Pythonのコードチェック
  • Pylintによるコードチェック
  • Pylanceによるコードチェック
  • autopep8によるコードの整形
• Pythonの実行
• Pythonのデバッグ
• Pythonのテスト

8.3　Jupyter Notebookによるデータ分析

• jupyterとmatplotlib，numpyのインストール
• Jupyter Notebook作業用フォルダの準備
• Jupyter Notebookファイルでの開発と実行
  • 開発
  • 実行
• Pythonファイルでの開発と実行
  • 開発
  • 実行
  • PythonファイルからJupyter Notebookファイルへの保存
• Jupyter Notebookのテスト

8.4　まとめ

第9章：拡張機能開発入門

9.1　拡張機能の自作

9.2　拡張機能の開発環境のインストール

• Yeoman ── ソースコードを自動生成するツール
• Visual Studio Code Extension Manager ── 拡張機能のパッケージ化ツール

9.3　Hello拡張機能

• 拡張機能プロジェクトの作成
• 拡張機能の編集
  • 利用しているAPI
• 拡張機能のコードチェック
• 拡張機能のビルド，実行
• 拡張機能のデバッグ
• 拡張機能のテスト

9.4　UI拡張によるショートカット機能の開発 ── よく使うコマンドをボタンで呼び出す

• UI拡張機能プロジェクトの作成
• ステータスバー表示の実装
  • 利用しているAPI
• エディターアクション表示の実装
• UI拡張機能のビルド，実行
• UI拡張機能のテスト

9.5　拡張機能の公開

• README.mdの作成
  • 紹介動画の作成
  • package.jsonの設定
• Marketplaceで公開
  • パーソナルアクセストークンの作成
  • 公開

9.6　まとめ

第10章：実践的な拡張機能開発

10.1　Language Server Protocolとは

• 複数エディターへの機能提供が可能
• 実装言語を選択可能
• 計算リソースの独立

10.2　Language Server Protocol拡張機能の開発環境のインストール

• Yo Language Server ── LSP拡張機能用のYeomanテンプレート

10.3　Hello Language Server Protocol

• Language Server Protocolプロジェクトの作成
• Language Serverプロジェクトのコードチェック
• Language Serverプロジェクトの管理ファイル
  • tsconfig.json ── TypeScriptのトランスパイル設定
  • package.json ── プロジェクトの設定
  • webpack.config.js ── webpackの設定
• サーバー側の実装
  • 利用しているAPI
• クライアント側の実装
  • 利用しているAPI
• サーバーとクライアントのビルド，実行
• サーバーとクライアントのデバッグ
  • LSPサーバーのログ収集
• サーバーとクライアントのテスト

10.4　リンター機能の開発 ── 辞書に追加したコードを自動修正

• リンタープロジェクトの作成
• 静的解析の警告機能の実装
• 自動修正機能の実装
  • 利用しているAPI
• リンター機能のビルド，実行
• リンター機能のテスト

10.5　コード補完機能の開発 ── よく使う単語をコード補完

• コード補完機能プロジェクトの作成
• コード補完機能の実装
  • 利用しているAPI
• コード補完機能のビルド，実行
• コード補完機能のテスト

10.6　まとめ

• 索引
• 著者プロフィール