Visual Studio Code

導入手順

インストール

公式Webサイトよりインストール。
https://code.visualstudio.com/

初期設定（日本語化）

  • 日本語化パック「Japanese Language Pack for Visual Studio Code」をインストールする。
    [Extensions（拡張機能）] → Marketplaceの検索欄に「Japanese」を入力して検索。
  • コマンドパレット（Ctrl＋Shift＋P）を起動して「Configure Display Language」を実行。日本語を意味する「ja」を選択する。

テキスト編集テクニック

  • 【選択範囲を追加してまとめて編集する】
    テキストを選択した状態で[Ctrl]＋[D]キーを押す → 同じテキストが追加選択される → 必要な分だけ[Ctrl]＋[D]キーを押す → [Esc]キーを押して選択範囲を解除する
  • 【行単位でテキストを編集する】
    移動させたい行にカーソルを置いて[Alt]+[↑]or[↓]キーを押す → 行が移動する
  • 【特定の行を上下にコピーする】
    コピーしたい行を選択 → [Alt]＋[Shift]＋[↑]or[↓]を押して行をコピーする
  • 【カーソルを複数の箇所に置く】
    編集を開始したい行にカーソルを置いて[Ctrl]＋[Alt]＋[↓]キーを押す → 次の行にもカーソルが表示される → 必要な分だけ[Ctrl]＋[Alt]＋[↓]キーを押す
  • 【ファイルの内容を比較】
    1つ目のファイルを右クリック – [比較対象の選択]をクリック → 2つ目のファイルを右クリック – [選択項目と比較]をクリック → 比較結果が表示される（差分がある場合は強調表示される）
  • 【矩形選択でインデントを維持したまま編集】
    インデントを整えて文字列が入力されている場合、選択を開始したい部分にマウスポインターを合わせる → [Shift]＋[Alt]キーを押したままドラッグして矩形選択

自分好みにカスタマイズする

文字の見た目を変更する

設定項目名説明
Editor: Font Familyフォントの種類を変更する
Editor: Font Sizeフォントのサイズを変更する
Editor: Font Height行の高さを変更する

ファイルを自動保存する

設定値説明
offファイルを自動保存しない（初期値）
afterDelay「Files: Auto Save Delay」で指定した時間が経過してから自動保存する
onFocusChangeエディターで操作しているファイルを切り替えると、自動保存する
onWindowChangeVSCodeからフォーカスが外れたとき（他のアプリを操作した時など）に自動保存する
Files: Auto Saveの設定値

カラーテーマを変更する

設定画面の「Workbench: Color theme」より変更できる。

JSONファイルから高度な設定を行う

  1. コマンドパレットで「setting」と検索し、コマンド「Preferences: Open Settings(JSON)」を実行する（ユーザー設定画面の右上に表示されている[設定(JSON)を開く]アイコンをクリックしてもsettings.jsonを開くことができる）
  2. settings.jsonが開くので、編集して保存する（何かしらの文字を入力するとコード補完機能で候補が表示され、設定IDや設定値にマウスポインターを合わせると説明がポップアップで表示される）

設定を他のパソコンと同期する

  1. MicrosoftアカウントかGitHubアカウントを作成する
  2. 同期元のパソコンで、GitHubアカウントとの連携設定を行う。[管理]ボタン – [設定の同期をオンにする]をクリック → 「サインインしてオンにする」をクリック → [Microsoft（GitHub）でサインイン]をクリック
  3. （以下、GitHubアカウントの場合）ブラウザが立ち上がり[Continue]をクリック → アカウント情報を入力して[Sign in]ボタンをクリック
  4. サインイン後、[Authorize github]をクリックして認証する。次の画面で表示される「このサイトは、Visual Studio…」のポップアップの[開く]をクリック
  5. 最後に「拡張機能がこのURIを開くことを許可しますか？」と聞かれるので、[開く]をクリックすればGitHubアカウントとの連携が完了する → VSCodeを再起動する
  6. 同期先のパソコンでも同様にGitHubアカウントにサインインして連携し、VSCodeを再起動すると、クラウド上に保存された同期元VSCodeの設定を取り込める。その際、「マージまたは置換」というダイアログが表示された場合は反映方法を選択する
  7. [アカウント] – [設定の同期がオン]をクリックすると、同期設定の管理をすることができる

標準機能

  • 【Emmet（エメット）】
    HTMLやCSSを日常的に編集するWeb制作者向けに開発された入力支援ツール
  • 【カラーピッカー】
    色を表す値を入力すると、左側にその色が表示された状態になる。さらに、この正方形にマウスポインターを合わせるとカラーピッカーが表示され、彩度・不透明度・色相をマウス操作で調整できる

拡張機能

Prettier（プリティア）

各行の終わりにセミコロンを入力しているか、インデントは適切に行われているかなどの観点から、ソースコードを自動で整形してくれるツール。
フォーマットしたいファイルを開いた状態で[Shift]＋[Alt]＋[F]キーを押すか、右クリック – [ドキュメントをフォーマット]でコードを整える。

Live Server

ローカル端末に簡易的なサーバーを立ち上げて、HTML/CSSファイルの内容が反映されたプレビューを即座に開いてくれる。
HTMLファイルをエディターで開いた状態で[Go Live]をクリックすると、ローカルサーバーが起動してHTMLとCSSの内容が反映されたWebページがブラウザで表示される（※フォルダーではなくHTMLファイルを単体で開いている状態では[Go Live]が表示されない）。

CSS Peek

CSSファイルで定義した内容をピーク表示できる拡張機能。HTMLファイルで要素に表示されているクラス名やid名を右クリック – [ピーク] – [定義をここに表示]をクリックすると、CSSファイルをピーク表示してエディターを切り替えずに定義を確認できる。その状態でCSSファイルを編集することもできる。
また、HTMLファイルを編集中に[Alt]キーを押しながらCSSクラスの部分にマウスポインターを合わせると、マウスポインターの形が変わって小さなウインドウで定義内容が表示（ホバー表示）される。

Image preview

画像のパスの部分にマウスポインターを合わせることでプレビューを表示したり、エディターの行番号の横に画像のサムネイルを表示したりすることで、画像の指定ミスを防ぐことができる。

Auto Rename Tag

タグ名の変更を自動化する。HTMLまたはXMLファイルで開始タグを修正すると、終了タグもそれに連動して編集される。（※拡張機能「Auto Close Tag」もあるが、VSCodeには終了タグを自動で入力する機能が標準で搭載されているため、こちらはインストールしなくてもよい）

HTML CSS Support

HTMLファイルが読み込んでいるCSSファイルの内容から、HTMLファイル上でclass属性、id属性の値を入力補完してくれる。（WordPressを利用している場合、拡張機能「WordPress Snippet」をインストールすれば、WordPressに実装されている関数の入力を補完してくれる）

Highlight Matching Tag

タグにフォーカスしている間、常に対応するタグが強調されるため、対応関係が一目瞭然になる。タグ名以外の場所を編集していても対応するタグが黄色の下線で強調される。（※下線の色は設定ファイル（settings.json）の「highlight-matching-tag.styles」で変更することができる）
また、VSCodeには、対応するブラケットをわかりやすく表示するために以下の2つの設定項目があるが、これらの設定は既定では無効になっている。これらの項目を有効にすると、ブラケットの対応関係も一目瞭然になる。

名前説明
editor.bracketPairColorization.enabled対応するブラケット同士を彩色して表示する。初期値はfalse
editor.guides.bracketPairsブラケットのペアを結ぶガイドを表示する。初期値はfalse
inserted by FC2 system