Essential Extensions & Plugins

1// Method 1: Extensions View (most common)
2// Click Extensions icon in Activity Bar (left sidebar)
3// Or press: Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS)
4
5// Search for extensions by:
6// - Name: "prettier"
7// - Category: "@category:formatters"
8// - Language: "@language:python"
9// - Popularity: Sort by "Install Count"
10
11// Method 2: Command Palette
12// Ctrl+Shift+P > "Extensions: Install Extensions"
13
14// Method 3: VS Code Marketplace
15// Visit: https://marketplace.visualstudio.com
16// Browse online, copy extension ID

1# GUI Installation:
2# 1. Open Extensions view (Ctrl+Shift+X)
3# 2. Search for extension name
4# 3. Click "Install" button
5# 4. Reload/Restart if prompted
6
7# Command Line Installation:
8code --install-extension ms-python.python
9code --install-extension esbenp.prettier-vscode
10code --install-extension dbaeumer.vscode-eslint
11
12# Install from VSIX file (offline/custom):
13code --install-extension path/to/extension.vsix
14
15# View installed extensions:
16code --list-extensions
17
18# Export extensions list:
19code --list-extensions > my-extensions.txt
20
21# Batch install from list:
22cat my-extensions.txt | xargs -L 1 code --install-extension

1// Extension Settings (settings.json)
2{
3  // Disable specific extension
4  "extensions.ignoreRecommendations": false,
5
6  // Auto-update extensions
7  "extensions.autoUpdate": true,
8
9  // Auto-check for updates
10  "extensions.autoCheckUpdates": true,
11
12  // Extension recommendations badge
13  "extensions.showRecommendationsOnlyOnDemand": false
14}
15
16// Common extension management tasks:
17// - Disable: Right-click extension > Disable
18// - Disable for Workspace: Disable only in current project
19// - Uninstall: Right-click extension > Uninstall
20// - Update: Click "Update" button when available
21// - View Extension Details: Click extension name

1// .vscode/extensions.json in project root
2{
3  "recommendations": [
4    "dbaeumer.vscode-eslint",
5    "esbenp.prettier-vscode",
6    "eamodio.gitlens"
7  ],
8  "unwantedRecommendations": [
9    "hookyqr.beautify"  // Conflicts with Prettier
10  ]
11}
12
13// VS Code will prompt team members to install recommended extensions
14// Ensures consistent development environment across team

1// Common issues and solutions:
2
3// 1. Extension not working:
4// - Check Output panel: View > Output > Select extension
5// - Reload window: Ctrl+Shift+P > "Developer: Reload Window"
6// - Check extension requirements (e.g., Node.js version)
7
8// 2. Performance issues:
9// - Disable extensions one by one to find culprit
10// - Use: Ctrl+Shift+P > "Developer: Show Running Extensions"
11// - Check startup time: Ctrl+Shift+P > "Developer: Startup Performance"
12
13// 3. Conflicts between extensions:
14// - Check extension logs for errors
15// - Disable one extension at a time
16// - Check extension compatibility in marketplace
17
18// 4. Extension not appearing:
19// - Check it's enabled: Extensions view > filter by @enabled
20// - Check workspace trust: Some extensions require trusted workspace
21// - Verify VS Code version compatibility

1// Extension: dbaeumer.vscode-eslint
2// Install: Ctrl+Shift+X > Search "ESLint" > Install
3
4// ESLint catches errors and enforces code style:
5// ❌ Errors it catches:
6const user = getUser();
7console.log(userName);  // Error: 'userName' is not defined (meant 'user')
8
9let x = 5;
10x = "hello";  // Warning: Type mismatch if using TypeScript ESLint
11
12// ✓ Style enforcement:
13const obj={a:1,b:2};  // ESLint: Add spaces around braces
14// Fixed:
15const obj = { a: 1, b: 2 };
16
17// Configuration (.eslintrc.json):
18{
19  "extends": ["eslint:recommended", "plugin:react/recommended"],
20  "rules": {
21    "semi": ["error", "always"],
22    "quotes": ["error", "single"],
23    "no-unused-vars": "warn",
24    "no-console": "warn"
25  }
26}
27
28// VS Code settings for ESLint:
29{
30  "eslint.validate": [
31    "javascript",
32    "javascriptreact",
33    "typescript",
34    "typescriptreact"
35  ],
36  "editor.codeActionsOnSave": {
37    "source.fixAll.eslint": true
38  }
39}

1// Extension: esbenp.prettier-vscode
2// Install: Ctrl+Shift+X > Search "Prettier" > Install
3
4// Prettier automatically formats code on save:
5// Before Prettier:
6function calculateTotal(items){const total=items.reduce((sum,item)=>sum+item.price,0);return total;}
7
8// After Prettier (auto-formatted):
9function calculateTotal(items) {
10  const total = items.reduce((sum, item) => sum + item.price, 0);
11  return total;
12}
13
14// Configuration (.prettierrc):
15{
16  "semi": true,
17  "singleQuote": true,
18  "tabWidth": 2,
19  "trailingComma": "es5",
20  "printWidth": 80,
21  "arrowParens": "always"
22}
23
24// VS Code settings for Prettier:
25{
26  "editor.defaultFormatter": "esbenp.prettier-vscode",
27  "editor.formatOnSave": true,
28  "[javascript]": {
29    "editor.defaultFormatter": "esbenp.prettier-vscode"
30  },
31  "[typescript]": {
32    "editor.defaultFormatter": "esbenp.prettier-vscode"
33  }
34}

1# Extension: ms-python.python (includes linting)
2# Install: Ctrl+Shift+X > Search "Python" > Install
3
4# Pylint catches errors and style issues:
5def calculate_total(items):
6    total = 0
7    for item in items:
8        total += item.price
9    return totl  # Pylint: Undefined variable 'totl' (meant 'total')
10
11# Flake8 for PEP 8 style enforcement:
12def my_function( x, y ):  # Flake8: E201 whitespace after '('
13    return x+y  # Flake8: E225 missing whitespace around operator
14
15# mypy for type checking:
16def greet(name: str) -> str:
17    return f"Hello, {name}"
18
19greet(123)  # mypy error: Argument 1 has incompatible type "int"; expected "str"
20
21# VS Code settings for Python:
22{
23  "python.linting.enabled": true,
24  "python.linting.pylintEnabled": true,
25  "python.linting.flake8Enabled": true,
26  "python.formatting.provider": "black",
27  "editor.formatOnSave": true,
28  "[python]": {
29    "editor.defaultFormatter": "ms-python.black-formatter",
30    "editor.tabSize": 4
31  }
32}

1// Go: Extension: golang.go
2{
3  "go.lintTool": "golangci-lint",
4  "go.lintOnSave": "package"
5}
6
7// Rust: Extension: rust-lang.rust-analyzer
8{
9  "rust-analyzer.checkOnSave.command": "clippy"
10}
11
12// PHP: Extension: bmewburn.vscode-intelephense-client
13{
14  "intelephense.format.enable": true
15}
16
17// Ruby: Extension: rebornix.ruby
18{
19  "ruby.lint": {
20    "rubocop": true
21  }
22}

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

1// Core Extensions:
2// 1. ESLint (dbaeumer.vscode-eslint)
3// 2. Prettier (esbenp.prettier-vscode)
4// 3. Path Intellisense (christian-kohler.path-intellisense)
5// 4. npm Intellisense (christian-kohler.npm-intellisense)
6// 5. JavaScript (ES6) code snippets (xabikos.javascriptsnippets)
7
8// Path Intellisense - Autocomplete file paths:
9import UserService from './services/UserService';  // Autocompletes path as you type
10import styles from './App.module.css';
11
12// npm Intellisense - Autocomplete npm packages:
13import React from 'react';  // Autocompletes package names
14import axios from 'axios';
15
16// Example snippet usage (ES6 snippets):
17// Type: imp<tab>
18// Expands to: import moduleName from 'module'
19
20// Type: clg<tab>
21// Expands to: console.log()

1// React Extensions:
2// 1. ES7+ React/Redux/React-Native snippets (dsznajder.es7-react-js-snippets)
3// 2. Auto Rename Tag (formulahendry.auto-rename-tag)
4// 3. Auto Close Tag (formulahendry.auto-close-tag)
5
6// React snippets examples:
7// rafce<tab> - Create React Arrow Function Component with export
8import React from 'react'
9
10const ComponentName = () => {
11  return <div>ComponentName</div>
12}
13
14export default ComponentName
15
16// Vue Extensions:
17// 1. Volar (Vue.volar) - Vue 3 language support
18// 2. Vue VSCode Snippets (sdras.vue-vscode-snippets)
19
20// Angular Extensions:
21// 1. Angular Language Service (Angular.ng-template)
22// 2. Angular Snippets (johnpapa.angular2)

1# Essential Python Extensions:
2# 1. Python (ms-python.python) - Core extension
3# 2. Pylance (ms-python.vscode-pylance) - Fast language server
4# 3. Black Formatter (ms-python.black-formatter)
5# 4. isort (ms-python.isort) - Import sorting
6# 5. Jupyter (ms-toolsai.jupyter) - Notebook support
7
8# Pylance provides:
9# - Type checking
10# - Auto-imports
11# - Intelligent code completion
12# - Signature help
13
14from typing import List
15
16def process_users(users: List[str]) -> None:
17    for user in users:
18        print(user.upp)  # Pylance: 'upp' is not a valid attribute, suggests 'upper'
19
20# isort automatically organizes imports:
21# Before:
22import sys
23from mypackage import mymodule
24import os
25from typing import List
26
27# After isort:
28import os
29import sys
30from typing import List
31
32from mypackage import mymodule

1<!-- Essential Web Extensions:
21. HTML CSS Support (ecmel.vscode-html-css)
32. IntelliSense for CSS class names (Zignd.html-css-class-completion)
43. Live Server (ritwickdey.liveserver)
54. Auto Rename Tag (formulahendry.auto-rename-tag)
65. Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) -->
7
8<!-- Live Server - Right-click HTML file > "Open with Live Server" -->
9<!DOCTYPE html>
10<html>
11  <head>
12    <title>My Site</title>
13    <!-- CSS class autocompletion works here -->
14    <link rel="stylesheet" href="styles.css">
15  </head>
16  <body>
17    <!-- Auto Rename Tag - Change opening tag, closing tag updates -->
18    <div class="container">
19      Content
20    </div>
21  </body>
22</html>

1-- Database Extensions:
2-- 1. SQLTools (mtxr.sqltools) - Database management
3-- 2. PostgreSQL (ckolkman.vscode-postgres)
4-- 3. MongoDB (mongodb.mongodb-vscode)
5
6-- SQLTools example:
7SELECT u.name, u.email, COUNT(o.id) as order_count
8FROM users u
9LEFT JOIN orders o ON u.id = o.user_id
10GROUP BY u.id
11HAVING COUNT(o.id) > 5;
12-- Provides: Syntax highlighting, autocomplete, query execution
13
14// Docker Extensions:
15// 1. Docker (ms-azuretools.vscode-docker)
16
17// Dockerfile with IntelliSense:
18FROM node:18-alpine
19WORKDIR /app
20COPY package*.json ./
21RUN npm ci --only=production  // Docker extension validates commands
22COPY . .
23EXPOSE 3000
24CMD ["node", "server.js"]

1// Go Extensions:
2// 1. Go (golang.go) - Official Go extension
3
4package main
5
6import "fmt"
7
8func main() {
9    // Go extension provides:
10    // - Code completion
11    // - Go to definition
12    // - Find references
13    // - Refactoring tools
14    fmt.Println("Hello, World!")
15}
16
17// Rust Extensions:
18// 1. rust-analyzer (rust-lang.rust-analyzer)
19
20fn calculate_sum(numbers: &[i32]) -> i32 {
21    numbers.iter().sum()  // rust-analyzer: Type hints, completion
22}
23
24// C/C++ Extensions:
25// 1. C/C++ (ms-vscode.cpptools)
26// 2. CMake Tools (ms-vscode.cmake-tools)

1// Extension: eamodio.gitlens
2// GitLens enhances VS Code's built-in Git capabilities
3
4// Features:
5// 1. Inline Blame Annotations
6function calculateTotal(items) {  // Shows: "John Doe, 2 days ago"
7  return items.reduce((sum, item) => sum + item.price, 0);
8}
9
10// 2. File History - View complete file history
11// 3. Line History - See all changes to a specific line
12// 4. Commit Search - Search commits by message, author, file
13// 5. Visual File History - Graph view of commits
14
15// VS Code settings for GitLens:
16{
17  "gitlens.currentLine.enabled": true,
18  "gitlens.hovers.currentLine.over": "line",
19  "gitlens.codeLens.enabled": true,
20  "gitlens.codeLens.authors.enabled": true
21}

1// Extension: ms-vsliveshare.vsliveshare
2// Collaborate in real-time with other developers
3
4// Use cases:
5// - Pair programming
6// - Code reviews
7// - Debugging together
8// - Teaching/mentoring
9
10// Start session:
11// 1. Click "Live Share" in status bar
12// 2. Share link with collaborator
13// 3. They join and can edit together
14
15// Features:
16// - Shared editing
17// - Shared terminal
18// - Shared servers
19// - Voice/text chat

1// Extension: usernamehw.errorlens
2// Shows errors and warnings inline (highly visible)
3
4const user = getUser();
5console.log(user.nam);  // ❌ Property 'nam' does not exist. Did you mean 'name'?
6                        // Error shown right here in red!
7
8// Without Error Lens: Hover over red squiggle to see error
9// With Error Lens: Error shown immediately inline

1// Extension: gruntfwork.todo-tree
2// Highlights TODO, FIXME, etc. in your code
3
4// TODO: Add error handling
5function processData(data) {
6  // FIXME: This breaks with empty arrays
7  return data.map(item => item.value);
8}
9
10// NOTE: Consider refactoring this
11// HACK: Temporary workaround
12// WARNING: This will be removed in v2.0
13
14// Creates sidebar view with all TODOs across project

1// Note: Bracket pair colorization now built into VS Code!
2{
3  "editor.bracketPairColorization.enabled": true,
4  "editor.guides.bracketPairs": "active"
5}
6
7// Extension: oderwat.indent-rainbow
8// Colors indentation levels for better readability
9
10function complexNesting() {
11  if (condition1) {         // Level 1 - Color 1
12    if (condition2) {       // Level 2 - Color 2
13      if (condition3) {     // Level 3 - Color 3
14        doSomething();
15      }
16    }
17  }
18}

1// Extension: aaron-bond.better-comments
2
3// ! Important warning about this code
4// ? Question about implementation
5// TODO: Task to complete
6// * Highlighted comment
7// Regular comment stays gray
8
9function criticalFunction() {
10  // ! This function has security implications
11  // TODO: Add input validation
12  // ? Should we cache this result?
13}

1// Extension: alefragnani.project-manager
2// Quickly switch between projects
3
4// Save current project:
5// Ctrl+Shift+P > "Project Manager: Save Project"
6
7// Switch projects:
8// Ctrl+Shift+P > "Project Manager: List Projects"
9
10// Organize projects:
11// - Frontend projects
12// - Backend projects
13// - Personal projects
14// - Work projects

1// Tabnine (TabNine.tabnine-vscode)
2// AI-powered code completion
3
4function fetchUserData(userId) {
5  // Tabnine suggests entire lines/blocks based on context
6  return fetch(`/api/users/${userId}`)
7    .then(response => response.json())  // Suggested by Tabnine
8    .then(data => {
9      console.log(data);  // Suggested based on pattern
10      return data;
11    });
12}
13
14// GitHub Copilot (GitHub.copilot)
15// AI pair programmer (requires subscription)
16// Suggests whole functions based on comments and context

1### Extension: humao.rest-client
2### Test APIs without leaving VS Code
3
4### Get all users
5GET https://api.example.com/users
6Content-Type: application/json
7
8### Create new user
9POST https://api.example.com/users
10Content-Type: application/json
11
12{
13  "name": "John Doe",
14  "email": "[email protected]"
15}
16
17### Update user
18PUT https://api.example.com/users/123
19Content-Type: application/json
20Authorization: Bearer {{token}}
21
22{
23  "name": "Jane Doe"
24}

1// Extension: PKief.material-icon-theme
2// Most popular icon theme (40M+ downloads)
3
4// Provides color-coded icons for:
5// - JavaScript/TypeScript: Yellow JS icon
6// - React: Blue React atom icon
7// - Python: Blue/yellow Python icon
8// - JSON: Yellow gear icon
9// - Markdown: Blue M icon
10// - Git files: Orange git icon
11
12// Configuration:
13{
14  "workbench.iconTheme": "material-icon-theme",
15  "material-icon-theme.folders.theme": "specific",
16  "material-icon-theme.folders.color": "#90a4ae",
17  "material-icon-theme.files.associations": {
18    "*.config.ts": "typescript-config"
19  }
20}

1// One Dark Pro (zhuangtongfa.material-theme)
2// Atom's iconic theme - 8M+ downloads
3{
4  "workbench.colorTheme": "One Dark Pro"
5}
6
7// Dracula Official (dracula-theme.theme-dracula)
8// Beautiful purple-based dark theme
9{
10  "workbench.colorTheme": "Dracula"
11}
12
13// GitHub Theme (github.github-vscode-theme)
14// Official GitHub theme - light and dark
15{
16  "workbench.colorTheme": "GitHub Dark",
17  "workbench.preferredLightColorTheme": "GitHub Light"
18}
19
20// Night Owl (sdras.night-owl)
21// Optimized for accessibility and night coding
22{
23  "workbench.colorTheme": "Night Owl"
24}
25
26// Material Theme (Equinusocio.vsc-material-theme)
27// Material Design inspired with variants
28{
29  "workbench.colorTheme": "Material Theme Ocean"
30}

1// Extension: johnpapa.vscode-peacock
2// Color-code VS Code windows by project
3
4// Use case: Multiple VS Code windows open
5// - Frontend project: Blue title bar
6// - Backend project: Green title bar
7// - Personal project: Purple title bar
8
9// Change workspace color:
10// Ctrl+Shift+P > "Peacock: Change to a Favorite Color"
11
12{
13  "peacock.favoriteColors": [
14    { "name": "Angular Red", "value": "#dd0531" },
15    { "name": "React Blue", "value": "#61dafb" },
16    { "name": "Vue Green", "value": "#42b883" }
17  ]
18}

1// Extension: oderwat.indent-rainbow
2// Colors indentation levels
3
4function example() {
5  if (true) {         // Indent level 1 - Light color
6    if (true) {       // Indent level 2 - Medium color
7      if (true) {     // Indent level 3 - Darker color
8        console.log('Deep nesting');
9      }
10    }
11  }
12}
13
14// Helps spot indentation errors quickly

1/* Extension: naumovs.color-highlight */
2/* Shows actual color preview inline */
3
4.button {
5  background: #3498db;      /* Shows blue color preview */
6  border: 1px solid rgb(52, 152, 219);  /* Blue preview */
7  color: rgba(255, 255, 255, 0.9);      /* White preview */
8}

1# Extension: mechatroner.rainbow-csv
2# Colors CSV columns differently
3
4name,email,age,city
5John,[email protected],30,New York       # Each column different color
6Jane,[email protected],25,Los Angeles
7Bob,[email protected],35,Chicago
8
9# Features:
10# - Column highlighting
11# - SQL-like queries
12# - Align columns

1// Extension: be5invis.vscode-custom-css
2// Inject custom CSS/JS into VS Code
3
4// Warning: Advanced users only, can break VS Code
5// Allows complete UI customization
6
7// Example: Modify fonts, colors, animations
8{
9  "vscode_custom_css.imports": [
10    "file:///C:/Users/username/.vscode/custom.css"
11  ]
12}
13
14// custom.css:
15.monaco-editor {
16  font-family: 'Fira Code', monospace !important;
17  letter-spacing: 0.5px;
18}

1// User Settings (applies globally)
2// File > Preferences > Settings
3
4{
5  // ESLint enabled for all projects
6  "eslint.enable": true,
7
8  // Prettier format on save globally
9  "editor.formatOnSave": true,
10  "editor.defaultFormatter": "esbenp.prettier-vscode"
11}
12
13// Workspace Settings (project-specific)
14// .vscode/settings.json
15
16{
17  // Override for this project only
18  "eslint.workingDirectories": [
19    "./client",
20    "./server"
21  ],
22
23  // Different formatter for this project
24  "editor.defaultFormatter": "esbenp.prettier-vscode",
25
26  // Project-specific Prettier config
27  "prettier.configPath": "./.prettierrc"
28}

1// Check extension performance:
2// Ctrl+Shift+P > "Developer: Show Running Extensions"
3// Shows activation time and CPU/memory usage
4
5// Disable slow extensions:
6{
7  // Disable extensions in specific workspaces
8  "extensions.ignoreRecommendations": false
9}
10
11// Lazy load extensions (only when needed):
12// 1. Disable globally
13// 2. Enable only for specific workspace
14
15// Example: Heavy AI extensions only for work projects
16// Personal projects: Extension disabled
17// Work projects: Extension enabled in workspace settings

1// .vscode/extensions.json
2{
3  "recommendations": [
4    // Core - Everyone should have these
5    "dbaeumer.vscode-eslint",
6    "esbenp.prettier-vscode",
7
8    // Framework - Specific to this project
9    "bradlc.vscode-tailwindcss",
10
11    // Team productivity
12    "eamodio.gitlens",
13    "ms-vsliveshare.vsliveshare"
14  ],
15
16  // Extensions that conflict or are redundant
17  "unwantedRecommendations": [
18    "hookyqr.beautify",  // We use Prettier instead
19    "ms-vscode.vscode-typescript-tslint-plugin"  // Deprecated
20  ]
21}
22
23// Team members get prompted to install recommended extensions
24// Ensures consistent development environment

1// Common conflicts:
2
3// 1. Multiple formatters conflict:
4// Problem: Both Prettier and Beautify installed
5// Solution: Set default formatter
6{
7  "editor.defaultFormatter": "esbenp.prettier-vscode",
8  "[javascript]": {
9    "editor.defaultFormatter": "esbenp.prettier-vscode"
10  }
11}
12
13// 2. Linter conflicts:
14// Problem: ESLint and JSHint both running
15// Solution: Disable one
16{
17  "eslint.enable": true,
18  "jshint.enable": false
19}
20
21// 3. Performance issues from too many extensions:
22// Solution: Use extension packs or disable unused extensions

1// Use VS Code Profiles for different workflows
2// Ctrl+Shift+P > "Profiles: Create Profile"
3
4// Example profiles:
5
6// Profile 1: "Web Development"
7{
8  "extensions": [
9    "ESLint",
10    "Prettier",
11    "Live Server",
12    "Auto Rename Tag"
13  ],
14  "settings": {
15    "editor.fontSize": 14
16  }
17}
18
19// Profile 2: "Python Data Science"
20{
21  "extensions": [
22    "Python",
23    "Jupyter",
24    "Pylance"
25  ],
26  "settings": {
27    "python.linting.enabled": true
28  }
29}
30
31// Profile 3: "Writing/Documentation"
32{
33  "extensions": [
34    "Markdown All in One",
35    "Code Spell Checker"
36  ],
37  "settings": {
38    "editor.wordWrap": "on",
39    "editor.fontSize": 16
40  }
41}

1// Security considerations:
2
3// 1. Only install from trusted publishers
4// Check: Extension page > Publisher name > Verified badge
5
6// 2. Review permissions
7// Extensions can access:
8// - File system
9// - Network
10// - Clipboard
11// Read extension description carefully
12
13// 3. Keep extensions updated
14{
15  "extensions.autoUpdate": true,
16  "extensions.autoCheckUpdates": true
17}
18
19// 4. Workspace Trust
20// VS Code won't run extensions in untrusted workspaces
21// Ctrl+Shift+P > "Workspaces: Manage Workspace Trust"
22
23// 5. Review extension source code (if open source)
24// Many extensions are on GitHub
25// Check for suspicious code before installing

1# Export extension list:
2code --list-extensions > extensions.txt
3
4# Extension list example (extensions.txt):
5dbaeumer.vscode-eslint
6esbenp.prettier-vscode
7eamodio.gitlens
8ms-python.python
9
10# Restore extensions on new machine:
11cat extensions.txt | xargs -L 1 code --install-extension
12
13# Or use Settings Sync (built-in):
14# Ctrl+Shift+P > "Settings Sync: Turn On"
15# Syncs extensions, settings, keybindings to cloud
16# Sign in with Microsoft or GitHub account

1// Frontend Developer:
2const frontendExtensions = [
3  'dbaeumer.vscode-eslint',           // Linting
4  'esbenp.prettier-vscode',           // Formatting
5  'ritwickdey.liveserver',            // Live preview
6  'formulahendry.auto-rename-tag',    // HTML productivity
7  'bradlc.vscode-tailwindcss',        // Tailwind support
8  'dsznajder.es7-react-js-snippets'   // React snippets
9];
10
11// Backend Developer:
12const backendExtensions = [
13  'ms-python.python',                 // Python support
14  'mtxr.sqltools',                    // Database tools
15  'ms-azuretools.vscode-docker',      // Docker
16  'humao.rest-client',                // API testing
17  'redhat.vscode-yaml'                // YAML support
18];
19
20// Full Stack Developer:
21const fullStackExtensions = [
22  ...frontendExtensions,
23  ...backendExtensions,
24  'eamodio.gitlens',                  // Enhanced Git
25  'ms-vsliveshare.vsliveshare',       // Collaboration
26  'usernamehw.errorlens'              // Better errors
27];