Development Tool

Visual Studio Code

Overview

Visual Studio Code is a lightweight and highly extensible code editor developed by Microsoft. It supports wide range of development with rich extensions and multi-language support.

Details

Visual Studio Code (VS Code) is a free source code editor released by Microsoft in 2015, now one of the world's most popular development tools. Built on the Electron framework, it provides cross-platform support for Windows, macOS, and Linux. While lightweight, it offers powerful features and can accommodate any programming language and development workflow through its rich extension ecosystem. It includes full IDE features such as advanced code completion through IntelliSense, integrated debugger, Git and GitHub integration, and terminal integration. Language Server Protocol support efficiently provides language-specific features, while Remote Development capabilities enable remote development via containers, WSL, and SSH. The Marketplace hosts over 100,000 extensions including themes, language support, tool integrations, and productivity enhancements, allowing customization according to developer needs.

Advantages and Disadvantages

Advantages

• Free and Full-featured: Completely free including commercial use
• Rich Extensions: High customizability with over 100,000 extensions
• Lightweight and Fast: Quick startup and comfortable operation even with large projects
• Multi-language Support: Supports virtually all programming languages
• Integrated Development Environment: Unified environment with debugging, Git, and terminal
• Remote Development: Support for development in containers and remote servers
• Active Development: Continuous improvement through monthly updates

Disadvantages

• Memory Usage: Being Electron-based, can consume significant RAM
• Extension Dependency: Advanced features require extension installation
• Configuration Complexity: Many customization options requiring time to optimize
• Large Projects: Can become slow with very large codebases
• Privacy: Telemetry data collection (can be disabled)

Key Links

• Visual Studio Code Official Site
• VS Code Documentation
• VS Code Marketplace
• VS Code GitHub Repository
• VS Code Tips and Tricks
• VS Code Remote Development

Usage Examples

Basic Configuration

// Basic configuration in 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"
}

Recommended Extensions Configuration

// extensions.json - Workspace recommended extensions
{
  "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"
  ]
}

Task Configuration Example

// tasks.json - Build task configuration
{
  "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
      }
    }
  ]
}

Debug Configuration Example

// launch.json - Debug configuration
{
  "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 Configuration Example

// workspace.code-workspace - Multi-root 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"
    ]
  }
}

Snippet Examples

// typescript.json - TypeScript snippets
{
  "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"
  }
}

Keyboard Shortcuts Configuration

// keybindings.json - Custom key bindings
[
  {
    "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"
  }
]