Programming Tools

Cara Menggunakan VS Code untuk Programming

Hendra Wijaya

· Januari 7, 2026 · 6 menit baca

Visual Studio Code adalah code editor paling populer untuk developer. Mari pelajari cara menggunakannya dengan efektif.

Install VS Code

Download

# 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 https://code.visualstudio.com/download

First Launch

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

Interface Overview

Layout

┌─────────────────────────────────────────────┐
│  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                                  │
└─────────────────────────────────────────────┘

Key Areas

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

Essential Shortcuts

General

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

Editing

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

Multi-cursor

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

Navigation

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

Find and Replace

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

Extensions

Must-Have Extensions

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

Install Extension

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

Recommended Settings

// 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" }

Integrated Terminal

Basic Usage

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

Terminal Profiles

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

Git Integration

Basic Git Commands

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

GitLens Features

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

Debugging

Launch Configuration

// .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"
    }
  ]
}

Debug Shortcuts

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

Snippets

Create Custom Snippet

// 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"
  }
}

Built-in Snippets

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

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

Workspace Settings

Project-specific Settings

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

Tasks

// .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"
    }
  ]
}

Remote Development

Remote SSH

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

Dev Containers

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"]
    }
  }
}

Productivity Tips

Quick Actions

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

Zen Mode

Ctrl+K Z Enter Zen Mode Esc Esc Exit Zen Mode Zen Mode hides: Activity bar Status bar Side bar Panel

Split Editor

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

Kesimpulan

VS Code adalah tool powerful dengan banyak fitur untuk meningkatkan produktivitas. Kuasai shortcuts dan explore extensions untuk workflow yang lebih efisien.

Ditulis oleh