書籍概要

WEB+DB PRESS plus

毎日使える! Visual Studio Code
──実践的な操作、言語ごとの開発環境、拡張機能開発

著者
発売日
更新日

概要

プログラマーの仕事道具と言えばプログラミングエディターです。Microsoftが開発したVisual Studio Codeは,現在最も人気のあるエディターです。本書では,日々のコーディングでVisual Studio Codeを使いこなすための方法を解説します。

Visual Studio Codeの最大の特徴は,高いカスタマイズ性と豊富な拡張機能です。Visual Studio Codeが持つ機能はたくさんありますが,それらの全体像を把握することは困難です。そこで本書では,操作方法,言語ごとの開発環境の構築,拡張機能開発の大きく3つに分けて,Visual Studio Codeの使い方を網羅的に説明します。

こんな方におすすめ

  • Visual Studio Codeを使いこなしたい方
  • Visual Studio Codeの拡張機能を作りたい方

目次

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

第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 まとめ

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

サポート

ダウンロード

本書のサンプルファイルを圧縮ファイル形式でダウンロードできます。適宜展開してご利用ください。

(2023年6月8日更新)

ダウンロード
サンプルファイル(vscode-everyday.zip)

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

(2023年11月27日最終更新)

P.7 「Debian GNU/Linux,Ubuntu」の1段落3行目

執筆時点のファイル名はcode_1.76.2-1678817801_amd64.depでした。
執筆時点のファイル名はcode_1.76.2-1678817801_amd64.debでした。

P.8 上から2行目

$ sudo apt install ./code_1.76.2-1678817801_amd64.dep
$ sudo apt install ./code_1.76.2-1678817801_amd64.deb

P.14 上から3行目

パネルは、Ctrl+`(macOS:control+`)
パネルは、Ctrl+@(macOS:control+`)

P.63 注5

Gitコマンドを使って操作する場合は、Ctrl+`(macOS:control+`)で呼び出した...
Gitコマンドを使って操作する場合は、Ctrl+@(macOS:control+`)で呼び出した...

商品一覧