開発ツール

Visual Studio Code

概要

Visual Studio CodeはMicrosoft開発の軽量で拡張性に優れたコードエディタです。豊富な拡張機能と多言語サポートで幅広い開発に対応します。

詳細

Visual Studio Code（VS Code）は2015年にMicrosoftによってリリースされた無料のソースコードエディタで、現在では世界で最も人気の高い開発ツールの一つです。Electronフレームワーク上に構築されており、Windows、macOS、Linuxでクロスプラットフォーム対応しています。軽量でありながら強力な機能を持ち、豊富な拡張機能エコシステムにより、あらゆるプログラミング言語と開発ワークフローに対応できます。IntelliSenseによる高度なコード補完、統合デバッガー、GitとGitHub統合、ターミナル統合など、本格的なIDE機能を搭載しています。Language Server Protocolのサポートにより、言語固有の機能を効率的に提供し、Remote Development機能ではコンテナ、WSL、SSH経由でのリモート開発も可能です。Marketplace には10万以上の拡張機能が公開されており、テーマ、言語サポート、ツール統合、生産性向上機能など、開発者のニーズに応じてカスタマイズできます。

メリット・デメリット

メリット

• 無料でフル機能: 商用利用も含めて完全無料で利用可能
• 豊富な拡張機能: 10万以上の拡張機能による高いカスタマイズ性
• 軽量で高速: 起動が早く、大きなプロジェクトでも快適に動作
• 多言語サポート: ほぼ全てのプログラミング言語に対応
• 統合開発環境: デバッグ、Git、ターミナルが統合された開発環境
• Remote Development: コンテナやリモートサーバーでの開発サポート
• 活発な開発: 月次更新による継続的な機能向上

デメリット

• メモリ使用量: Electronベースのため、大量のRAMを消費する場合
• 拡張機能依存: 高度な機能には拡張機能のインストールが必要
• 設定の複雑さ: カスタマイズ項目が多く、最適な設定に時間がかかる
• 大規模プロジェクト: 非常に大きなコードベースでは動作が重くなる
• プライバシー: テレメトリデータの収集（無効化可能）

主要リンク

• Visual Studio Code公式サイト
• VS Code Documentation
• VS Code Marketplace
• VS Code GitHub Repository
• VS Code Tips and Tricks
• VS Code Remote Development

書き方の例

基本設定の例

// settings.json での基本設定
{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.lineNumbers": "on",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.autoSave": "onFocusChange",
  "workbench.colorTheme": "Dark+ (default dark)",
  "workbench.iconTheme": "vs-seti",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
}

おすすめ拡張機能の設定

// extensions.json - ワークスペース推奨拡張機能
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "ms-python.python",
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "ms-vscode-remote.remote-containers",
    "ms-vsliveshare.vsliveshare",
    "ms-vscode.vscode-json",
    "redhat.vscode-yaml",
    "ms-vscode.vscode-git-graph"
  ]
}

タスク設定例

// tasks.json - ビルドタスクの設定
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm install",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "npm run dev",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "TypeScript compile",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

デバッグ設定例

// launch.json - デバッグ設定
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "name": "Attach to Node.js",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app"
    }
  ]
}

ワークスペース設定例

// workspace.code-workspace - マルチルートワークスペース
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Shared",
      "path": "./shared"
    }
  ],
  "settings": {
    "typescript.preferences.includePackageJsonAutoImports": "auto",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true
    },
    "files.exclude": {
      "**/node_modules": true,
      "**/dist": true,
      "**/.git": true
    }
  },
  "extensions": {
    "recommendations": [
      "esbenp.prettier-vscode",
      "ms-vscode.vscode-eslint",
      "ms-python.python"
    ]
  }
}

スニペット例

// typescript.json - TypeScriptスニペット
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  ${2:prop}: ${3:string};",
      "}",
      "",
      "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ ${2:prop} }) => {",
      "  return (",
      "    <div>",
      "      ${4:// Component content}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React functional component with TypeScript"
  },
  "Console Log": {
    "prefix": "clg",
    "body": ["console.log('${1:message}:', ${2:variable});"],
    "description": "Console log with message"
  }
}

キーボードショートカット設定

// keybindings.json - カスタムキーバインド
[
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.new"
  },
  {
    "key": "ctrl+shift+`",
    "command": "workbench.action.terminal.focus"
  },
  {
    "key": "ctrl+k ctrl+t",
    "command": "workbench.action.selectTheme"
  },
  {
    "key": "alt+z",
    "command": "editor.action.toggleWordWrap"
  },
  {
    "key": "ctrl+shift+p",
    "command": "workbench.action.showCommands"
  },
  {
    "key": "ctrl+shift+x",
    "command": "workbench.view.extensions"
  }
]