この用語をシェア
概要
Visual Studio Code (VS Code) はMicrosoftが開発した無料のコードエディターで、豊富な拡張機能と高いカスタマイズ性を提供します。現在、世界中の開発者に最も人気のエディターの一つです。
主要機能
コア機能
- シンタックスハイライト: 多数のプログラミング言語をサポート
- IntelliSense: コード補完、シンタックスエラー検出、リファクタリング
- デバッグ機能: ブレークポイント、ステップ実行、変数監視
- Git統合: ソースコントロールのビジュアル操作
- ターミナル統合: エディター内でコマンドライン操作
拡張機能
- マーケットプレイス: 数万の拡張機能が利用可能
- テーマ・アイコン: 外観のカスタマイズ
- 言語サポート: 新しいプログラミング言語やフレームワークのサポート
- ツール統合: ビルドツール、テストフレームワーク等との連携
人気の拡張機能
コード品質向上
- Prettier: コードフォーマッター
- ESLint: JavaScript/TypeScriptのコード品質チェック
- Code Spell Checker: スペルチェック機能
生産性向上
- GitHub Copilot: AIコード補完
- Live Server: リアルタイムプレビュー
- Bracket Pair Colorizer: ブラケットの色分け表示
使用例
Web開発プロジェクト
// package.json
{
"name": "my-web-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "jest"
},
"devDependencies": {
"vite": "^5.0.0",
"jest": "^29.0.0"
}
}
// VS Codeでタスク実行
// Ctrl+Shift+P → "Tasks: Run Task" → "npm: dev"
// またはターミナルで直接実行も可能デバッグ設定
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Debug Node.js",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/app.js",
"env": {
"NODE_ENV": "development"
}
}
]
}ショートカットキー
基本操作
- Ctrl+Shift+P: コマンドパレットを開く
- Ctrl+P: ファイルを素早く開く
- Ctrl+`: ターミナルを開く
- Ctrl+Shift+E: エクスプローラーを開く
- Ctrl+Shift+G: ソースコントロールビューを開く
コード編集
- Ctrl+D: 選択したワードの次の出現を選択
- Alt+Shift+↓: 行を複製
- Ctrl+Shift+K: 行を削除
- Ctrl+/: コメントの切り替え
メリット
- 無料: コストをかけずに高機能なエディターを使用可能
- 軽量: 起動が速く、メモリ使用量も比較的少ない
- クロスプラットフォーム: Windows、Mac、Linuxで利用可能
- コミュニティ: 大きなコミュニティと豊富な情報源
- カスタマイズ性: 設定や拡張機能で高度にカスタマイズ可能
デメリット
- 初心者には複雑: 多数の機能や設定が初心者には滋惑する場合あり
- メモリ使用量: 大きなプロジェクトや多数の拡張機能で重くなる場合あり
- アップデート頻度: 頻繁なアップデートで設定や拡張機能が不具合を起こす場合あり
関連技術
- Electron: VS Codeのベーステクノロジー
- Language Server Protocol (LSP): 言語サポート機能の标準プロトコル
- TypeScript: VS Codeの開発言語
- Monaco Editor: Webブラウザ版のVS Codeエディター