Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方
インプレス
著者：リブロワークス
はじめに
CHAPTER1 VSCodeを導入しよう
01 コードエディターの新定番、Visual Studio Code
IDEより軽く、過去のエディターより高機能
VSCodeは最新技術トレンド全部入り？
紆余曲折もあったスタンダードまでの道のり
02 VSCodeをインストールする
Webサイトからダウンロード
Windows版のインストール手順
macOS版のインストール手順
03 初期設定を行う
日本語化パックをインストールする
コマンドパレットから表示言語を切り替える
設定画面を開く
04 VSCodeの画面構成
画面の5つの領域
アクティビティバー
サイドバー
エディター
MiniMapでファイル全体を確認
Zenモードでファイル編集に集中
05 ステータスバーでファイルの設定を行う
ステータスバーに表示される情報
文字コードを指定してファイルを開く／保存する
インデントの方法を変更する
CHAPTER2 基本的なファイル編集をしてみよう
01 フォルダー、ファイルを開いて編集する
フォルダーを開く
フォルダー内のファイルを開く
新しいファイルを作成する
直前に編集していたフォルダーを再度開く
フォルダー、ファイルに関するその他の操作
02 ワークスペースで複数のフォルダーを開く
ワークスペースで複数のフォルダーを1つにまとめる
ワークスペースを保存する
保存したワークスペースをもう一度開く
03 テキスト編集に役立つ必須テクニック
選択範囲を追加してまとめて編集する
行単位でテキストを編集する
カーソルを複数の箇所におく
ファイルの内容を比較
矩形選択でインデントを維持したまま編集
04 Markdownファイルを編集する
Markdown記法で手軽にテキストを構造化する
Markdownファイルを作成してプレビューを表示する
文字の強調、リスト、テーブルをMarkdown記法で表現する
画像を表示する
05 検索・置換を使いこなす
1ファイルの中で検索・置換する
検索ビューで複数のファイルからまとめて検索
ファイルを横断して文字列を置換
検索・置換の対象にするファイルを絞り込む
正規表現を使って検索する
CHAPTER3 設定とカスタマイズを理解しよう
01 VSCodeでどんなことができるか検索する
コマンドパレットを使う
よく使うコマンド
02 VSCodeを自分好みにカスタマイズする
おすすめの設定項目
文字の見た目を変更する
行番号の表示方法を変更する
ファイルを自動保存する
カラーテーマを変更する
03 ワークスペースごとに設定を切り替える
VSCodeにおける「設定」について
ユーザー設定とは
ワークスペース設定を開く方法
フォルダー設定を開く方法
3つの設定の関係と優先度
ワークスペースごとにカラーテーマを変えてみる
04 JSONファイルから高度な設定を行う
JSONとは
設定画面とsettings.jsonの関係
setting.jsonの編集方法
setting.json編集に関する便利な機能
05 設定をほかのパソコンと同期する
Settings Syncとは
同期元のパソコンでの操作
同期先のパソコンでの操作
同期設定を管理する
06 定番の操作をショートカットキーに登録する
ショートカット一覧を調べる
オリジナルのショートカットを設定する
07 拡張機能を導入する
拡張機能とは
拡張機能のインストール方法
拡張機能のレコメンド
08 拡張機能を管理する
拡張機能を無効化・アンインストールする
最読み込みが必要になる場合
拡張機能を更新する
拡張機能についての注意事項
CHAPTER4 Web制作に最適化しよう
01 HTML、CSS編集に役立つ標準機能
EmmetでWebページの雛形を一瞬で作成
Emmet：HTMLタグを追加
Emmet：複数の要素を一度に追加
カラーピッカーで色を選択する
02 Prettierでコードを整える
Prettierを使ってコードをフォーマット
フォーマットの設定を変更する
設定ファイルを作成する
言語ごとにフォーマットの設定を変える
ファイル保存時に自動でフォーマットを行う
03 HTMLファイルをリアルタイムでプレビューする
Live Serverで簡易ローカルサーバーを構築
ライブリロードでブラウザを自動再読み込み
ローカルサーバーを停止する
04 CSSとHTMLを自在に行き来する
CSS PeekでCSSファイルの定義をピーク表示
CSSファイルの定義部分に素早く移動
CSSの定義内容をホバー表示
05 エディター上で画像をプレビューする
Image previewで画像をサムネイル表示
画像ファイルのパスからプレビュー表示
画像プレビューの最大サイズを変更する
06 コードを見やすくする機能
Auto Rename Tagで終了タグも自動で修正
HTML CSS SupportでCSSクラスを入力補完
07 コードを見やすくする機能
Highlight Matching Tagで対応するタグを見やすくする
対応するブラケットを強調する
CHAPTER5 プログラミングに最適化しよう
01 プログラミングに役立つテクニック
Intellisenseのコード補完を活用する
コード補完をより便利に使う
クイック情報を閲覧
言語拡張機能で対応する言語を増やす
プログラミングに役立つコマンド
02 コード補完きのうカスタマイズする
スニペット補完に関する設定
候補の選択に関する設定
03 スペニットをもっと活用する
拡張機能で言語に特化したスペニットを増やす
独自のスニペットを作成する
04 ファイルをまたいで定義・参照を自在に行き来する
クイックオープンで目的のファイルを素早く開く
定義を確認する
参照を確認する
05 コードを改善するためのテクニック
クイックフィックスの提案を受け入れる
クイックフィックスで処理を関数化
シンボル名の変更
06 デバッグの基本
デバッグできる言語
JavaScriptファイルをデバッグする
デバッグ中に行えるアクション
Pythonファイルをデバッグする
ステップ実行の種類
07 デバッグ中にプログラムの詳細を確認する
デバッグビューに表示される情報
ブレークポイントを編集
CHAPTER6 VSCodeからGitを使ってみよう
01 バージョン管理システムGit
Gitの特徴とメリット
バージョン管理の基礎知識
GitとGitHub
VSCodeのソース管理ビューでできること
02 Gitの利用準備をする
Gitソフトウェアのインストール
GitHubアカウントを作成する
GitとGitHubのユーザー名を合わせる
03 ローカルリポジトリを作成する
Git Bashを使ってローカルリポジトリを作る
VSCodeでローカルリポジトリを開く
04 ローカルリポジトリ上で作業する
ファイルを作成してコミットする
ファイルを編集してコミットする
タイムラインで変更履歴を確認する
複数の変更をまとめてコミットする
コミット前の変更を破棄する
前回のコミットを取り消す
05 ローカルリポジトリをGitHubに発行する
VSCodeとGitHubを連携する
ローカルリポジトリをGitHubに発行する
06 リモートリポジトリをクローンする
GitHubからクローンする
リモートリポジトリ側の変更をプルする
ローカルリポジトリ側の変更のプッシュする
07 コンフリクトを解消する
コンフリクトとは
コンフリクトを解消する
08 ブランチでコミット履歴を枝分かれさせる
ブランチを作成する
ブランチをマージする
09 プルリクエストを利用してブランチをマージする
プルリクエストとは
プルリクエストを作成する
提案された変更をレビューする
レビューコメントに対応する
プルリクエストをマージする
10 GitLens拡張機能でさらにGitを便利する
GitLens拡張機能でできること
コミット履歴を確認する
ブランチ一覧を表示する
コミットを検索する
行ごとに変更情報を表示する
11 オンライン版VSCodeを利用する
デスクトップ版とほとんど同じ機能を持つオンライン版
オンライン版でパソコン内のファイルを編集する
オンライン版でGitHubのリポジトリを開く
リモートリポジトリの直接ファイル編集に最適
Appendix
主なショートカット一覧
主な設定一覧
索引