VS Codeで最初に覚えるお作法

VS Codeでは、すべての文字を一字ずつ手入力する必要はありません。

大切なのは、コードの意味や構造を自分で考えながら入力し、スペル、閉じ括弧、インデントなどの機械的な作業をVS Codeに任せることです。

基本的な考え方は次のとおりです。

自分で意図して入力を始める
↓
補完候補を確認する
↓
Tabで確定する
↓
最後にフォーマッターで整える

1. すべてを最後まで手入力しない

例えば、次の途中まで入力します。

classN

補完候補に className が表示されたら、Tab または Enter で確定します。

className

これは手抜きではなく、VS Codeを使った標準的な入力方法です。

補完を利用すると、次のようなミスを減らせます。

• スペルミス
• 大文字と小文字の間違い
• 存在しない変数名の入力
• ReactやWordPress APIのプロパティ名の間違い

2. 補完候補は Control + Space で表示する

補完候補が自動的に表示されない場合は、次のキーを押します。

Control + Space

例えば、次の位置で補完候補を表示します。

<img
  s

状況に応じて、src などの候補が表示されます。

macOSの入力ソース切り替えと競合する場合は、Command Paletteから次のコマンドを実行します。

Trigger Suggest

3. HTMLやJSXのタグはEmmetを利用する

VS Codeには、短い省略記法からHTMLやJSXを生成するEmmetがあります。

例えば、次を入力します。

div.alfred-amazon-card__image

Emmetの候補を選択して Tab を押すと、次のコードに展開されます。

<div className="alfred-amazon-card__image"></div>

同様に、次のような入力も利用できます。

span

<span></span>

img

<img src="" alt="" />

候補が複数表示された場合は、Emmet Abbreviation と表示された候補を選びます。

4. 閉じタグはVS Codeに任せる

開始タグを入力すると、多くの場合は閉じタグも自動的に追加されます。

<div></div>

カーソルは開始タグと閉じタグの間に配置されます。

<div>|</div>

ここで Enter を押すと、次のように展開されます。

<div>
  |
</div>

閉じタグが自動生成されている場合は、自分でもう一度入力しないようにします。

閉じタグの二重入力は、JSXの構造が崩れる原因になります。

5. Tab と Enter を使い分ける

補完候補やスニペットを操作するときは、次の使い分けを基本とします。

• Tab：候補を確定し、次の入力位置へ移動する
• Enter：通常の改行、または補完候補の確定に使う
• Esc：不要な補完候補を閉じる

特にEmmetやスニペットでは、Tab を押すことで入力位置を順番に移動できます。

<img
  src=""
  alt=""
/>

6. 括弧や引用符は片側だけ入力する

VS Codeは通常、次の文字を自動的に閉じます。

(
{
[
"
'

例えば、{ を入力すると、対応する } も自動的に入力されます。

{ | }

同様に、( を入力すると ) が追加されます。

( | )

入力中は、VS Codeが作成した閉じ括弧や引用符を確認し、同じ文字を重複して入力しないようにします。

今回のような条件付き表示では、括弧の対応関係を意識します。

{ imageUrl ? (
  <img />
) : (
  <span>No Image</span>
) }

7. インデントはフォーマッターに任せる

入力中にインデントが多少崩れても、手作業で完全に整える必要はありません。

ファイル全体を整形するMacのショートカットは次のとおりです。

Shift + Option + F

Command Paletteから実行する場合は、次のコマンドを選びます。

Format Document

選択した範囲だけを整形する場合は、次のコマンドを使用します。

Format Selection

JSXでは括弧やタグが多いため、人間が空白を数えるよりもフォーマッターを利用する方が安全です。

基本的には、コードを変更した後に一度フォーマットします。

8. 行の移動は切り取りと貼り付けを使わない

現在の行や選択した行を上下へ移動する場合は、次のショートカットを使います。

Option + ↑
Option + ↓

行を複製する場合は、次のショートカットを使います。

Shift + Option + ↓

似たコードを追加するときに便利です。

9. 同じ名前を変更するときは複数選択を利用する

現在選択している文字列と同じ文字列を、次の位置でも選択する場合は次を使います。

Command + D

例えば、imageUrl を選択して Command + D を押すと、次の imageUrl も選択されます。

ファイル内の同じ文字列をすべて選択する場合は次を使います。

Shift + Command + L

任意の位置へ複数のカーソルを追加する場合は次を使います。

Option + Click

慣れるまでは、Command + D で一つずつ確認しながら選択する方が安全です。

10. Command Paletteを活用する

VS Codeのすべてのショートカットを最初から暗記する必要はありません。

Command Paletteは次のキーで開きます。

Shift + Command + P

Command Paletteでは、実行したい機能名を検索できます。

Format Document
Format Selection
Trigger Suggest
Rename Symbol
Organize Imports
Emmet

最初はショートカットよりも機能名を理解し、頻繁に使う機能だけを徐々に覚えます。

11. 入力後はエラー表示を確認する

VS Codeは、問題があるコードに赤色や黄色の波線を表示します。

• 赤い波線：構文エラーや明確な問題
• 黄色い波線：警告や改善候補
• 灰色表示：未使用の変数やimport

波線にマウスポインターを合わせると、問題の内容が表示されます。

Macでは次のキーで、現在のファイル内にある問題へ移動できます。

F8

前の問題へ戻る場合は次を使います。

Shift + F8

エラーが出た場合は、すぐにコード全体を書き直すのではなく、波線が表示された位置と、その直前の括弧やタグを確認します。

12. ファイルを保存してビルド結果を確認する

コードを変更したら、次の順番で確認します。

1. ファイルを保存する
2. VS Codeの赤い波線がないことを確認する
3. npm start を実行しているターミナルを確認する
4. ビルドエラーがないことを確認する
5. ブラウザで実際の表示を確認する

コードが正しそうに見えても、ビルドと実際の画面の両方を確認します。

JSXを効率的に入力する例

次のコードを入力する場合を考えます。

<img
  src={ imageUrl }
  alt={ title || __( 'Product Image', 'alfred-affiliate' ) }
/>

効率的な入力手順は次のとおりです。

1. img と入力する
2. Emmet候補を Tab で確定する
3. src の入力位置へ移動する
4. { を入力する
5. image まで入力する
6. 補完候補の imageUrl を Tab で確定する
7. alt の入力位置へ移動する
8. { title || __( まで入力する
9. 引用符と括弧の自動補完を利用する
10. 最後に Shift + Option + F で整形する

最初に覚えるショートカット

最初に覚えるショートカット

操作	Mac
補完候補を表示	Control + Space
候補やスニペットを確定	Tab
ファイル全体を整形	Shift + Option + F
Command Paletteを開く	Shift + Command + P
次の同じ文字列を選択	Command + D
行を削除	Command + Shift + K
行を上下に移動	Option + ↑ / ↓
行を複製	Shift + Option + ↑ / ↓
行をコピー	Command + C
行を切り取り	Command + X
下に新しい行を挿入	Command + Enter
上に新しい行を挿入	Command + Shift + Enter
行を選択	Command + L
元に戻す	Command + Z
やり直す	Command + Shift + Z
次のエラーへ移動	F8
前のエラーへ移動	Shift + F8

おすすめVS Code設定

開発効率と学習効率を両立するため、以下の設定をおすすめします。

設定	おすすめ	理由
Auto Save	ON	保存忘れを防ぐ
Format on Save	ON	保存時にコードを自動整形する
Editor: Inline Suggest	OFF（学習中）	AIが勝手に続きを入力しないようにする
Suggest On Trigger Characters	ON	. や < を入力したときに補完候補を表示する
Tab Size	4	PHP・JavaScriptとも一般的な設定
Insert Spaces	ON	タブ文字ではなくスペースでインデントする
Word Wrap	ON	長い行を折り返して表示する
Minimap	OFF	画面を広く使える
Breadcrumbs	ON	現在のファイル位置が分かりやすい
Sticky Scroll	ON	長いファイルでも現在位置を把握しやすい

学習中のおすすめ設定

Gutenberg、React、PHPなどを学習している間は、AIがコードを先回りして生成するよりも、自分で入力しながら理解する方が知識が定着しやすくなります。

そのため、次の設定をおすすめします。

• Editor: Inline Suggest ：OFF
• 補完候補（Control + Space） ：ON
• ChatGPT / Copilot ：分からないときだけ質問して利用する

この設定にすると、自分で考えながらコードを書きつつ、必要なときだけAIのサポートを受けられるため、学習効率が高まります。

将来的に変更してもよい設定

開発に慣れてきたら、AIのインライン補完をONにすると入力速度が大幅に向上します。

初心者・学習中は「理解を優先」、実務や個人開発では「効率を優先」という使い分けがおすすめです。

VS Codeの補完設定

学習中は、AIがコードの続きを自動生成するインライン補完を無効にし、VS Code標準の補完候補だけを利用します。

この設定により、自分でコードを入力しながら構文を覚えつつ、必要な場面では通常の補完候補を利用できます。

おすすめ設定

settings.json を次のように設定します。

{
    "workbench.colorTheme": "Kimbie Dark",
    "python.analysis.autoSearchPaths": false,
    "workbench.startupEditor": "none",

    "editor.inlineSuggest.enabled": false,

    "editor.quickSuggestions": {
        "other": "on",
        "comments": "off",
        "strings": "off"
    },

    "editor.suggestOnTriggerCharacters": true
}

設定内容

設定	値	内容
editor.inlineSuggest.enabled	false	AIによるインライン補完を無効にする
editor.quickSuggestions.other	on	通常のコード入力中に補完候補を表示する
editor.quickSuggestions.comments	off	コメント内では補完候補を自動表示しない
editor.quickSuggestions.strings	off	文字列内では補完候補を自動表示しない
editor.suggestOnTriggerCharacters	true	. などの特定文字を入力したときに候補を表示する

インライン補完と通常補完の違い

インライン補完

入力位置の右側に、薄いグレーの文字でコードの続きを表示します。

入力中のコード  薄いグレーの提案

通常は Tab を押すと提案を採用します。

学習中は、意図せず長いコードを採用してしまったり、括弧やセミコロンの対応が崩れたりすることがあるため、無効にします。

"editor.inlineSuggest.enabled": false

通常補完

関数名、変数名、プロパティ名などを候補一覧として表示します。

例えばPHPで次のように入力します。

esc_

候補には次のような関数が表示されます。

esc_html
esc_attr
esc_url

通常補完は、構文や名前を確認しながら入力できるため、学習中も有効にします。

"editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": "off"
}

補完候補を手動で表示

補完候補が自動表示されない場合は、次のショートカットで手動表示できます。

Control + Space

これはVS Codeの Trigger Suggest コマンドです。

おすすめの使い分け

機能	学習中の設定
AIインライン補完	OFF
VS Code標準補完	ON
Control + Space による手動補完	ON
コメント内の自動補完	OFF
文字列内の自動補完	OFF
ChatGPTやCopilotのチャット	必要なときだけ利用

この設定の目的

学習中は、入力速度よりもコード構造の理解を優先します。

• 自分でコードを入力する
• 括弧や引用符の対応を確認する
• 必要なときだけ補完候補を表示する
• 分からない部分はチャットで確認する
• コード全体を自動生成させない

開発に慣れて入力効率を優先したくなった場合は、次の設定を true に戻すことでインライン補完を再び利用できます。

"editor.inlineSuggest.enabled": true

基本方針

VS Codeを使った入力では、次の役割分担を意識します。

自分で行うこと

• 何を実装するか考える
• コードの構造を理解する
• 適切な変数やコンポーネントを選ぶ
• 補完候補が正しいか確認する
• 実際の動作を確認する

VS Codeに任せること

• スペルの補完
• タグや括弧を閉じる作業
• インデントの整形
• 同じ文字列の一括選択
• 構文エラーの検出
• 利用可能なプロパティや関数の候補表示

コードの意図と構造は自分で考え、機械的な作業はVS Codeに任せます。

これが、理解を深めながら入力ミスを減らすための基本的なお作法です。