VS Code Complete Setup Guide

1# Method 1: Download from website
2# Visit: https://code.visualstudio.com
3# Download the User Installer (recommended) or System Installer
4# Run the installer
5
6# Method 2: Using Chocolatey (package manager)
7choco install vscode
8
9# Method 3: Using winget (Windows Package Manager)
10winget install Microsoft.VisualStudioCode
11
12# During installation, make sure to check:
13# ✓ Add "Open with Code" action to Windows Explorer context menu
14# ✓ Add "Open with Code" action to directory context menu
15# ✓ Register Code as an editor for supported file types
16# ✓ Add to PATH (important for terminal access)

1# Method 1: Download from website
2# Visit: https://code.visualstudio.com
3# Download the .zip file
4# Extract and drag to Applications folder
5
6# Method 2: Using Homebrew (recommended)
7brew install --cask visual-studio-code
8
9# Add 'code' command to PATH (if not using Homebrew):
10# 1. Open VS Code
11# 2. Press Cmd+Shift+P
12# 3. Type "shell command"
13# 4. Select "Shell Command: Install 'code' command in PATH"
14
15# Verify installation:
16code --version
17# Should output: 1.xx.x

1# Ubuntu/Debian:
2sudo apt update
3sudo apt install software-properties-common apt-transport-https wget
4wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
5sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
6sudo apt update
7sudo apt install code
8
9# Fedora/RHEL/CentOS:
10sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
11sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
12sudo dnf install code
13
14# Arch Linux:
15yay -S visual-studio-code-bin
16
17# Snap (universal):
18sudo snap install --classic code
19
20# Verify:
21code --version

1// After installation, VS Code will:
2// 1. Prompt you to choose a theme (Light, Dark, High Contrast)
3// 2. Ask about telemetry/data collection (opt in/out)
4// 3. Suggest installing language packs for non-English users
5// 4. Show the Welcome page with getting started resources
6
7// Command line usage:
8code .                    // Open current directory
9code myfile.js            // Open specific file
10code -n                   // New window
11code -r myproject         // Reuse window for folder
12code --diff file1 file2   // Compare two files
13code --goto file.js:10:5  // Open file at line 10, column 5

1// Verify VS Code is working:
2// 1. Open Command Palette: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
3// 2. Type "version" and verify installation
4// 3. Check integrated terminal: Ctrl+` or View > Terminal
5// 4. Test file creation: File > New File
6
7// Your installation is successful if all of these work!

1// Three ways to access settings:
2
3// 1. Command Palette (fastest)
4// Ctrl+Shift+P > "Preferences: Open Settings"
5
6// 2. Keyboard shortcut
7// Ctrl+, (Windows/Linux) or Cmd+, (macOS)
8
9// 3. Menu
10// File > Preferences > Settings (Windows/Linux)
11// Code > Preferences > Settings (macOS)
12
13// Two views:
14// - UI Settings: Visual interface (beginner-friendly)
15// - JSON Settings: Direct file editing (advanced)

1{
2  // Editor appearance
3  "editor.fontSize": 14,
4  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
5  "editor.fontLigatures": true,
6  "editor.lineHeight": 1.6,
7  "editor.letterSpacing": 0.5,
8
9  // Line numbers and guides
10  "editor.lineNumbers": "on",
11  "editor.renderWhitespace": "boundary",
12  "editor.rulers": [80, 120],
13  "editor.guides.indentation": true,
14
15  // Code behavior
16  "editor.tabSize": 2,
17  "editor.insertSpaces": true,
18  "editor.detectIndentation": true,
19  "editor.formatOnSave": true,
20  "editor.formatOnPaste": true,
21
22  // Auto-save (game-changer!)
23  "files.autoSave": "afterDelay",
24  "files.autoSaveDelay": 1000,
25
26  // Cursor and selection
27  "editor.cursorBlinking": "smooth",
28  "editor.cursorSmoothCaretAnimation": "on",
29  "editor.multiCursorModifier": "ctrlCmd",
30
31  // IntelliSense (code completion)
32  "editor.quickSuggestions": {
33    "other": true,
34    "comments": false,
35    "strings": true
36  },
37  "editor.suggestOnTriggerCharacters": true,
38  "editor.acceptSuggestionOnEnter": "on",
39  "editor.snippetSuggestions": "top",
40
41  // File handling
42  "files.trimTrailingWhitespace": true,
43  "files.insertFinalNewline": true,
44  "files.trimFinalNewlines": true,
45
46  // Terminal
47  "terminal.integrated.fontSize": 13,
48  "terminal.integrated.fontFamily": "monospace",
49  "terminal.integrated.cursorBlinking": true,
50
51  // Explorer
52  "explorer.confirmDelete": false,
53  "explorer.confirmDragAndDrop": false,
54  "explorer.compactFolders": false,
55
56  // Workbench
57  "workbench.startupEditor": "welcomePage",
58  "workbench.colorTheme": "One Dark Pro",
59  "workbench.iconTheme": "material-icon-theme",
60  "workbench.tree.indent": 20,
61
62  // Minimap (code overview on right)
63  "editor.minimap.enabled": true,
64  "editor.minimap.maxColumn": 120,
65
66  // Bracket pair colorization
67  "editor.bracketPairColorization.enabled": true,
68  "editor.guides.bracketPairs": "active",
69
70  // Git
71  "git.autofetch": true,
72  "git.confirmSync": false,
73  "git.enableSmartCommit": true,
74
75  // Security
76  "security.workspace.trust.enabled": true,
77
78  // Telemetry (privacy)
79  "telemetry.telemetryLevel": "off"
80}

1{
2  // Different settings for different languages
3  "[javascript]": {
4    "editor.defaultFormatter": "esbenp.prettier-vscode",
5    "editor.formatOnSave": true,
6    "editor.tabSize": 2
7  },
8  "[python]": {
9    "editor.defaultFormatter": "ms-python.black-formatter",
10    "editor.formatOnSave": true,
11    "editor.tabSize": 4
12  },
13  "[markdown]": {
14    "editor.wordWrap": "on",
15    "editor.quickSuggestions": false
16  },
17  "[json]": {
18    "editor.defaultFormatter": "esbenp.prettier-vscode",
19    "editor.tabSize": 2
20  }
21}

1{
2  // If VS Code feels slow, try these:
3  "files.watcherExclude": {
4    "**/.git/objects/**": true,
5    "**/.git/subtree-cache/**": true,
6    "**/node_modules/**": true,
7    "**/.hg/store/**": true,
8    "**/dist/**": true,
9    "**/build/**": true
10  },
11
12  "search.exclude": {
13    "**/node_modules": true,
14    "**/bower_components": true,
15    "**/*.code-search": true,
16    "**/dist": true,
17    "**/build": true
18  },
19
20  // Reduce CPU usage
21  "editor.minimap.renderCharacters": false,
22  "editor.smoothScrolling": false,
23  "editor.cursorSmoothCaretAnimation": "off"
24}

1// File Navigation
2Ctrl+P (Cmd+P)           // Quick Open - find any file by name
3Ctrl+Shift+P (Cmd+Shift+P) // Command Palette - access any command
4Ctrl+Tab                 // Switch between open files
5Ctrl+\ (Cmd+\)          // Split editor
6Ctrl+W (Cmd+W)           // Close current file
7Ctrl+Shift+T (Cmd+Shift+T) // Reopen closed file
8
9// Example workflow:
10// 1. Ctrl+P > type "user.js" > Enter (opens file)
11// 2. Ctrl+\ (splits editor)
12// 3. Ctrl+P > type "user.test.js" > Enter (opens test in split)

1// Moving around code efficiently
2F12                      // Go to Definition
3Alt+F12                  // Peek Definition (inline view)
4Shift+F12                // Find All References
5Ctrl+Shift+O (Cmd+Shift+O) // Go to Symbol in File
6Ctrl+T (Cmd+T)           // Go to Symbol in Workspace
7Ctrl+G (Cmd+G)           // Go to Line Number
8Ctrl+Home/End            // Jump to file start/end
9
10// Example: Understanding a function
11function processUser(user) {
12  // 1. Place cursor on "User" type
13  // 2. Press F12 to jump to interface definition
14  // 3. Press Alt+Left to go back
15  // 4. Press Shift+F12 to see all usages
16  return transformUser(user);
17}

1// Multi-cursor editing (powerful!)
2Ctrl+D (Cmd+D)           // Select next occurrence
3Ctrl+Shift+L (Cmd+Shift+L) // Select all occurrences
4Alt+Click                // Add cursor at click position
5Ctrl+Alt+Up/Down         // Add cursor above/below
6
7// Example: Rename multiple occurrences
8const user = getUser();
9console.log(user.name);    // Select "user", press Ctrl+D twice
10console.log(user.email);   // All selected, type new name
11console.log(user.age);
12
13// Line manipulation
14Ctrl+X (Cmd+X)           // Cut line (no selection needed)
15Ctrl+C (Cmd+C)           // Copy line
16Ctrl+V (Cmd+V)           // Paste
17Alt+Up/Down              // Move line up/down
18Shift+Alt+Up/Down        // Copy line up/down
19Ctrl+Shift+K (Cmd+Shift+K) // Delete line
20Ctrl+Enter (Cmd+Enter)   // Insert line below
21Ctrl+Shift+Enter         // Insert line above
22
23// Code folding
24Ctrl+Shift+[ (Cmd+Shift+[) // Fold region
25Ctrl+Shift+] (Cmd+Shift+]) // Unfold region
26Ctrl+K Ctrl+0            // Fold all
27Ctrl+K Ctrl+J            // Unfold all

1// Finding and replacing
2Ctrl+F (Cmd+F)           // Find in current file
3Ctrl+H (Cmd+H)           // Replace in current file
4Ctrl+Shift+F (Cmd+Shift+F) // Find in all files
5Ctrl+Shift+H (Cmd+Shift+H) // Replace in all files
6
7// Search modifiers (click icons or use shortcuts)
8Alt+C                    // Toggle case sensitivity
9Alt+W                    // Toggle whole word
10Alt+R                    // Toggle regex
11
12// Example regex search:
13// Find all console.log statements:
14// Search: console\.log\(.*\)
15// Replace with comments: // console.log($1)

1# Terminal management
2Ctrl+`                   # Toggle integrated terminal
3Ctrl+Shift+`             # Create new terminal
4Ctrl+Shift+5             # Split terminal
5Ctrl+PageUp/PageDown     # Switch between terminals
6
7# Workflow example:
8npm run dev              # Start dev server (Terminal 1)
9# Ctrl+Shift+` to create new terminal
10git status               # Check git status (Terminal 2)

1F5                       // Start debugging
2Shift+F5                 // Stop debugging
3Ctrl+Shift+F5 (Cmd+Shift+F5) // Restart debugging
4F9                       // Toggle breakpoint
5F10                      // Step over
6F11                      // Step into
7Shift+F11                // Step out
8
9// Example debugging session:
10function calculateTotal(items) {
11  let total = 0;  // F9 here to set breakpoint
12  for (const item of items) {  // F5 to start, F10 to step over
13    total += item.price;  // F11 to step into if needed
14  }
15  return total;
16}

1// Open keyboard shortcuts: Ctrl+K Ctrl+S
2// Or: File > Preferences > Keyboard Shortcuts
3
4// Click on any shortcut to modify it
5// Or search for command and assign new shortcut
6
7// Example custom shortcuts (keybindings.json):
8[
9  {
10    "key": "ctrl+shift+d",
11    "command": "editor.action.copyLinesDownAction"
12  },
13  {
14    "key": "ctrl+k ctrl+c",
15    "command": "editor.action.commentLine"
16  }
17]

1// Method 1: Extensions marketplace
2// 1. Click Extensions icon (Ctrl+Shift+X)
3// 2. Search "theme"
4// 3. Click Install on desired theme
5// 4. Click "Set Color Theme"
6
7// Method 2: Command Palette
8// 1. Ctrl+Shift+P > "Color Theme"
9// 2. Browse installed themes
10// 3. Preview with arrow keys
11// 4. Enter to apply

1// Top themes for different preferences:
2
3// Dark themes (most popular):
4{
5  "one-dark-pro": "Atom's iconic One Dark theme",
6  "dracula-official": "Beautiful purple-based dark theme",
7  "github-theme": "GitHub's official theme",
8  "material-theme": "Material Design inspired",
9  "night-owl": "Optimized for night coding",
10  "monokai-pro": "Classic Monokai refined"
11}
12
13// Light themes:
14{
15  "github-light": "Clean, GitHub-style light theme",
16  "winter-is-coming-light": "Pleasant light theme",
17  "atom-one-light": "Atom's light theme port"
18}
19
20// Configure in settings.json:
21{
22  "workbench.colorTheme": "One Dark Pro",
23  "workbench.preferredDarkColorTheme": "One Dark Pro",
24  "workbench.preferredLightColorTheme": "GitHub Light"
25}

1// Icon themes add visual file type indicators
2
3// Popular icon themes:
4// 1. Material Icon Theme (most popular)
5//    - Color-coded by file type
6//    - Folder icons with context
7//    - Excellent language support
8
9// 2. vscode-icons
10//    - Comprehensive icon set
11//    - Good folder customization
12
13// 3. Helium Icon Theme
14//    - Minimal and clean
15//    - Monochrome aesthetic
16
17// Install and activate:
18// Extensions > Search "Material Icon Theme" > Install
19// Ctrl+Shift+P > "File Icon Theme" > Select theme
20
21{
22  "workbench.iconTheme": "material-icon-theme",
23  "material-icon-theme.folders.theme": "specific",
24  "material-icon-theme.folders.color": "#90a4ae"
25}

1// Programming fonts with ligatures (prettier code)
2
3// Best free coding fonts:
4// 1. Fira Code - Beautiful ligatures, excellent readability
5// 2. Cascadia Code - Microsoft's modern font with ligatures
6// 3. JetBrains Mono - Designed for developers
7// 4. Victor Mono - Elegant, cursive italics
8// 5. Inconsolata - Clean, professional
9
10// Download and install fonts:
11// Fira Code: https://github.com/tonsky/FiraCode
12// Cascadia Code: https://github.com/microsoft/cascadia-code
13// JetBrains Mono: https://www.jetbrains.com/lp/mono/
14
15// Configure in settings:
16{
17  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
18  "editor.fontLigatures": true,
19  "editor.fontSize": 14,
20  "editor.lineHeight": 1.6,
21  "editor.letterSpacing": 0.5,
22  "editor.fontWeight": "400"
23}
24
25// Ligatures examples:
26// Without ligatures: != >= => === <=
27// With ligatures:    ≠  ≥  ⇒  ≡   ≤

1// Fine-tune any theme colors
2{
3  "workbench.colorCustomizations": {
4    // Override theme colors
5    "editor.background": "#1e1e1e",
6    "editor.foreground": "#d4d4d4",
7    "editorLineNumber.foreground": "#858585",
8    "editorCursor.foreground": "#aeafad",
9    "editor.selectionBackground": "#264f78",
10    "editor.lineHighlightBackground": "#2a2a2a",
11
12    // Terminal colors
13    "terminal.background": "#1e1e1e",
14    "terminal.foreground": "#cccccc",
15
16    // Activity bar
17    "activityBar.background": "#2c2c2c",
18    "activityBar.foreground": "#ffffff",
19
20    // Status bar
21    "statusBar.background": "#007acc",
22    "statusBar.foreground": "#ffffff",
23    "statusBar.debuggingBackground": "#cc6633"
24  },
25
26  // Syntax highlighting customization
27  "editor.tokenColorCustomizations": {
28    "comments": "#6A9955",
29    "strings": "#ce9178",
30    "numbers": "#b5cea8",
31    "keywords": "#569cd6",
32    "functions": "#dcdcaa"
33  }
34}

1{
2  // Activity bar (left sidebar)
3  "workbench.activityBar.visible": true,
4  "workbench.activityBar.location": "default",
5
6  // Side bar
7  "workbench.sideBar.location": "left",
8
9  // Status bar
10  "workbench.statusBar.visible": true,
11
12  // Breadcrumbs (file path at top)
13  "breadcrumbs.enabled": true,
14  "breadcrumbs.filePath": "on",
15
16  // Editor tabs
17  "workbench.editor.showTabs": "multiple",
18  "workbench.editor.tabSizing": "shrink",
19  "workbench.editor.wrapTabs": false,
20
21  // Zen mode (distraction-free)
22  "zenMode.fullScreen": false,
23  "zenMode.centerLayout": true,
24  "zenMode.hideLineNumbers": false
25}

1// Three levels of settings in VS Code:
2// 1. User Settings - Global, applies to all projects
3// 2. Workspace Settings - Specific to current folder/workspace
4// 3. Folder Settings - Specific to individual folders in multi-root
5
6// Priority: Folder > Workspace > User
7
8// Example: Python project with specific formatter
9// User settings: Uses default formatter
10// Workspace settings: Uses Black formatter for this Python project

1// Method 1: Save current folder as workspace
2// File > Save Workspace As... > myproject.code-workspace
3
4// Method 2: Create multi-root workspace
5// File > Add Folder to Workspace... (multiple times)
6// File > Save Workspace As...
7
8// Workspace file (myproject.code-workspace):
9{
10  "folders": [
11    {
12      "name": "Frontend",
13      "path": "./client"
14    },
15    {
16      "name": "Backend",
17      "path": "./server"
18    },
19    {
20      "name": "Shared",
21      "path": "./shared"
22    }
23  ],
24  "settings": {
25    // Workspace-level settings
26    "files.exclude": {
27      "**/.git": true,
28      "**/node_modules": true,
29      "**/dist": true
30    },
31    "search.exclude": {
32      "**/node_modules": true,
33      "**/dist": true,
34      "**/build": true
35    }
36  },
37  "extensions": {
38    // Recommended extensions for this workspace
39    "recommendations": [
40      "dbaeumer.vscode-eslint",
41      "esbenp.prettier-vscode",
42      "ms-vscode.vscode-typescript-next"
43    ]
44  }
45}

1// .vscode/settings.json in project root
2// Committed to version control for team consistency
3
4// Example: React TypeScript project
5{
6  // TypeScript
7  "typescript.tsdk": "node_modules/typescript/lib",
8  "typescript.enablePromptUseWorkspaceTsdk": true,
9
10  // Formatting
11  "editor.defaultFormatter": "esbenp.prettier-vscode",
12  "editor.formatOnSave": true,
13  "editor.codeActionsOnSave": {
14    "source.fixAll.eslint": true,
15    "source.organizeImports": true
16  },
17
18  // Linting
19  "eslint.validate": [
20    "javascript",
21    "javascriptreact",
22    "typescript",
23    "typescriptreact"
24  ],
25
26  // File associations
27  "files.associations": {
28    "*.css": "tailwindcss"
29  },
30
31  // Path intellisense
32  "path-intellisense.mappings": {
33    "@": "\${workspaceRoot}/src"
34  }
35}

1// .vscode/tasks.json - Define build tasks
2{
3  "version": "2.0.0",
4  "tasks": [
5    {
6      "label": "npm: dev",
7      "type": "npm",
8      "script": "dev",
9      "problemMatcher": [],
10      "group": {
11        "kind": "build",
12        "isDefault": true
13      }
14    },
15    {
16      "label": "npm: build",
17      "type": "npm",
18      "script": "build",
19      "problemMatcher": ["$tsc"]
20    },
21    {
22      "label": "npm: test",
23      "type": "npm",
24      "script": "test",
25      "group": {
26        "kind": "test",
27        "isDefault": true
28      }
29    }
30  ]
31}
32
33// Run tasks: Ctrl+Shift+B (build) or Terminal > Run Task

1// .vscode/launch.json - Debug configurations
2{
3  "version": "0.2.0",
4  "configurations": [
5    {
6      "type": "node",
7      "request": "launch",
8      "name": "Launch Server",
9      "program": "\${workspaceFolder}/server/index.js",
10      "env": {
11        "NODE_ENV": "development"
12      }
13    },
14    {
15      "type": "chrome",
16      "request": "launch",
17      "name": "Launch Chrome",
18      "url": "http://localhost:3000",
19      "webRoot": "\${workspaceFolder}/client/src"
20    },
21    {
22      "type": "node",
23      "request": "launch",
24      "name": "Jest Tests",
25      "program": "\${workspaceFolder}/node_modules/.bin/jest",
26      "args": ["--runInBand"],
27      "console": "integratedTerminal"
28    }
29  ]
30}

1// .vscode/extensions.json - Recommend extensions to team
2{
3  "recommendations": [
4    // Language support
5    "dbaeumer.vscode-eslint",
6    "esbenp.prettier-vscode",
7    "ms-python.python",
8
9    // Framework specific
10    "bradlc.vscode-tailwindcss",
11    "GraphQL.vscode-graphql",
12
13    // Productivity
14    "eamodio.gitlens",
15    "christian-kohler.path-intellisense",
16    "usernamehw.errorlens"
17  ],
18  "unwantedRecommendations": [
19    // Extensions that conflict with our setup
20    "hookyqr.beautify"
21  ]
22}
23
24// VS Code will prompt team members to install recommended extensions

1# Create reusable project templates
2
3# 1. Set up ideal project structure
4myproject/
5├── .vscode/
6│   ├── settings.json      # Project settings
7│   ├── tasks.json         # Build tasks
8│   ├── launch.json        # Debug configs
9│   └── extensions.json    # Extension recommendations
10├── .editorconfig          # Editor consistency
11├── .prettierrc            # Prettier config
12└── .eslintrc.js           # ESLint config
13
14# 2. Commit .vscode/ to git
15git add .vscode/
16git commit -m "Add VS Code configuration"
17
18# 3. Team members clone and get consistent setup!

1# .editorconfig - Ensures consistency across editors
2root = true
3
4[*]
5charset = utf-8
6end_of_line = lf
7insert_final_newline = true
8trim_trailing_whitespace = true
9
10[*.{js,jsx,ts,tsx}]
11indent_style = space
12indent_size = 2
13
14[*.{py}]
15indent_style = space
16indent_size = 4
17
18[*.md]
19trim_trailing_whitespace = false

1// Use Settings Sync (built-in)
2// Ctrl+Shift+P > "Settings Sync: Turn On"
3
4// Syncs to your Microsoft/GitHub account:
5// - Settings
6// - Keybindings
7// - Extensions
8// - UI State
9// - Snippets
10
11// Access on new machine:
12// Sign in with same account
13// Settings automatically sync!

1// VS Code Profiles - Multiple configurations in one installation
2// Use cases:
3// - Different profiles for work vs personal projects
4// - Language-specific configurations
5// - Teaching/demo mode with minimal extensions
6
7// Create profile: Ctrl+Shift+P > "Profiles: Create Profile"
8// Each profile has its own:
9// - Settings
10// - Extensions
11// - Keybindings
12// - UI layout
13
14// Example profiles:
15const profiles = {
16  "Web Development": {
17    extensions: ["prettier", "eslint", "live-server"],
18    settings: { "editor.fontSize": 14 }
19  },
20  "Python Data Science": {
21    extensions: ["python", "jupyter", "pylance"],
22    settings: { "editor.fontSize": 13 }
23  },
24  "Presentation": {
25    extensions: ["minimal"],
26    settings: {
27      "editor.fontSize": 18,
28      "workbench.activityBar.visible": false
29    }
30  }
31};

1{
2  // For large projects or slower machines:
3
4  // Disable file watchers in large folders
5  "files.watcherExclude": {
6    "**/.git/objects/**": true,
7    "**/node_modules/**": true,
8    "**/dist/**": true,
9    "**/build/**": true,
10    "**/.cache/**": true
11  },
12
13  // Exclude folders from search
14  "search.exclude": {
15    "**/node_modules": true,
16    "**/dist": true,
17    "**/.git": true,
18    "**/coverage": true
19  },
20
21  // Reduce extension load
22  "extensions.autoUpdate": false,
23  "extensions.ignoreRecommendations": true,
24
25  // Disable heavy features if needed
26  "editor.minimap.enabled": false,
27  "editor.smoothScrolling": false,
28  "editor.cursorSmoothCaretAnimation": "off",
29  "workbench.list.smoothScrolling": false,
30
31  // Limit file size for certain features
32  "editor.largeFileOptimizations": true,
33
34  // TypeScript/JavaScript performance
35  "typescript.disableAutomaticTypeAcquisition": true,
36  "javascript.suggestionActions.enabled": false
37}

1// Emmet - HTML/CSS shorthand expansion
2// Type: ul>li*3>a
3// Press Tab to expand to:
4/*
5<ul>
6  <li><a href=""></a></li>
7  <li><a href=""></a></li>
8  <li><a href=""></a></li>
9</ul>
10*/
11
12{
13  "emmet.includeLanguages": {
14    "javascript": "javascriptreact",
15    "typescript": "typescriptreact"
16  },
17  "emmet.triggerExpansionOnTab": true,
18  "emmet.showSuggestionsAsSnippets": true
19}
20
21// Custom snippets
22// File > Preferences > Configure User Snippets
23// Example JavaScript snippet:
24{
25  "Console log": {
26    "prefix": "clg",
27    "body": [
28      "console.log('$1:', $1);"
29    ],
30    "description": "Console log with label"
31  }
32}

1# VS Code Remote Development extensions
2
3# 1. Remote - SSH: Edit files on remote server
4# Install extension: ms-vscode-remote.remote-ssh
5# Ctrl+Shift+P > "Remote-SSH: Connect to Host"
6# Opens VS Code on remote machine!
7
8# 2. Dev Containers: Develop inside Docker
9# Install extension: ms-vscode-remote.remote-containers
10# Opens project in containerized environment
11
12# 3. WSL: Windows Subsystem for Linux
13# Install extension: ms-vscode-remote.remote-wsl
14# Develop in Linux on Windows
15
16# Example .devcontainer/devcontainer.json:
17{
18  "name": "Node.js Development",
19  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
20  "customizations": {
21    "vscode": {
22      "extensions": [
23        "dbaeumer.vscode-eslint",
24        "esbenp.prettier-vscode"
25      ]
26    }
27  }
28}

1# Useful VS Code CLI commands
2
3# Open files and folders
4code .                      # Current directory
5code myfile.js              # Specific file
6code -n myproject           # New window
7code -r myproject           # Reuse window
8code -a folder1 folder2     # Add to current workspace
9
10# Diff files
11code --diff file1.js file2.js
12
13# Extensions management
14code --list-extensions
15code --install-extension publisher.extension
16code --uninstall-extension publisher.extension
17
18# Export extensions list
19code --list-extensions > extensions.txt
20
21# Install all extensions from list
22cat extensions.txt | xargs -L 1 code --install-extension
23
24# Disable all extensions (troubleshooting)
25code --disable-extensions
26
27# Wait for file to close (useful in git)
28git config --global core.editor "code --wait"

1# Back up your VS Code configuration
2
3# Settings file locations:
4# Windows: %APPDATA%\Code\User\settings.json
5# macOS: ~/Library/Application Support/Code/User/settings.json
6# Linux: ~/.config/Code/User/settings.json
7
8# Backup script:
9#!/bin/bash
10BACKUP_DIR="vscode-backup-$(date +%Y%m%d)"
11mkdir -p $BACKUP_DIR
12
13# Copy settings
14cp -r ~/.config/Code/User $BACKUP_DIR/
15
16# Export extensions list
17code --list-extensions > $BACKUP_DIR/extensions.txt
18
19# Backup snippets
20cp -r ~/.config/Code/User/snippets $BACKUP_DIR/
21
22echo "Backup complete: $BACKUP_DIR"
23
24# Restore on new machine:
25# 1. Install VS Code
26# 2. Copy User folder
27# 3. Install extensions: cat extensions.txt | xargs -L 1 code --install-extension

1// Common issues and solutions
2
3// 1. VS Code running slow:
4// - Disable extensions: Ctrl+Shift+P > "Extensions: Disable All Installed Extensions"
5// - Re-enable one by one to find culprit
6// - Check: Help > Toggle Developer Tools > Performance monitor
7
8// 2. IntelliSense not working:
9// - Restart TypeScript server: Ctrl+Shift+P > "TypeScript: Restart TS Server"
10// - Delete node_modules and reinstall
11// - Check jsconfig.json/tsconfig.json
12
13// 3. Settings not applying:
14// - Check settings order: User vs Workspace
15// - Reload window: Ctrl+Shift+P > "Developer: Reload Window"
16
17// 4. Git integration broken:
18// - Check git path: settings > "git.path"
19// - Ensure git is installed: git --version
20// - Reload window
21
22// 5. Extensions not loading:
23// - Check extension logs: Ctrl+Shift+P > "Extensions: Show Extension Logs"
24// - Clear extension cache: Delete ~/.vscode/extensions
25
26// Developer tools:
27// Help > Toggle Developer Tools (like Chrome DevTools)
28// Useful for debugging VS Code itself!