はじめに
個人的に、VS Codeは「これ1本で全部いける」エディタだと思っています。
GitHubスター179,000超え。世界中の開発者が使っているコードエディタ。MicrosoftがOSSとして公開していて、完全無料。10年以上の開発歴があって、月間アクティブユーザーは数千万人。
正直なところ、10年前に登場したときは「またMicrosoftか」と思ったんですよ。Visual Studioの軽量版?Atomで十分じゃない?と。でも使い始めてから1週間で、他のエディタに戻る気が完全になくなりました。
30代になって思うのは、道具選びで消耗する時間がもったいないということ。VS Codeさえ使っていれば、エディタ選びで悩む必要がなくなる。それくらい完成度が高いんですよね。
VS Codeとは
Visual Studio Code(VS Code)は、Microsoftが開発しているオープンソースのコードエディタです。
ElectronベースでWeb技術(HTML/CSS/JavaScript)で作られていますが、動作は軽快。テキストエディタの手軽さと、IDE(統合開発環境)の機能性を両立しています。
特徴的なのは、拡張機能のエコシステム。公式マーケットプレイスには4万以上の拡張機能があって、どんな言語・フレームワークでも対応できる。TypeScript、Python、Go、Rust、なんでもいける。
2025年11月時点の最新バージョンは1.106.3。月に1回のペースで安定したアップデートが続いています。
特徴・メリット
1. 完全無料でオープンソース
これ、意外と重要なポイントです。
JetBrains製のIDEは年間2〜3万円。Sublimeも買い切りで8,000円くらい。VS Codeは完全無料。MITライセンスなので商用利用も問題なし。
「無料だから機能が限られている」ということもない。むしろ有料エディタより機能が豊富だったりする。コスパ的に、最強一択ですね。
2. 驚異的な拡張機能エコシステム
VS Codeの真価は拡張機能にあります。
- 言語サポート: Python、Go、Rust、Java、C++など、ほぼ全言語に対応
- フレームワーク: React、Vue、Angular、Next.jsなど
- ツール連携: Docker、Git、Kubernetes、AWS、Azure
- AI支援: GitHub Copilot、Codeium、Tabnine
入れたい機能があれば、だいたい拡張機能で解決できる。これがQOL上がるポイント。
3. 軽量で高速
Electronベースなのに、起動が速い。
1秒もかからずに立ち上がる。ファイルの開閉もサクサク。数万行のファイルを開いても、ストレスなく編集できる。
昔はVS Codeも「重い」と言われていた時期がありましたが、最適化が進んで今は全く問題ない。
4. 統合ターミナル
エディタ内でターミナルが使える。
これが地味に便利。画面を切り替える必要がないので、開発のフローが途切れない。複数のターミナルを同時に開いて、それぞれで別のコマンドを実行することもできる。
5. Git統合
Git操作がエディタ内で完結します。
- 差分の確認
- ステージング
- コミット
- プッシュ/プル
- ブランチ操作
CLIを叩かなくても、GUIで直感的に操作できる。GitHubとの連携も簡単。
6. リモート開発
Remote SSHやDev Containersで、リモート環境での開発が可能。
- SSHで接続したサーバー上で直接編集
- Docker コンテナ内で開発
- GitHub Codespacesでクラウド開発
ローカルの環境を汚さずに開発できるのが良い。
インストール方法
Windows
公式サイトからダウンロードするのが一番簡単:
https://code.visualstudio.com/
もしくはwingetで:
winget install Microsoft.VisualStudioCode
macOS
公式サイトからダウンロードするか、Homebrewで:
brew install --cask visual-studio-code
Linux(Ubuntu/Debian)
# Microsoft GPGキーを追加
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
# リポジトリを追加
echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null
# インストール
sudo apt update
sudo apt install code
基本的な使い方
コマンドパレット
VS Codeで最も重要なショートカット:
Ctrl+Shift+P (Windows/Linux)
Cmd+Shift+P (macOS)
これでほとんどの操作にアクセスできる。コマンド名を入力するだけ。マウスを使わずに操作が完結する。
ファイル・フォルダを開く
Ctrl+O (ファイル)
Ctrl+K Ctrl+O (フォルダ)
もしくはターミナルから:
code . # 現在のディレクトリを開く
code /path/to/project # 指定したディレクトリを開く
code file.txt # 特定のファイルを開く
便利なショートカット
覚えておくと時短になるショートカット:
Ctrl+P - ファイル検索(クイックオープン)
Ctrl+Shift+F - プロジェクト全体を検索
Ctrl+` - ターミナルの表示/非表示
Ctrl+B - サイドバーの表示/非表示
Ctrl+D - 同じ単語を選択に追加
Alt+↑/↓ - 行を上下に移動
Shift+Alt+↓ - 行を複製
Ctrl+/ - コメントアウト
settings.json
VS Codeの設定はJSONで管理:
{
"editor.fontSize": 14,
"editor.fontFamily": "'JetBrains Mono', monospace",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"terminal.integrated.fontSize": 13,
"workbench.colorTheme": "One Dark Pro"
}
Ctrl+,で設定画面を開いて、右上のアイコンからJSONを直接編集できる。
マルチカーソル
複数箇所を同時に編集:
Alt+Click - カーソルを追加
Ctrl+Alt+↑/↓ - 上下にカーソルを追加
Ctrl+Shift+L - 同じ単語を全て選択
これ、一度覚えると手放せなくなる。
おすすめ拡張機能
必須レベル
1. ESLint - JavaScript/TypeScriptのリンター
2. Prettier - コードフォーマッター
3. GitLens - Git操作の強化
4. Error Lens - エラーをインラインで表示
5. Auto Rename Tag - HTMLタグの自動リネーム
言語別
# TypeScript/JavaScript
- JavaScript (ES6) code snippets
- npm Intellisense
# Python
- Python (Microsoft)
- Pylance
# Go
- Go (Google)
# Rust
- rust-analyzer
見た目・テーマ
- One Dark Pro - 人気のダークテーマ
- Material Icon Theme - ファイルアイコン
- indent-rainbow - インデントの色分け
AI支援
- GitHub Copilot - AIペアプログラミング
- Codeium - 無料のAI補完
GitHub Copilotは月10ドルかかるけど、個人的にはその価値は十分ある。
実践的なユースケース
TypeScriptプロジェクトの設定
.vscode/settings.jsonをプロジェクトに追加:
{
"typescript.preferences.importModuleSpecifier": "relative",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit",
"source.fixAll.eslint": "explicit"
}
}
チーム全員で設定を共有できる。
デバッグ設定
.vscode/launch.jsonでデバッグ設定:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Current File",
"program": "${file}",
"skipFiles": ["<node_internals>/**"]
},
{
"type": "node",
"request": "launch",
"name": "Debug npm start",
"runtimeExecutable": "npm",
"runtimeArgs": ["start"],
"cwd": "${workspaceFolder}"
}
]
}
F5を押すだけでデバッグ開始。ブレークポイント、変数の確認、ステップ実行が全部できる。
タスクの自動化
.vscode/tasks.jsonでビルドタスクを定義:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "npm",
"script": "build",
"problemMatcher": ["$tsc"],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "test",
"type": "npm",
"script": "test",
"group": "test"
}
]
}
Ctrl+Shift+Bで即座にビルド実行。
Remote SSH開発
- Remote - SSH拡張機能をインストール
Ctrl+Shift+P→ "Remote-SSH: Connect to Host"user@hostnameを入力
サーバー上のファイルを、ローカルと同じ感覚で編集できる。
Dev Container
.devcontainer/devcontainer.jsonを作成:
{
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/typescript-node:20",
"features": {
"ghcr.io/devcontainers/features/github-cli:1": {}
},
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
},
"postCreateCommand": "npm install"
}
チーム全員が同じ開発環境を使える。「自分の環境では動くのに」問題が解消される。
よくある質問
VSCodeとVisual Studioの違いは?
Visual Studioは本格的なIDE。主にC#/.NET開発向け。重い。
VS Codeは軽量エディタ。あらゆる言語に対応。拡張機能で機能を追加する設計。
別物と思った方がいい。
VimやNeovimと比べてどう?
VimはカスタマイズすればVS Codeより速いし軽い。でも学習コストが高い。
VS Codeは「最初からある程度使える」のが強み。Vim派の人向けにVim拡張機能もある。
個人的には、Vimに詳しい人以外はVS Codeの方が生産性が上がると思う。
JetBrains製IDEと比べてどう?
JetBrains(IntelliJ、WebStorm、PyCharm)は言語固有の機能が豊富。リファクタリングとか補完の精度が高い。
VS Codeは汎用的で、どの言語でも同じ体験。軽い。無料。
Java開発ならIntelliJ、それ以外ならVS Codeという使い分けが多い印象。
まとめ
VS Codeを使う理由:
- 完全無料: コストを気にせず使える
- 軽量高速: 起動も編集もストレスフリー
- 拡張機能: どんな言語・環境にも対応
- Git統合: バージョン管理が楽
- リモート開発: SSH、Container、Codespacesに対応
- 活発な開発: 月1回のアップデート、10年以上の実績
正直なところ、新しくプログラミングを始める人にも、ベテランにも、VS Codeは最適解だと思います。無料だし、軽いし、何でもできる。
10年経っても最強のエディタであり続けているのには理由がある。まだ使っていない人は、ぜひ一度試してみてください。1週間後には、きっと手放せなくなっているはずです。