Visual Studio Code

HTML+CSS+JS+PHP サンプル クロスプラットフォーム

軽量かつ拡張性の高いエディタ。CLI・設定同期・Dev Container・Remote開発など、現場で使える知見と一緒に解説します。

← お使いの環境に合わせて切替

概要

Visual Studio Code（VS Code）は、Microsoftが提供する無料のコードエディタです。拡張機能により機能を自在に追加でき、多言語対応、Git連携、Remote開発などが強力です。

特長

  • 豊富な拡張機能とMarketplace
  • 高速・軽量・クロスプラットフォーム
  • Git/差分/ブレークポイント等の統合

向いている用途

  • Web/フロントの高速実装
  • スクリプト・データ処理・執筆
  • リモート・コンテナ・WSLでの開発

基本

  • Ctrl + Shift + P（mac: ⌘ + Shift + P）でコマンドパレット
  • 設定は settings.json、キーバインドは keybindings.json
  • ワークスペース設定はプロジェクトごとに管理
おすすめ設定例（貼り付け可） 
{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "editor.renderWhitespace": "boundary",
  "workbench.colorTheme": "Default Dark Modern"
}

基礎

ショートカット最速習得法：コマンドパレットで操作 → 右側に表示されるショートカットを目で覚える → 次回からキー操作に移行。
  • マルチカーソル： Alt + クリック（mac: ⌥）
  • 行移動： Alt + ↑/↓（mac: ⌥ + ↑/↓）
  • 行コピー： Shift + Alt + ↓（mac: ⌥ + Shift + ↓）

導入

OSごとのセットアップ手順を用意しました（下のタブで切替）。

  1. 公式インストーラをダウンロードし、指示に従いインストール
  2. 「PATH に追加」を有効化（CLIを使えるように）
  3. 起動し、日本語化など基本拡張を導入

CLIチェック：

code --version
  1. 公式.dmg からドラッグ&ドロップでインストール
  2. メニュー「Shell Command: Install 'code' command in PATH」を実行
  3. 日本語化・Prettier・ESLint などを導入

CLIチェック：

code --version
  1. 配布形態（.deb/.rpm/リポジトリ/Snap/Flatpak）に応じてインストール
  2. PATHが通っていれば CLI は即利用可
  3. 必要な拡張を導入

CLIチェック：

code --version

開発現場

  • Git 連携

    ソース管理ビューで差分/コミット/履歴。拡張「GitLens」で可視化が強化。

  • Remote/WSL/Containers

    重厚な開発環境をコンテナに閉じ込め、端末は軽量のまま。

  • デバッグ

    言語ごとのデバッガ設定を launch.json で管理。

最新情報

応用

Dev Containers（.devcontainer）

{
  "name": "web-dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "features": { "ghcr.io/devcontainers/features/docker-in-docker:2": {} },
  "postCreateCommand": "npm i"
}

ワークスペース設定

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

拡張機能のインストール方法

  1. コマンドパレット CtrlShiftP / ⌘ShiftP → Extensions: Install Extensions
  2. 拡張名で検索して「Install」
  3. CLIなら次のコマンドでもOK
code --install-extension <publisher>.<extension>

よく使う拡張（クリックでCLIコピー）

Japanese Language Pack

VS Code日本語化

Prettier

コード整形

ESLint

Lint/品質チェック

GitLens

Git履歴/アノテーション強化

Python

Python支援

アンインストール 
code --uninstall-extension <publisher>.<extension>

発展

  • Settings Syncで端末間の設定/拡張を同期
  • Task/Problem MatcherでCI風ワークフロー
  • Code Actionsで自動修正を活用

コードツール比較

ツール種別強み補足
VS Code IDE/Editor 拡張が豊富・軽快・クロスプラットフォーム 無償、設定同期◎
IntelliJ IDEA IDE Java/Kotlinに強い、コード解析◎ 有償版あり
Xcode IDE iOS/macOSに最適化、UI設計ツール macOS限定
Android Studio IDE Android開発標準、Profiler充実 重量級
Vim/Neovim Editor 超軽量・キーバインド最強 学習コスト高

例

ESLint + Prettier

// .eslintrc.json
{
  "extends": ["eslint:recommended", "plugin:import/recommended"],
  "parserOptions": { "ecmaVersion": 2023, "sourceType": "module" }
}

タスク実行

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    { "label": "dev", "type": "shell", "command": "npm run dev", "problemMatcher": [] }
  ]
}

おすすめツール

  • Dev Containers / Docker Desktop
  • GitLens / GitHub Copilot / REST Client
  • Thunder Client / Live Server