Terminal Integration in Your IDE

1# Keyboard shortcuts:
2Ctrl+` (Ctrl+Backtick)     - Toggle terminal
3Ctrl+Shift+`               - Create new terminal
4Ctrl+Shift+5               - Split terminal
5
6# Or via menu:
7# View → Terminal
8# Terminal → New Terminal

1// Scenario: Developing a web application
2
3// Without integrated terminal:
4// 1. Code in VS Code
5// 2. Alt+Tab to terminal
6// 3. Run command: npm run dev
7// 4. Alt+Tab back to VS Code
8// 5. Check browser
9// 6. Alt+Tab to terminal for logs
10// 😰 Constant context switching!
11
12// With integrated terminal:
13// 1. Code in VS Code (top panel)
14// 2. Terminal at bottom (npm run dev running)
15// 3. See logs immediately ✅
16// 4. No context switching!
17// 5. Code and terminal visible simultaneously
18
19// Example workflow:
20// Editor:
21function fetchUser(id) {
22  return fetch(`/api/users/${id}`)
23    .then(res => res.json());
24}
25
26// Terminal (below):
27// $ npm run dev
28// > Server running on http://localhost:3000
29// > GET /api/users/123 200 45ms
30// ✅ See request logs while coding!

1┌──────────────────────────────────────────┐
2│ EDITOR                                   │
3│                                          │
4│ function processData() {                 │
5│   // Your code here                      │
6│ }                                        │
7│                                          │
8├──────────────────────────────────────────┤
9│ ▼ TERMINAL                   ⊕  ⊞  ⋮   │
10│ ┌──────────────────────────────────────┐ │
11│ │ bash  │  npm  │  test  │             │ │
12│ ├──────────────────────────────────────┤ │
13│ │ $ npm run dev                        │ │
14│ │ > Server started on port 3000        │ │
15│ │ > Watching for changes...            │ │
16│ │ $ ▊                                  │ │
17│ └──────────────────────────────────────┘ │
18└──────────────────────────────────────────┘
19
20Legend:
21▼  - Collapse/expand terminal
22⊕  - New terminal
23⊞  - Split terminal
24⋮  - More options (kill terminal, rename, etc.)

1# Navigate your project
2cd src/components          # Change directory
3ls -la                     # List files
4pwd                        # Show current directory
5
6# Run development server
7npm run dev                # Start dev server
8# Terminal stays open, shows logs
9
10# Run tests in watch mode
11npm run test -- --watch    # Tests run continuously
12# See results immediately when you save files
13
14# Build project
15npm run build              # Build for production
16# Watch progress in terminal
17
18# Install dependencies
19npm install lodash         # Add package
20# See installation progress
21
22# Git operations
23git status                 # Check file changes
24git add .                  # Stage changes
25git commit -m "message"    # Commit
26# All without leaving VS Code!
27
28# Multiple commands simultaneously:
29# Terminal 1: npm run dev      (dev server)
30# Terminal 2: npm run test     (test watcher)
31# Terminal 3: git log --oneline (checking history)

1# Navigation
2Ctrl+`                    - Toggle terminal visibility
3Ctrl+Shift+`              - Create new terminal
4Ctrl+Shift+5              - Split terminal right
5Ctrl+PageUp/PageDown      - Switch between terminals
6
7# Editing
8Ctrl+C                    - Cancel current command
9Ctrl+L                    - Clear terminal
10Ctrl+A                    - Move cursor to start
11Ctrl+E                    - Move cursor to end
12Ctrl+U                    - Clear line before cursor
13Ctrl+K                    - Clear line after cursor
14
15# Terminal management
16Ctrl+Shift+K              - Kill terminal
17Ctrl+Shift+M              - Maximize terminal panel
18Alt+Click                 - Click to set cursor position
19
20# Copy/Paste
21Ctrl+C (with selection)   - Copy
22Ctrl+V                    - Paste
23Ctrl+Shift+C              - Copy (even without selection)
24Ctrl+Shift+V              - Paste

1// .vscode/settings.json
2
3{
4  // Default shell
5  "terminal.integrated.defaultProfile.windows": "Git Bash",
6  "terminal.integrated.defaultProfile.linux": "bash",
7  "terminal.integrated.defaultProfile.osx": "zsh",
8
9  // Font and appearance
10  "terminal.integrated.fontSize": 14,
11  "terminal.integrated.fontFamily": "Fira Code, Consolas, monospace",
12  "terminal.integrated.lineHeight": 1.2,
13
14  // Cursor
15  "terminal.integrated.cursorStyle": "line",
16  "terminal.integrated.cursorBlinking": true,
17
18  // Scrollback
19  "terminal.integrated.scrollback": 10000,
20
21  // Copy on selection
22  "terminal.integrated.copyOnSelection": true,
23
24  // Confirm before kill
25  "terminal.integrated.confirmOnKill": "always",
26
27  // Working directory
28  "terminal.integrated.cwd": "${workspaceFolder}",
29
30  // Split terminal location
31  "terminal.integrated.splitCwd": "workspaceRoot"
32}

1// Highlight command and run it
2
3// In JavaScript file:
4const testCommand = 'npm test';  // ← Select this text
5// Right-click → "Run Selected Text in Active Terminal"
6// Or: Ctrl+Shift+P → "Terminal: Run Selected Text"
7
8// Shell script:
9#!/bin/bash
10npm install
11npm run build
12npm test
13
14// Select all three lines → Run in terminal
15// All commands execute in sequence ✅

1// settings.json - Define multiple terminal profiles
2
3{
4  "terminal.integrated.profiles.windows": {
5    "PowerShell": {
6      "path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
7      "icon": "terminal-powershell",
8      "args": ["-NoLogo"]
9    },
10    "Git Bash": {
11      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
12      "icon": "terminal-bash"
13    },
14    "Command Prompt": {
15      "path": "C:\\Windows\\System32\\cmd.exe",
16      "icon": "terminal-cmd"
17    },
18    "WSL Ubuntu": {
19      "path": "C:\\Windows\\System32\\wsl.exe",
20      "args": ["-d", "Ubuntu"],
21      "icon": "terminal-ubuntu"
22    },
23    "Node.js": {
24      "path": "C:\\Program Files\\nodejs\\node.exe",
25      "args": [],
26      "icon": "terminal"
27    }
28  },
29
30  "terminal.integrated.profiles.linux": {
31    "bash": {
32      "path": "/bin/bash",
33      "icon": "terminal-bash"
34    },
35    "zsh": {
36      "path": "/usr/bin/zsh",
37      "icon": "terminal"
38    },
39    "fish": {
40      "path": "/usr/bin/fish",
41      "icon": "terminal"
42    }
43  },
44
45  "terminal.integrated.profiles.osx": {
46    "zsh": {
47      "path": "/bin/zsh",
48      "args": ["-l"],
49      "icon": "terminal"
50    },
51    "bash": {
52      "path": "/bin/bash",
53      "args": ["-l"],
54      "icon": "terminal-bash"
55    }
56  },
57
58  // Set default profile
59  "terminal.integrated.defaultProfile.windows": "Git Bash"
60}

1// Create profiles for specific tasks
2
3{
4  "terminal.integrated.profiles.windows": {
5    "Frontend Dev": {
6      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
7      "env": {
8        "NODE_ENV": "development",
9        "PORT": "3000"
10      },
11      "icon": "react"
12    },
13    "Backend Dev": {
14      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
15      "env": {
16        "NODE_ENV": "development",
17        "DB_HOST": "localhost",
18        "DB_PORT": "5432"
19      },
20      "icon": "server"
21    },
22    "Testing": {
23      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
24      "env": {
25        "NODE_ENV": "test",
26        "CI": "true"
27      },
28      "icon": "beaker"
29    },
30    "Production Build": {
31      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
32      "env": {
33        "NODE_ENV": "production"
34      },
35      "icon": "rocket"
36    }
37  }
38}

1# Method 1: Click + dropdown in terminal panel
2# Terminal panel → + ▼ → Select profile
3
4# Method 2: Command Palette
5# Ctrl+Shift+P → "Terminal: Select Default Profile"
6# Choose from configured profiles
7
8# Method 3: Keyboard shortcut
9# Create multiple terminals with different profiles:
10# 1. Open terminal (Ctrl+`)
11# 2. Click + ▼ → "Git Bash"
12# 3. Click + ▼ → "PowerShell"
13# 4. Click + ▼ → "WSL Ubuntu"
14# Now have 3 terminals with different shells ✅
15
16# Scenario: Full-stack development
17# Terminal 1 (Git Bash): npm run dev        (frontend)
18# Terminal 2 (WSL Ubuntu): npm run server   (backend)
19# Terminal 3 (PowerShell): docker-compose up (database)

1// Different environment variables for different profiles
2
3{
4  "terminal.integrated.profiles.windows": {
5    "Development": {
6      "path": "bash.exe",
7      "env": {
8        "NODE_ENV": "development",
9        "API_URL": "http://localhost:3001/api",
10        "LOG_LEVEL": "debug"
11      }
12    },
13    "Staging": {
14      "path": "bash.exe",
15      "env": {
16        "NODE_ENV": "staging",
17        "API_URL": "https://staging-api.example.com/api",
18        "LOG_LEVEL": "info"
19      }
20    },
21    "Production": {
22      "path": "bash.exe",
23      "env": {
24        "NODE_ENV": "production",
25        "API_URL": "https://api.example.com/api",
26        "LOG_LEVEL": "error"
27      }
28    }
29  }
30}
31
32// Use case:
33// Open "Development" terminal → API points to localhost
34// Open "Staging" terminal → API points to staging server
35// Test against different environments without changing .env files!

1# Bash customization (.bashrc or .bash_profile)
2
3# Aliases for common commands
4alias ll='ls -lah'
5alias gs='git status'
6alias gp='git pull'
7alias gc='git commit -m'
8alias nrd='npm run dev'
9alias nrt='npm run test'
10alias nrb='npm run build'
11
12# Colored output
13export CLICOLOR=1
14export LSCOLORS=GxFxCxDxBxegedabagaced
15
16# Git branch in prompt
17parse_git_branch() {
18  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
19}
20
21# Custom prompt
22export PS1="\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\]\$ "
23# Shows: user@host:~/project (main) $
24
25# Functions for common tasks
26dev() {
27  npm install && npm run dev
28}
29
30test-watch() {
31  npm run test -- --watch
32}
33
34deploy() {
35  npm run build && npm run deploy
36}
37
38# Usage in terminal:
39# $ dev              → Install deps and start dev server
40# $ test-watch       → Run tests in watch mode
41# $ deploy           → Build and deploy

1# PowerShell profile ($PROFILE)
2
3# Aliases
4Set-Alias -Name ll -Value Get-ChildItem
5Set-Alias -Name g -Value git
6
7# Functions
8function dev {
9    npm install
10    npm run dev
11}
12
13function test {
14    npm run test
15}
16
17# Custom prompt with Git branch
18function prompt {
19    $path = (Get-Location).Path.Replace($HOME, "~")
20    $branch = git branch --show-current 2>$null
21
22    if ($branch) {
23        Write-Host "$path " -NoNewline -ForegroundColor Blue
24        Write-Host "($branch)" -NoNewline -ForegroundColor Yellow
25    } else {
26        Write-Host "$path" -NoNewline -ForegroundColor Blue
27    }
28
29    return "> "
30}
31
32# Output: ~/project (main) >

1# Oh My Zsh themes and plugins
2ZSH_THEME="agnoster"  # or "robbyrussell", "powerlevel10k"
3
4plugins=(
5  git
6  node
7  npm
8  docker
9  kubectl
10  zsh-autosuggestions
11  zsh-syntax-highlighting
12)
13
14# Aliases
15alias zshconfig="code ~/.zshrc"
16alias ohmyzsh="code ~/.oh-my-zsh"
17
18# Node version manager
19export NVM_DIR="$HOME/.nvm"
20[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
21
22# Auto-suggestions (as you type)
23# Displays gray suggestions based on history
24# Press → to accept
25
26# Syntax highlighting
27# Valid commands: green
28# Invalid commands: red

1# Create split terminal layout
2
3# Horizontal split (side-by-side):
4# Terminal panel → ⊞ icon
5# Or: Right-click terminal → Split Terminal
6# Or: Ctrl+Shift+5
7
8# Result:
9┌──────────────────────────────────────┐
10│ Terminal 1      │ Terminal 2         │
11│ $ npm run dev   │ $ npm run test    │
12│ Server started  │ Tests running...  │
13│ Port 3000       │ 15 passed         │
14└──────────────────────────────────────┘
15
16# Vertical split:
17# Currently not directly supported
18# Workaround: Create new terminal tab
19
20# Multiple splits:
21┌──────────────────────────────────────┐
22│ Term 1    │ Term 2    │ Term 3       │
23│ frontend  │ backend   │ docker       │
24└──────────────────────────────────────┘

1# Workflow 1: Full-stack development
2# Terminal 1: Frontend
3$ cd frontend
4$ npm run dev
5# Next.js started on http://localhost:3000
6
7# Terminal 2: Backend API
8$ cd backend
9$ npm run server
10# API server listening on http://localhost:3001
11
12# Terminal 3: Database
13$ docker-compose up postgres
14# PostgreSQL ready to accept connections
15
16# Terminal 4: Testing
17$ npm run test:watch
18# Jest watching for changes...
19
20# All running simultaneously! ✅
21
22# Workflow 2: Monorepo development
23# Terminal 1: Root workspace
24$ npm run dev
25# Running all packages concurrently
26
27# Terminal 2: Specific package
28$ cd packages/ui
29$ npm run storybook
30# Storybook running on http://localhost:6006
31
32# Terminal 3: Git operations
33$ git status
34$ git add .
35$ git commit -m "Update UI components"
36
37# Workflow 3: DevOps/Deployment
38# Terminal 1: Build watch
39$ npm run build:watch
40# Rebuilding on changes...
41
42# Terminal 2: Docker
43$ docker-compose up
44# All services running
45
46# Terminal 3: Logs
47$ docker-compose logs -f api
48# Following API logs
49
50# Terminal 4: Database shell
51$ docker-compose exec db psql -U postgres
52# PostgreSQL interactive shell

1# Rename terminals for clarity
2
3# Right-click terminal tab → Rename
4# Or: Ctrl+Shift+P → "Terminal: Rename"
5
6# Before:
7bash  bash  bash  bash  # Confusing!
8
9# After:
10frontend  backend  docker  tests  # Clear! ✅
11
12# Use icons for quick identification:
13# Right-click → Change Icon
14# Available icons:
15# - rocket (deployment)
16# - server (backend)
17# - react (frontend)
18# - beaker (testing)
19# - database
20# - tools
21
22# Result:
23🚀 deploy  🖥️ backend  ⚛️ frontend  🧪 tests

1// Organize terminals into groups
2
3// .vscode/tasks.json
4{
5  "version": "2.0.0",
6  "tasks": [
7    {
8      "label": "Start Development Environment",
9      "dependsOn": [
10        "Start Frontend",
11        "Start Backend",
12        "Start Database"
13      ],
14      "problemMatcher": []
15    },
16    {
17      "label": "Start Frontend",
18      "type": "shell",
19      "command": "npm run dev",
20      "options": {
21        "cwd": "${workspaceFolder}/frontend"
22      },
23      "presentation": {
24        "group": "development",
25        "panel": "dedicated"
26      }
27    },
28    {
29      "label": "Start Backend",
30      "type": "shell",
31      "command": "npm run server",
32      "options": {
33        "cwd": "${workspaceFolder}/backend"
34      },
35      "presentation": {
36        "group": "development",
37        "panel": "dedicated"
38      }
39    },
40    {
41      "label": "Start Database",
42      "type": "shell",
43      "command": "docker-compose up postgres",
44      "presentation": {
45        "group": "development",
46        "panel": "dedicated"
47      }
48    }
49  ]
50}
51
52// Run task:
53// Ctrl+Shift+P → "Tasks: Run Task" → "Start Development Environment"
54// → Opens 3 terminals in "development" group
55// → All services start automatically ✅

1// Handle long-running output
2
3{
4  // Increase scrollback buffer
5  "terminal.integrated.scrollback": 10000,  // Default: 1000
6
7  // Useful for:
8  // - Long build outputs
9  // - Continuous logs
10  // - Test results
11
12  // Navigate large output:
13  // Ctrl+Home - Jump to top
14  // Ctrl+End - Jump to bottom
15  // Ctrl+F - Find in terminal
16  // Shift+PgUp/PgDn - Scroll page
17}

1# Kill terminal
2# Click trash icon
3# Or: Ctrl+D (in terminal)
4# Or: Ctrl+Shift+K (kill active terminal)
5
6# Kill all terminals
7# Terminal panel menu → Kill All Terminals
8
9# Restart terminal
10# Some terminals auto-restart on error
11# Configure in settings:
12
13{
14  "terminal.integrated.confirmOnKill": "editor",
15  // Prompts before killing if process running
16
17  "terminal.integrated.confirmOnExit": true
18  // Warns when closing VS Code with active terminals
19}
20
21# Scenario: Process crashed
22# Terminal shows: "Process exited with code 1"
23# Click "Relaunch" button
24# Or: Click + → Same profile

1# When to use tabs:
2# - Many terminals (>4)
3# - Different contexts (dev/test/deploy)
4# - Can't see all simultaneously
5
6# When to use splits:
7# - 2-3 terminals
8# - Need to see all outputs simultaneously
9# - Related tasks (frontend + backend)
10
11# Optimal setup:
12# Tab 1 (Split): frontend | backend
13# Tab 2 (Split): tests | docker logs
14# Tab 3 (Single): git operations
15# Tab 4 (Single): general commands
16
17# Switch tabs:
18# Ctrl+PageUp/PageDown
19# Or: Click tab names

1{
2  "version": "2.0.0",
3  "tasks": [
4    {
5      "label": "Start Development Server",
6      "type": "shell",
7      "command": "npm run dev",
8      "problemMatcher": [],
9      "presentation": {
10        "reveal": "always",
11        "panel": "new"
12      }
13    },
14    {
15      "label": "Run Tests",
16      "type": "shell",
17      "command": "npm test",
18      "problemMatcher": [],
19      "group": {
20        "kind": "test",
21        "isDefault": true
22      }
23    },
24    {
25      "label": "Build Production",
26      "type": "shell",
27      "command": "npm run build",
28      "problemMatcher": [],
29      "group": {
30        "kind": "build",
31        "isDefault": true
32      }
33    },
34    {
35      "label": "Lint Code",
36      "type": "shell",
37      "command": "npm run lint -- --fix",
38      "problemMatcher": "$eslint-stylish"
39    },
40    {
41      "label": "Type Check",
42      "type": "shell",
43      "command": "npx tsc --noEmit",
44      "problemMatcher": "$tsc"
45    }
46  ]
47}

1# Method 1: Command Palette
2# Ctrl+Shift+P → "Tasks: Run Task"
3# Select task from list
4# Task executes in terminal
5
6# Method 2: Quick Open
7# Ctrl+P → "task " → Select task
8
9# Method 3: Keyboard Shortcuts
10# Ctrl+Shift+B  → Run build task (default)
11# Ctrl+Shift+T  → Run test task (default)
12
13# Method 4: Terminal menu
14# Terminal → Run Task...
15
16# Example workflow:
17# 1. Press Ctrl+Shift+B
18# 2. "Build Production" task runs
19# 3. Terminal opens showing build progress
20# 4. Build completes → Notification appears ✅

1{
2  "tasks": [
3    {
4      "label": "Clean",
5      "type": "shell",
6      "command": "rm -rf dist"
7    },
8    {
9      "label": "Build TypeScript",
10      "type": "shell",
11      "command": "tsc",
12      "problemMatcher": "$tsc"
13    },
14    {
15      "label": "Copy Assets",
16      "type": "shell",
17      "command": "cp -r public/* dist/"
18    },
19    {
20      "label": "Full Build",
21      "dependsOn": [
22        "Clean",
23        "Build TypeScript",
24        "Copy Assets"
25      ],
26      "dependsOrder": "sequence",
27      "problemMatcher": []
28    }
29  ]
30}
31
32// Run "Full Build" task:
33// 1. Cleans dist folder
34// 2. Compiles TypeScript
35// 3. Copies assets
36// All in correct order! ✅
37
38// Parallel execution:
39{
40  "label": "Start All Services",
41  "dependsOn": [
42    "Start Frontend",
43    "Start Backend",
44    "Start Database"
45  ],
46  "dependsOrder": "parallel",
47  "problemMatcher": []
48}
49
50// Starts all three services simultaneously!

1{
2  "tasks": [
3    {
4      "label": "TypeScript Build",
5      "type": "shell",
6      "command": "tsc",
7      "problemMatcher": "$tsc"
8      // Parses TypeScript errors
9      // Shows in Problems panel
10    },
11    {
12      "label": "ESLint",
13      "type": "shell",
14      "command": "eslint . --ext .ts,.tsx",
15      "problemMatcher": "$eslint-stylish"
16      // Parses ESLint errors
17    },
18    {
19      "label": "Webpack Build",
20      "type": "shell",
21      "command": "webpack",
22      "problemMatcher": {
23        "owner": "webpack",
24        "pattern": {
25          "regexp": "^ERROR in (.*)\((\d+),(\d+)\): (.*)$",
26          "file": 1,
27          "line": 2,
28          "column": 3,
29          "message": 4
30        }
31      }
32      // Custom pattern for webpack output
33    }
34  ]
35}
36
37// Result:
38// Errors appear in Problems panel (Ctrl+Shift+M)
39// Click error → Jump to source location
40// Fix errors with IDE hints ✅

1{
2  "tasks": [
3    {
4      "label": "Watch Mode",
5      "type": "shell",
6      "command": "npm run watch",
7      "isBackground": true,
8      "problemMatcher": {
9        "pattern": {
10          "regexp": "."
11        },
12        "background": {
13          "activeOnStart": true,
14          "beginsPattern": "^Compilation starting",
15          "endsPattern": "^Compilation complete"
16        }
17      }
18    }
19  ]
20}
21
22// Background task:
23// - Runs in background
24// - Doesn't block other tasks
25// - Perfect for watchers, dev servers
26
27// Regular task:
28// - Runs to completion
29// - Blocks until finished
30// - Perfect for builds, tests

1{
2  "tasks": [
3    // Install dependencies
4    {
5      "label": "Install Dependencies",
6      "type": "shell",
7      "command": "npm install",
8      "presentation": {
9        "echo": true,
10        "reveal": "always",
11        "focus": false,
12        "panel": "shared"
13      }
14    },
15
16    // Run database migrations
17    {
18      "label": "Run Migrations",
19      "type": "shell",
20      "command": "npx prisma migrate dev",
21      "options": {
22        "cwd": "${workspaceFolder}/backend"
23      }
24    },
25
26    // Start Docker services
27    {
28      "label": "Start Docker",
29      "type": "shell",
30      "command": "docker-compose up -d",
31      "presentation": {
32        "reveal": "always"
33      }
34    },
35
36    // Deploy to staging
37    {
38      "label": "Deploy Staging",
39      "type": "shell",
40      "command": "npm run deploy:staging",
41      "presentation": {
42        "reveal": "always",
43        "focus": true
44      }
45    },
46
47    // Generate documentation
48    {
49      "label": "Generate Docs",
50      "type": "shell",
51      "command": "npx typedoc",
52      "problemMatcher": []
53    },
54
55    // Database seed
56    {
57      "label": "Seed Database",
58      "type": "shell",
59      "command": "npm run db:seed",
60      "dependsOn": ["Run Migrations"]
61    }
62  ]
63}

1{
2  "tasks": [
3    {
4      "label": "Build Current File",
5      "type": "shell",
6      "command": "tsc ${file}",
7      // ${file} - Current file path
8    },
9    {
10      "label": "Run Current Test File",
11      "type": "shell",
12      "command": "jest ${relativeFile}",
13      // ${relativeFile} - File relative to workspace
14    },
15    {
16      "label": "Deploy",
17      "type": "shell",
18      "command": "deploy ${workspaceFolder}/dist",
19      // ${workspaceFolder} - Workspace root
20    }
21  ]
22}
23
24// Available variables:
25// ${workspaceFolder}     - Workspace root
26// ${file}                - Current file absolute path
27// ${relativeFile}        - Current file relative path
28// ${fileBasename}        - Current file name
29// ${fileBasenameNoExtension} - File name without extension
30// ${fileDirname}         - Current file directory
31// ${lineNumber}          - Current line number
32// ${selectedText}        - Selected text
33// ${env:NAME}            - Environment variable

1{
2  "tasks": [
3    {
4      "label": "Example Task",
5      "type": "shell",
6      "command": "npm run dev",
7      "presentation": {
8        "echo": true,        // Show command being run
9        "reveal": "always",  // always|never|silent
10        "focus": false,      // Don't focus terminal
11        "panel": "dedicated",// shared|dedicated|new
12        "showReuseMessage": true,
13        "clear": false       // Don't clear before running
14      }
15    }
16  ]
17}
18
19// Reveal options:
20// - always: Always show terminal
21// - never: Don't show terminal
22// - silent: Show only if errors
23
24// Panel options:
25// - shared: Reuse same terminal
26// - dedicated: One terminal per task
27// - new: Always new terminal

1// Use programming fonts with ligatures
2
3{
4  "terminal.integrated.fontFamily": "Fira Code, Cascadia Code, JetBrains Mono",
5  "terminal.integrated.fontSize": 14,
6  "terminal.integrated.fontWeight": "normal",
7  "terminal.integrated.lineHeight": 1.2,
8
9  // Enable font ligatures (if font supports)
10  "terminal.integrated.fontLigatures": true
11}
12
13// Font ligatures examples:
14// != becomes ≠
15// => becomes ⇒
16// >= becomes ≥
17// -> becomes →
18
19// Popular coding fonts:
20// - Fira Code (ligatures)
21// - Cascadia Code (ligatures)
22// - JetBrains Mono (ligatures)
23// - Source Code Pro
24// - Consolas (Windows)
25// - Menlo (macOS)

1{
2  // Match editor theme
3  "terminal.integrated.inheritEnv": true,
4
5  // Custom colors
6  "workbench.colorCustomizations": {
7    "terminal.background": "#1e1e1e",
8    "terminal.foreground": "#d4d4d4",
9    "terminal.ansiBlack": "#1e1e1e",
10    "terminal.ansiRed": "#f48771",
11    "terminal.ansiGreen": "#a8cc8c",
12    "terminal.ansiYellow": "#e5c07b",
13    "terminal.ansiBlue": "#61afef",
14    "terminal.ansiMagenta": "#c678dd",
15    "terminal.ansiCyan": "#56b6c2",
16    "terminal.ansiWhite": "#d4d4d4"
17  },
18
19  // Cursor style
20  "terminal.integrated.cursorStyle": "line", // line|block|underline
21  "terminal.integrated.cursorBlinking": true,
22  "terminal.integrated.cursorWidth": 2
23}

1{
2  // Command decorations (success/error indicators)
3  "terminal.integrated.shellIntegration.enabled": true,
4
5  // Features enabled:
6  // ✓ Success indicator (green checkmark)
7  // ✗ Error indicator (red X)
8  // Command history navigation
9  // Output folding
10  // Quick fixes for errors
11}
12
13// Command navigation:
14// Ctrl+↑  - Previous command in history
15// Ctrl+↓  - Next command in history
16// Ctrl+R  - Search command history (in shell)

1# Access command history in terminal
2
3# Search history (most shells):
4Ctrl+R              # Reverse search
5# Type to search previous commands
6# Press Ctrl+R again for next match
7
8# Navigate history:
9↑                   # Previous command
10↓                   # Next command
11
12# History file locations:
13# Bash: ~/.bash_history
14# Zsh: ~/.zsh_history
15# PowerShell: (Get-PSReadlineOption).HistorySavePath
16
17# Useful history commands:
18history             # Show all commands
19history | grep npm  # Search history
20!123                # Run command #123 from history
21!!                  # Run last command
22!$                  # Last argument of previous command
23
24# Example:
25$ npm install lodash
26$ npm install !$    # Runs: npm install lodash

1# .bashrc or .zshrc
2
3# Git aliases
4alias gs='git status'
5alias ga='git add'
6alias gc='git commit -m'
7alias gp='git push'
8alias gl='git pull'
9alias gco='git checkout'
10alias gb='git branch'
11
12# NPM aliases
13alias ni='npm install'
14alias nis='npm install --save'
15alias nid='npm install --save-dev'
16alias nrd='npm run dev'
17alias nrb='npm run build'
18alias nrt='npm run test'
19alias nrs='npm run start'
20
21# Directory navigation
22alias ..='cd ..'
23alias ...='cd ../..'
24alias ....='cd ../../..'
25alias ~='cd ~'
26
27# Directory listing
28alias ll='ls -lah'
29alias la='ls -A'
30alias l='ls -CF'
31
32# Project-specific
33alias dev='npm install && npm run dev'
34alias build='npm run build && npm run test'
35alias deploy='npm run build && npm run deploy'
36
37# Docker
38alias dc='docker-compose'
39alias dcu='docker-compose up'
40alias dcd='docker-compose down'
41alias dcl='docker-compose logs -f'
42
43# Usage:
44$ gs                # Instead of: git status
45$ nrd               # Instead of: npm run dev
46$ dev               # Install and run dev server

1# Install Z (directory jumper)
2# Bash/Zsh: brew install z
3# Or: git clone https://github.com/rupa/z.git
4
5# Add to .bashrc or .zshrc:
6. /usr/local/etc/profile.d/z.sh
7
8# Usage after visiting directories:
9$ cd ~/projects/my-app/src/components
10$ cd ~/projects/another-app/backend
11$ cd ~/work/client-project
12
13# Now jump directly:
14$ z comp        # Jumps to ~/projects/my-app/src/components
15$ z backend     # Jumps to ~/projects/another-app/backend
16$ z client      # Jumps to ~/work/client-project
17
18# Frecent algorithm: Frequency + Recency
19# Most used + recently used = prioritized
20
21# See all ranked directories:
22$ z -l
23
24# VS Code integration:
25# Jump to directory and open VS Code:
26$ z comp && code .

1# Install fzf
2# macOS: brew install fzf
3# Linux: git clone https://github.com/junegunn/fzf.git ~/.fzf && ~/.fzf/install
4
5# Add to .bashrc or .zshrc:
6[ -f ~/.fzf.bash ] && source ~/.fzf.bash  # Bash
7[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh    # Zsh
8
9# Features:
10
11# 1. Fuzzy file search
12Ctrl+T              # Search files and directories
13# Type to filter, Enter to select
14# Selected file path inserted at cursor
15
16# 2. Command history search
17Ctrl+R              # Search command history with fuzzy matching
18# Much better than default Ctrl+R!
19
20# 3. Directory navigation
21Alt+C (or Esc+C)    # Fuzzy find directory and cd into it
22
23# 4. In scripts:
24# Find and open file in VS Code:
25code $(fzf)
26
27# Find and delete file:
28rm $(fzf)
29
30# Git add with fuzzy search:
31git add $(git status --short | fzf | awk '{print $2}')
32
33# Kill process by name:
34kill -9 $(ps aux | fzf | awk '{print $2}')

1# bat - Better cat with syntax highlighting
2# Install: brew install bat
3
4# Usage:
5bat file.js         # Shows file with syntax highlighting
6bat package.json    # JSON with colors!
7
8# Alias cat to bat:
9alias cat='bat'
10
11# exa - Better ls with colors and icons
12# Install: brew install exa
13
14# Usage:
15exa                 # List files with colors
16exa -la             # Long format with hidden files
17exa --tree          # Tree view
18exa --git           # Show git status
19
20# Alias ls to exa:
21alias ls='exa'
22alias ll='exa -la'
23alias tree='exa --tree'
24
25# fd - Better find
26# Install: brew install fd
27
28# Usage:
29fd pattern          # Find files matching pattern
30fd ".js$"          # Find all .js files
31fd --type f         # Files only
32fd --type d         # Directories only
33
34# ripgrep - Better grep (already covered in CLI lesson)
35# Install: brew install ripgrep
36
37# Usage:
38rg "function"       # Search for pattern in files
39rg -i "error"       # Case-insensitive search
40rg --type js "import"  # Search only in JS files

1# tmux - Terminal multiplexer for persistent sessions
2# Install: brew install tmux
3
4# Create session:
5tmux new -s dev
6
7# Detach from session:
8Ctrl+B, D
9
10# List sessions:
11tmux ls
12
13# Attach to session:
14tmux attach -t dev
15
16# Split panes:
17Ctrl+B, %           # Split horizontally
18Ctrl+B, "           # Split vertically
19
20# Navigate panes:
21Ctrl+B, Arrow       # Move between panes
22
23# Create window:
24Ctrl+B, C           # New window
25
26# Switch windows:
27Ctrl+B, N           # Next window
28Ctrl+B, P           # Previous window
29
30# Use case:
31# SSH to server → Start tmux → Run long process → Detach
32# Connection lost? → Reconnect → Reattach tmux → Process still running! ✅

1// Auto-run tasks when files change
2
3{
4  "tasks": [
5    {
6      "label": "Watch and Build",
7      "type": "shell",
8      "command": "tsc --watch",
9      "problemMatcher": "$tsc-watch",
10      "isBackground": true,
11      "runOptions": {
12        "runOn": "folderOpen"  // Run automatically when workspace opens
13      }
14    }
15  ]
16}
17
18// Combined with file watcher:
19// 1. Save TypeScript file
20// 2. tsc --watch detects change
21// 3. Compiles automatically
22// 4. Errors appear in Problems panel
23// 5. Fix and save again
24// → Instant feedback loop! ✅

1// Run commands when terminal opens
2
3{
4  "terminal.integrated.profiles.windows": {
5    "Dev Environment": {
6      "path": "bash.exe",
7      "args": ["-l", "-c", "cd ~/projects/my-app && npm run dev; exec bash"]
8      // Opens terminal, navigates to project, starts dev server
9    }
10  },
11
12  // Or in shell profile (.bashrc):
13  if [ "$VSCODE_TERMINAL" = "true" ]; then
14    cd ~/projects/current-project
15    echo "Welcome to current project!"
16    git status
17  fi
18}

1// Parse terminal output and create VS Code actions
2
3{
4  "terminal.integrated.enablePersistentSessions": true,
5  // Terminals persist across VS Code restarts
6
7  "terminal.integrated.enableImages": true,
8  // Display images in terminal (iTerm2 protocol)
9
10  "terminal.integrated.experimentalLinkProvider": true
11  // Clickable links in terminal output
12}
13
14// Example: Test output with file paths
15$ npm test
16// FAIL src/utils/calculator.test.ts
17//   ● Calculator › should add numbers
18//     Expected: 5
19//     Received: 4
20//       at Object.<anonymous> (src/utils/calculator.test.ts:10:23)
21
22// → Click "src/utils/calculator.test.ts:10:23"
23// → File opens at exact line! ✅

1# Terminal Management
2Ctrl+`                    - Toggle terminal
3Ctrl+Shift+`              - New terminal
4Ctrl+Shift+5              - Split terminal
5Ctrl+Shift+K              - Kill terminal
6Ctrl+PageUp/Down          - Switch terminals
7
8# Text Navigation
9Ctrl+A                    - Start of line
10Ctrl+E                    - End of line
11Ctrl+← / Ctrl+→           - Move by word
12Alt+B / Alt+F             - Move backward/forward word (bash/zsh)
13
14# Text Editing
15Ctrl+U                    - Delete to start of line
16Ctrl+K                    - Delete to end of line
17Ctrl+W                    - Delete previous word
18Alt+D                     - Delete next word
19Ctrl+Y                    - Paste (yank) deleted text
20
21# Command Execution
22Ctrl+C                    - Cancel command
23Ctrl+D                    - EOF / Exit terminal
24Ctrl+L                    - Clear screen
25Ctrl+R                    - Search history
26↑ / ↓                     - Previous/next command
27
28# Copy/Paste
29Ctrl+Shift+C              - Copy
30Ctrl+Shift+V              - Paste
31Ctrl+Insert               - Copy (alternative)
32Shift+Insert              - Paste (alternative)
33
34# Terminal Search
35Ctrl+F                    - Find in terminal
36Ctrl+Shift+F              - Find in all terminals
37F3 / Shift+F3             - Next/previous match

1// Workspace-specific terminal configuration
2// .code-workspace file
3
4{
5  "folders": [
6    { "path": "frontend" },
7    { "path": "backend" },
8    { "path": "shared" }
9  ],
10  "settings": {
11    "terminal.integrated.cwd": "${workspaceFolder}",
12
13    "tasks": {
14      "version": "2.0.0",
15      "tasks": [
16        {
17          "label": "Start All",
18          "dependsOn": [
19            "Frontend Dev",
20            "Backend Dev"
21          ],
22          "dependsOrder": "parallel"
23        },
24        {
25          "label": "Frontend Dev",
26          "type": "shell",
27          "command": "npm run dev",
28          "options": { "cwd": "${workspaceFolder}/frontend" }
29        },
30        {
31          "label": "Backend Dev",
32          "type": "shell",
33          "command": "npm run server",
34          "options": { "cwd": "${workspaceFolder}/backend" }
35        }
36      ]
37    }
38  }
39}
40
41// One command starts entire stack! ✅

1{
2  // Reduce terminal lag
3
4  "terminal.integrated.gpuAcceleration": "auto",
5  // Use GPU for rendering (faster)
6
7  "terminal.integrated.rendererType": "dom",
8  // canvas|dom|experimentalWebgl
9  // Try different options if slow
10
11  "terminal.integrated.fastScrollSensitivity": 5,
12  // Scrolling speed
13
14  "terminal.integrated.smoothScrolling": true,
15  // Smooth scroll animation
16
17  "terminal.integrated.shellIntegration.enabled": false,
18  // Disable if causing performance issues
19
20  "terminal.integrated.persistentSessionReviveProcess": "never"
21  // Don't restore terminals on restart
22  // Faster VS Code startup
23}

1# Common problems and solutions:
2
3# 1. Terminal not opening
4# → Check default shell path in settings
5# → Verify shell executable exists
6
7# 2. Colors not working
8# → Check TERM environment variable:
9echo $TERM
10# Should be: xterm-256color
11
12# → Set in settings:
13{
14  "terminal.integrated.env.windows": {
15    "TERM": "xterm-256color"
16  }
17}
18
19# 3. Slow terminal performance
20# → Disable GPU acceleration
21# → Reduce scrollback buffer
22# → Use simpler shell prompt
23
24# 4. Commands not found
25# → Check PATH environment variable:
26echo $PATH
27
28# → Ensure shell profile loads:
29{
30  "terminal.integrated.profiles.windows": {
31    "Git Bash": {
32      "path": "bash.exe",
33      "args": ["-l"]  # Load profile
34    }
35  }
36}
37
38# 5. Copy/paste not working
39# → Check terminal.integrated.copyOnSelection
40# → Use Ctrl+Shift+C/V instead of Ctrl+C/V
41
42# 6. Terminal character encoding issues
43# → Set encoding:
44{
45  "terminal.integrated.env.windows": {
46    "LANG": "en_US.UTF-8"
47  }
48}

1# Tip 1: Use terminal tabs strategically
2# Tab 1: Long-running processes (dev server)
3# Tab 2: Short commands (git, npm)
4# Tab 3: Monitoring (logs, docker)
5
6# Tip 2: Name your terminals
7# Right-click tab → Rename
8# Easier to find the right terminal
9
10# Tip 3: Use VS Code tasks for repeated commands
11# Don't type the same command over and over
12# Create a task and run with one click
13
14# Tip 4: Learn your shell's shortcuts
15# Ctrl+R for history search saves tons of time
16# Ctrl+A/E for line navigation
17
18# Tip 5: Customize your prompt
19# Show git branch, exit status, etc.
20# Makes terminal more informative
21
22# Tip 6: Use terminal splitting wisely
23# Don't split more than 2-3 terminals
24# Too many splits = hard to read
25
26# Tip 7: Close unused terminals
27# Keep terminal panel clean
28# Easier to focus on active work
29
30# Tip 8: Use background tasks
31# Long-running watchers should be background tasks
32# Don't block terminal unnecessarily