VS Code初期設定ガイド｜入れるべき拡張機能も紹介

Visual Studio Code（VS Code）は、Microsoftが開発している無料のコードエディタです。軽量で高機能、豊富な拡張機能が特徴で、プログラミング初心者からプロの開発者まで世界中で利用されています。この記事ではインストールから初期設定までを解説します。

インストール方法

VS Codeの公式サイト（https://code.visualstudio.com/）からダウンロードしてインストールします。

Windows の場合

公式サイトから「Download for Windows」をクリック
ダウンロードしたインストーラーを実行
指示に従ってインストール（「PATHに追加する」にチェックを入れておく）

macOS の場合

公式サイトから「Download for Mac」をクリック
ダウンロードしたzipを展開
展開された「Visual Studio Code.app」をApplicationsフォルダにドラッグ

起動確認

# ターミナルからVS Codeを起動できることを確認
code --version
# 1.x.x と表示されればOK

# 現在のフォルダをVS Codeで開く
code .

codeコマンドが使えない場合は、VS Codeを起動してコマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）から「Shell Command: Install ‘code’ command in PATH」を実行してください。

最初にやるべき設定

日本語化

VS Codeのメニューを日本語にする拡張機能をインストールします。

左のサイドバーにある拡張機能アイコンをクリック（またはCtrl+Shift+X / Cmd+Shift+X）
検索欄に「Japanese Language Pack」と入力
「Japanese Language Pack for Visual Studio Code」をインストール
VS Codeを再起動

基本設定の変更

設定画面はCtrl+,（MacはCmd+,）で開けます。以下の設定を推奨します。

{
  "editor.fontSize": 14,
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "editor.renderWhitespace": "boundary"
}

それぞれの設定の意味を説明します。

fontSize: フォントサイズ（14が標準的）
tabSize: タブの幅（Python は4、JavaScript は2が一般的）
insertSpaces: タブキーでスペースを入力する
wordWrap: 長い行を折り返して表示する
formatOnSave: 保存時にコードを自動整形する
minimap.enabled: ミニマップ（右端の縮小表示）を非表示にする
autoSave: 自動保存を有効にする
renderWhitespace: 空白文字を可視化する

おすすめ拡張機能

全般的に役立つ拡張機能

Prettier - Code formatter

コードを自動で整形してくれるツールです。HTML、CSS、JavaScriptなど多くの言語に対応しています。

// settings.json に追加
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLint

JavaScriptのコードの問題点を自動検出してくれます。構文エラーだけでなく、よくない書き方のパターンも指摘してくれます。

GitLens

Gitの機能を強化する拡張機能です。各行がいつ誰によって変更されたかを表示したり、コミット履歴をビジュアルに確認できます。

indent-rainbow

インデントに色をつけて視覚的にわかりやすくする拡張機能です。特にPythonではインデントが重要なので便利です。

言語別の拡張機能

Python

「Python」拡張機能（Microsoft公式）をインストールすると、コード補完、デバッグ、Linterとの連携などが使えるようになります。

// Python開発の推奨設定
{
  "python.languageServer": "Pylance"
}

HTML/CSS

「Live Server」拡張機能をインストールすると、HTMLファイルの変更をリアルタイムでブラウザに反映できます。右クリックメニューから「Open with Live Server」を選ぶだけです。

覚えておきたいショートカット

VS Codeの操作効率を上げるショートカットキーを紹介します。（Mac用はCtrlをCmdに読み替えてください）

ファイル操作

Ctrl + N        新しいファイルを作成
Ctrl + S        ファイルを保存
Ctrl + P        ファイルを名前で検索して開く
Ctrl + Shift + P コマンドパレットを開く
Ctrl + W        現在のタブを閉じる
Ctrl + Tab      タブを切り替え

編集操作

Ctrl + C        コピー（選択範囲なしで行全体をコピー）
Ctrl + X        切り取り（選択範囲なしで行全体を切り取り）
Ctrl + Z        元に戻す
Ctrl + Shift + Z やり直し
Ctrl + D        同じ単語を選択に追加（マルチカーソル）
Alt + Up/Down   行を上下に移動
Ctrl + /        選択行をコメントアウト/解除
Ctrl + Shift + K 行を削除

検索

Ctrl + F        ファイル内検索
Ctrl + H        ファイル内置換
Ctrl + Shift + F 全ファイル検索

よくあるトラブルと対策

ターミナルが開かない

VS Code内のターミナルは、メニューの「ターミナル」から「新しいターミナル」で開けます。ショートカットは`Ctrl + “（バッククォート）です。

拡張機能が効かない

拡張機能をインストールした後、VS Codeの再起動が必要な場合があります。また、言語別の拡張機能は対象言語のファイルを開いているときだけ有効になります。

ファイルのエンコーディング

日本語が文字化けする場合は、画面右下のエンコーディング表示をクリックして「UTF-8」を選択してください。新しいファイルのデフォルトエンコーディングも設定できます。

{
  "files.encoding": "utf8"
}

VS Codeは最初の設定を済ませてしまえば、あとは使いながら少しずつカスタマイズしていけます。まずは基本設定と日本語化を行い、実際にコードを書きながら便利な拡張機能を試してみてください。