「Visual Studio Code 完全入門」を読んだ

投稿時刻2023年10月18日 15:34

「Visual Studio Code 完全入門 Web クリエイター & エンジニアの作業がはかどる新世代エディターの操り方」を 2,023 年 10 月 13 日に読んだ。

目次

メモ

ワークスペースで複数のフォルダーを開く p46

ワークスペースで複数のフォルダーを1つにまとめる
フォルダーを開く方法では、複数のファイルをエディターで開くことができる一方でフォルダーは1つしか開けません。
開きたいフォルダーが複数ある場合は、ワークスペースという機能を使いましょう。

ワークスペースはフォルダーを管理するための機能で、1つのワークスペースには別々の場所にある複数のファイルやフォルダーを含めることができます。

たとえば、複数の開発プロジェクトに所属している人が、
プロジェクトごとに必要なファイルやフォルダーを1つにまとめて管理したい場合、ワークスペースを使うとよいでしょう。

また、 CHAPTER 3 で詳しく説明しますが、ワークスペースごとに設定を変更できるので、
プロジェクトを混同しないようにエディターの見た目を変えたり、プロジェクトごとに異なるルールでソースコードを編集したりすることも可能です。

新しいワークスペースを作成するにはまず、
メニューバーから [ファイル] - [フォルダーをワークスペースに追加] をクリックして、最初に追加するフォルダーを選択します。

ワークスペースを作成したあと、もう一度 [フォルダーをワークスペースに追加] を実行して別のフォルダーを選択すると、
複数のフォルダーを1つのワークスペースに含めることができます。

複数のフォルダーをまとめたワークスペースをマルチルートワークスペースといい、
編集したファイルが複数のフォルダーに散らばっている場合や、別のプロジェクトで作成したファイルを参考にしたい場合などはマルチルートワークスペースを作成すると便利です。

ワークスペースを保存する p48

ワークスペースを作成したあとは、
そこに含まれるフォルダーの情報やワークスペースごとに設定した内容を .code-workspace という拡張子のファイルとして保存できます。
ワークスペースをファイルとして保存するには、メニューバーから [ファイル] - [名前を付けてワークスペースを保存] をクリックします。

保存したワークスペースをもう一度開く p49

一度保存したワークスペースは、ファイルを開いて簡単に呼び出せます。
ワークスペースをファイルとして開くには、メニューバーの [ファイル] - [ファイルでワークスペースを開く] をクリックするか Ctrl + O キーを押して、開きたい .code-workspace ファイルを選択します。

ファイルを自動保存する p82

「Files: Auto Save」という設定項目をデフォルトから変更すると、
編集したファイルが自動的に保存されるため保存し忘れることがなくなります。

Files: Auto Save の設定値
設定値 説明
off ファイルを自動保存しない (デフォルト)
afterDelay 「Files: Auto Save Delay」で指定した時間が経過してから自動保存する
onFocusChange エディターで操作しているファイルを切り替えると、自動保存する (P.25 参照)
onWindowChange VSCodeからフォーカスが外れたとき (ほかのアプリを操作したときなど)に自動保存する

「Files: Auto Save」の設定値が 「after Delay」 である場合、
「Files: Auto Save Delay」で設定した時間が経過したあと保存します。

単位はミリ秒であることに注意してください。
デフォルトは1000になっていますが、自分の好きな時間に変更できます。

同期先のパソコンでの操作 p106

同期先のパソコンでも同様に GitHub アカウントにサインインして連携し、
VSCode を再起動すると、クラウド上に保存された同期元 VSCode の設定を取り込めます。

その際、次のようなダイアログが表示されることがあります。
このダイアログは、同期元と同期先で設定値が異なっている (コンフリクトしている) 場合に表示されます。
同期元の設定をすべて反映させたいのか、一部だけ反映させたいのかによって選ぶべきボタンが変わります。
下表を参考に選択してください。

ダイアログの選択肢
選択肢 説明
マージ クラウド上の設定とローカルの設定をマージ (統合) する
ローカルを置換 クラウド上の設定でローカルの設定を書き換える
手動でマージする クラウド上の設定とローカルの設定を手動でマージする

なお、 [手動でマージする] を選択すると次のような画面が表示され、
クラウドの設定とローカルの設定どちらを受け入れるか1つ1つ設定することができます。

Prettierでコードを整える p126

Prettierを使ってコードをフォーマット
各行の終わりにセミコロンを入力しているか、インデントは適切に行われているかなどの観点から、ソースコードを自動で整形してくれるツールをフォーマッ夕といいます。

VSCodeの拡張機能にはさまざまな種類のフォーマッタがありますが、
Prettier (プリティア) はJavaScript、TypeScript、JSON、CSS、HTML、Markdownをはじめとして多くの言語に対応しているため、Web制作者に限らず多くのソフトウェア開発者に愛用されています。

Prettierを使ってコードをフォーマットするには、
まず拡張機能「Prettier - Code formatter」を Marketplace からインストールします (P.112 参照)。

続いて、設定画面から「Editor: Default Formatter」(デフォルトのフォーマッタ) を 「Prettier - Code formatter」に変更します。

これで、Prettierでコードをフォーマットする準備ができました。
フォーマットしたいファイルを開いた状態でショートカットを押すか、右クリック [ドキュメントをフォーマット] でコードを整えます。

ファイル保存時に自動でフォーマットを行う p131

設定画面で「Editor: Format On Save」にチェックを入れると、ファイル保存時に自動でフォーマットを実行します。
フォーマットをし忘れることがなくなるので、常にコードが整った状態を維持できます。

自動フォーマットに関するその他の設定項目
名前 説明

Editor: Format On Save Mode
保存時に自動でフォーマットする範囲を設定する。
「file」ならファイル全体、「modification」ならソース管理ツール (P.196 参照) で検出された変更箇所のみ。

Editor: Format On Paste
ファイルにソースを貼り付けたときに自動でフォーマット。
既存のコードを利用する際などに役立つ。

Editor: Format On Type
行の終端文字(セミコロンなど)を入力したときに自動でフォーマット。

CSS HTML 自在に行き来する p136

CSS Peek で CSSファイルでの定義をピーク表示
VSCode を含め、多くの統合開発環境には、プログラムの開発中に別ファイルで定義されている関数の定義をミニウィンドウで表示するピーク表示 (P.172参照) という機能があります。

CSS Peek は、CSSファイルで定義した内容をピーク表示できる拡張機能です。
これをインストールすることで、HTMLファイルとCSSファイルをエディター上でスムーズに行き来しながらフロントエンド開発が行えます。

エディター上で画像をプレビューする p140

HTML ファイルで画像ファイルのパスを指定するとき、 同じフォルダーにある別の画像ファイルを指定してしまってもエラーなどが表示されないため、
通常は Live Server (P.132 参照) のプレビューなどで正しい画像を指定できているか目視で確認する必要があります。

そんな画像の確認を、エディター上だけで行えるようにしてくれるのが、拡張機能 Image preview です。
画像のパス部分にマウスポインターを合わせることでプレビューを表示したり、エディターの行番号の横に画像のサムネイルを表示したりすることで、画像の指定ミスを防ぎます。

コード入力に役立つ機能 p144

Auto Rename Tagで終了タグも自動で修正
HTMLやXML形式のファイルを編集しているとき、見出しを本文に変えるなどの目的でタグ名を変更する場面がよくあります。
その場合、対応する開始タグと終了タグをコードの中から探し出し、両方を編集しなければならないため、これを忘れてエラーが発生することが少なくありません。

拡張機能 Auto Rename Tag は、名前のとおりタグ名の変更を自動化します。
インストールしたあと、HTMLまたはXMLファイルで開始タグを修正すると、終了タグもそれに連動して編集されます。

HTML CSS Support で CSS クラスを入力補完 p146

HTMLを編集する際、要素のid属性、class属性の値を打ち間違えてしまうと、思ったようにスタイルが適用されません。

拡張機能 HTML CSS Support は、 HTML ファイルが読み込んでいる CSS ファイルの内容から、
HTML ファイル上でclass属性、id属性の値を入力補完してくれる機能です。

WordPress 環境なら 「WordPress Snippet」 もおすすめ p147

Webサイトのコンテンツ管理に WordPress を利用している場合は、拡張機能 WordPress Snippet をインストールしておくとよいでしょう。
WordPress に実装されている関数の入力を補完してくれるので、快適にコーディングできます。

コードを見やすくする機能 p148

Highlight Matching Tag で対応するタグを見やすくする
HTML ファイルの編集中、開始タグと終了タグの対応関係がわかりにくくなることがよくあります。
特にdiv要素を多用するような場合は、どの開始タグとどの終了タグが対応しているのかがひと目ではわからず混乱してしまいがちです。

VSCode では、上の画面のようにタグ名にフォーカスがおかれているときに対応するタグがグレーでハイライトされますが、
さらにわかりやすく開始タグと終了タグのペアを強調してくれる拡張機能がHighlight Matching Tag です。

この機能をインストールすると、タグにフォーカスしているあいだ、常に対応するタグが強調されるので、対応関係が一目瞭然になります。

対応するブラケットを強調する p150

JavaScript などのプログラム言語では、()や{}などのブラケット記号を使ってコードが階層化されていますが、
複雑な条件分岐などを書いていると、ブラケットの入れ子構造が何重にもなって、どの記号とどの記号が対応しているのかわかりにくくなる場合があります。

VSCode には、対応するブラケットをわかりやすく表示するために以下2つの設定項目がありますが、これらの設定は既定では無効になっています。
設定画面からこれらの項目を有効にすると、ブラケットの対応関係が一目瞭然になります。

ブラケットのペアを強調表示するための設定項目
名前 説明

editor.bracketPairColorization.enabled
対応するブラケット同士を彩色して表示する。既定では false

editor.guides.bracketPairs
ブラケットのペアを結ぶガイドを表示する。既定では false

ブラケットに関するコマンド p161

多くの言語では()や{}などのブラケット記号でコードが階層化されていて、記号の周辺のコードを修正する際に対応する記号を探す場面が多くあります。
そのような場面で役立つのが Ctrl + Shift + \ キーで実行できる「ブラケットへ移動」コマンドです。
ブラケット記号にカーソルをあててこのコマンドを実行すると対応するブラケットに一瞬で移動できるので、特に行数が多いプログラムではスクロールするより速く目的の場所にたどり着けます。

候補の選択に関する設定 p163

コード補完の候補リストが表示されるとき、デフォルトでは以前に使用したものが最初に選択された状態になっています。
次の画像では、前の行で入力した「console.log」が候補リストの中で最初に選択されています。

この設定のおかげでコードの中に頻繁に登場する候補ほど素早く入力できますが、
候補の選択についての動作を変更したい場合は設定画面から「Editor: Suggest Selection」の項目を確認しましょう。

「Editor: Suggest Selection」の設定値
設定値 説明

first
常に最初の候補を選択

recentlyUsed 
以前選択した候補を選択 (既定)

recentlyUsedByPrefix
候補を選択したときの入力を記憶して、以前の入力に基づいて候補を選択

3つ目の「recentlyUsedByPrefix」について少し詳しく説明します。

この設定値にしておくと、たとえば「con」と入力してコード補完の候補から「const」を選択したことが記憶され、
次に「con」と入力したときには優先的に「const」が選択されます。
「recentlyUsed」では「const」を選択したことだけが記憶されますが、
「recently Used By Prefix」では「con」という入力で「const」が選択されたことまで記憶されるのが特徴です。
これによって、「con」と入力したら「const」、「re」と入力したら「return」など、入力する値とコード補完の候補とを簡単に紐付けられるようになります。
決まった入力で決まったコード補完をしてほしいという場合はこの設定がおすすめです。

独自のスニペットを作成する p167

頻繁に入力する文字列をオリジナルのスニペットとして自分で登録することもできます。
オリジナルのスニペットを作成するには、メニューバーの [ファイル] - [ユーザー設定] - [ユーザースニペット] の順にクリックします。

次に、どの言語で使うスニペットを作るかを選択します。
「新しいグローバルスニペットファイル」を選択すると、どんな種類のファイルでも使えるスニペットを作成できますが、今回はJavaScriptを選択します。
言語を選択すると、スニペットを定義するためのJSON形式のファイルがエディターで開きます。

javascript.json には、例として "Print to console" という名前のスニペットを作成する記述がコメントとして書かれています。
この例に従って、それぞれの項目にどんな値を設定すればいいか見ていきましょう。

"prefix" はスニペットのトリガーとなる文字列です。
この例では「log」と入力することでコード補完の候補に "Print to console" のスニペットが表示されます。

"body" にはスニペットとして登録する内容を書きます。
カンマ区切りで複数の値を設定することで、複数行に渡るスニペットを登録できます。
また、 $1 、 $2 と書いてあるのはプレースホルダーと呼ばれるもので、スニペットが入力されるとカーソルがあたる部分です。
最初に $1 の部分にカーソルがあたり、Tabキーを押すと $2 にカーソルが移動します。
スニペットの中に場合によって書き換えたい部分がある場合は、プレースホルダーにしておくとよいでしょう。

"description" にはスニペットの簡単な説明を書きます。
コード補完の候補としてスニペットが表示されるとき、この説明が表示されます。

以下は、JavaScriptでアロー関数式を使って関数を定義するスニペットです。
関数名、引数、関数の中身の3つをプレースホルダーにしています。

javascript.json
"Arrow Function": { 
	"prefix": "arrow",
	"body": [
		"const ${1: functionName} = (${2: arguments}) => {",
		"$3",
		"};"
	],
	"description": "arrow function"
}

javascript.json を保存したあと、JavaScriptのファイルで「arrow」と入力すると、コード補完の候補に先ほど作成したスニペットが表示されます。