Cara Menggunakan VS Code untuk Programming

# Ubuntu/Debian
sudo apt update
sudo apt install wget 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
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

# Atau download dari:
# https://code.visualstudio.com/download

1. Buka VS Code
2. Pilih theme (Dark/Light)
3. Install recommended extensions
4. Sign in dengan GitHub/Microsoft (sync settings)

┌─────────────────────────────────────────────┐
│  Activity Bar │    Editor Area              │
│  (kiri)       │    (tengah)                 │
│               │                             │
│  □ Explorer   │    ┌─── Tab Bar ───────────┤
│  □ Search     │    │ file1.js │ file2.py   │
│  □ Git        │    └───────────────────────┤
│  □ Debug      │                             │
│  □ Extensions │    [Code area]              │
│               │                             │
│               │                             │
├───────────────┴─────────────────────────────┤
│  Panel (Terminal, Output, Problems)         │
└─────────────────────────────────────────────┘
│  Status Bar                                  │
└─────────────────────────────────────────────┘

Activity Bar (kiri): Navigation icons
Side Bar: Content based on activity
Editor: Code editing area
Panel: Terminal, output, problems
Status Bar: Git branch, language, encoding

Ctrl+Shift+P    Command Palette
Ctrl+P          Quick Open file
Ctrl+,          Settings
Ctrl+`          Toggle Terminal
Ctrl+B          Toggle Sidebar
Ctrl+J          Toggle Panel
F11             Full screen

Ctrl+C          Copy line (no selection)
Ctrl+X          Cut line (no selection)
Ctrl+Shift+K    Delete line
Ctrl+D          Select word / next occurrence
Ctrl+Shift+L    Select all occurrences
Alt+Up/Down     Move line up/down
Shift+Alt+Up/Down   Copy line up/down
Ctrl+/          Toggle comment
Ctrl+Shift+A    Toggle block comment
Ctrl+[          Outdent line
Ctrl+]          Indent line

Alt+Click           Add cursor
Ctrl+Alt+Up/Down    Add cursor above/below
Ctrl+Shift+L        Add cursor to all occurrences
Shift+Alt+I         Add cursor to end of lines

Ctrl+G          Go to line
Ctrl+Shift+O    Go to symbol in file
Ctrl+T          Go to symbol in workspace
F12             Go to definition
Alt+F12         Peek definition
Shift+F12       Find all references
Ctrl+Shift+M    Show problems
F8              Go to next problem

Ctrl+F          Find in file
Ctrl+H          Replace in file
Ctrl+Shift+F    Find in files
Ctrl+Shift+H    Replace in files
F3 / Shift+F3   Next/Previous match
Alt+Enter       Select all matches

General:
- Prettier (code formatter)
- ESLint (JavaScript linter)
- GitLens (Git supercharged)
- Error Lens (inline errors)
- Path Intellisense
- Auto Rename Tag

Languages:
- Python (Microsoft)
- Go (Google)
- Rust Analyzer
- C/C++ (Microsoft)

Themes:
- One Dark Pro
- Dracula
- GitHub Theme
- Material Theme

Cara 1: GUI
1. Click Extensions icon (Ctrl+Shift+X)
2. Search extension name
3. Click Install

Cara 2: Command Line
code --install-extension ms-python.python

// settings.json
{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,

  // Files
  "files.autoSave": "afterDelay",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // Terminal
  "terminal.integrated.fontSize": 13,

  // Workbench
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "One Dark Pro"
}

Ctrl+`          Toggle terminal
Ctrl+Shift+`    New terminal
Ctrl+Shift+5    Split terminal
Ctrl+PgUp/PgDn  Switch terminals

// settings.json
{
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.profiles.linux": {
    "bash": {
      "path": "bash",
      "icon": "terminal-bash"
    },
    "zsh": {
      "path": "zsh"
    }
  }
}

Ctrl+Shift+G    Open Source Control
Stage changes:  Click + icon
Commit:         Enter message, Ctrl+Enter
Push/Pull:      Click ... menu or use icons

- Blame annotations (who wrote what)
- File history
- Line history
- Compare branches
- Visual file history graph

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/index.js"
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Python: Current File",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

F5              Start debugging
F9              Toggle breakpoint
F10             Step over
F11             Step into
Shift+F11       Step out
Shift+F5        Stop debugging
Ctrl+Shift+F5   Restart debugging

// File > Preferences > Configure User Snippets
// javascript.json
{
  "Console Log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "Console log"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": ["const ${1:name} = (${2:params}) => {", "    $0", "};"],
    "description": "Arrow function"
  }
}

JavaScript:
- log → console.log()
- for → for loop
- foreach → forEach loop
- if → if statement

HTML:
- ! → HTML boilerplate
- div → <div></div>
- a → <a href=""></a>

// .vscode/settings.json
{
  "editor.tabSize": 4,
  "editor.formatOnSave": true,
  "python.defaultInterpreterPath": "./venv/bin/python",
  "eslint.enable": true
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Test",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    }
  ]
}

1. Install "Remote - SSH" extension
2. Ctrl+Shift+P > "Remote-SSH: Connect to Host"
3. Enter: user@hostname
4. VS Code opens in remote server

1. Install "Dev Containers" extension
2. Create .devcontainer/devcontainer.json
3. Ctrl+Shift+P > "Reopen in Container"

// .devcontainer/devcontainer.json
{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  }
}

Ctrl+.          Quick fix (lightbulb)
F2              Rename symbol
Ctrl+Space      Trigger suggestions
Ctrl+Shift+Space    Trigger parameter hints

Ctrl+K Z        Enter Zen Mode
Esc Esc         Exit Zen Mode

Zen Mode hides:
- Activity bar
- Status bar
- Side bar
- Panel

Ctrl+\          Split editor
Ctrl+1/2/3      Focus editor group
Ctrl+K Ctrl+Left/Right    Move editor to group