💻

Visual Studio Code

Kraftfull kodredigerare med omfattande anpassningsmöjligheter

Vad du hittar här

Maximera din produktivitet i VS Code med avancerade konfigurationer, extensions och arbetsflöden. Från debugging till automatisering - allt du behöver för effektiv utveckling.

Innehåll

Konfigurationer

Extensions

Snippets

Workspace Tips

VS Code Configuration

⌨️

Essential Keyboard Shortcuts

Viktiga kortkommandon för effektiv kodning i VS Code.

// Windows/Linux | macOS
Ctrl+Shift+P   | Cmd+Shift+P    // Command Palette
Ctrl+P         | Cmd+P          // Quick Open (öppna filer)
Ctrl+Shift+F   | Cmd+Shift+F    // Sök i hela projektet
Ctrl+/         | Cmd+/          // Toggle kommentar
Alt+Up/Down    | Opt+Up/Down    // Flytta rad upp/ner
Shift+Alt+Down | Shift+Opt+Down // Duplicera rad
Ctrl+D         | Cmd+D          // Välj nästa förekomst
Ctrl+Shift+L   | Cmd+Shift+L    // Välj alla förekomster
F2             | F2             // Rename symbol
Ctrl+Space     | Cmd+Space      // Trigger IntelliSense
Ctrl+.         | Cmd+.          // Quick Fix
Alt+Shift+F    | Opt+Shift+F    // Formatera dokument

💡 Förklaring: Lär dig dessa kortkommandon för att öka din produktivitet markant

⚙️

Settings.json Configuration

Anpassa VS Code med kraftfulla inställningar.

{
  // Editor inställningar
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  
  // Tema och utseende
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  
  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  
  // Files
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  
  // Extensions
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

💡 Förklaring: Placera i .vscode/settings.json för projektspecifika inställningar

🐛

Launch.json Debugging

Konfigurera debugging för olika miljöer.

{
  "version": "0.2.0",
  "configurations": [
    {
      // Node.js debugging
      "type": "node",
      "request": "launch",
      "name": "Debug Node App",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.js",
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      // React debugging
      "type": "chrome",
      "request": "launch",
      "name": "Debug React App",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      // Jest test debugging
      "type": "node",
      "request": "launch",
      "name": "Debug Jest Tests",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand", "--watchAll=false"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      // Python debugging
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    }
  ]
}

💡 Förklaring: Placera i .vscode/launch.json för att konfigurera debugging sessioner

🔧

Tasks.json Build Automation

Automatisera vanliga uppgifter med VS Code tasks.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build TypeScript",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Run Tests",
      "type": "npm",
      "script": "test",
      "group": "test",
      "problemMatcher": []
    },
    {
      "label": "Start Dev Server",
      "type": "npm",
      "script": "dev",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Docker Compose Up",
      "type": "shell",
      "command": "docker-compose up -d",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Clean & Install",
      "type": "shell",
      "command": "rm -rf node_modules package-lock.json && npm install",
      "windows": {
        "command": "rmdir /s /q node_modules && del package-lock.json && npm install"
      },
      "problemMatcher": []
    }
  ]
}

💡 Förklaring: Kör tasks med Ctrl+Shift+B eller via Command Palette

Recommended Extensions

Essential Extensions

Must-have extensions för alla utvecklare.

ESLint

dbaeumer.vscode-eslint

JavaScript/TypeScript linting

Prettier

esbenp.prettier-vscode

Kodformatering

GitLens

eamodio.gitlens

Git supercharged

Live Server

ritwickdey.LiveServer

Lokal utvecklingsserver

Auto Rename Tag

formulahendry.auto-rename-tag

Synka HTML/XML tags

Language Support

Språkspecifika extensions för bättre utvecklingsupplevelse.

Python

ms-python.python

Python språkstöd

C/C++

ms-vscode.cpptools

C/C++ IntelliSense

Java Extension Pack

vscjava.vscode-java-pack

Java utveckling

Go

golang.go

Go språkstöd

Vetur

octref.vetur

Vue.js utveckling

Productivity Boosters

Extensions som ökar din produktivitet.

GitHub Copilot

GitHub.copilot

AI kod-assistent

Thunder Client

rangav.vscode-thunder-client

REST API testing

Docker

ms-azuretools.vscode-docker

Docker support

Remote - SSH

ms-vscode-remote.remote-ssh

Fjärrutveckling

Project Manager

alefragnani.project-manager

Hantera projekt

Custom Snippets

Skapa egna snippets för att snabbt generera vanlig kod. Lägg till i Code > Preferences > User Snippets.

React Component Snippet

Language: javascriptreact

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = ({ ${2:props} }) => {",
    "  return (",
    "    <div className="${3:container}">",
    "      ${4:// Content here}",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Create a React functional component"
}

Express Route Handler

Language: javascript

"Express Route Handler": {
  "prefix": "route",
  "body": [
    "router.${1|get,post,put,delete|}('${2:/path}', async (req, res) => {",
    "  try {",
    "    ${3:// Route logic here}",
    "    res.status(200).json({",
    "      success: true,",
    "      data: ${4:result}",
    "    });",
    "  } catch (error) {",
    "    console.error('Error:', error);",
    "    res.status(500).json({",
    "      success: false,",
    "      error: error.message",
    "    });",
    "  }",
    "});"
  ],
  "description": "Create an Express route handler with error handling"
}

Console Log with Label

Language: javascript

"Console Log": {
  "prefix": "clg",
  "body": [
    "console.log('${1:label}:', ${2:value});"
  ],
  "description": "Log to console with label"
}

Workspace Management

🗂️ Multi-root Workspace

Arbeta med flera projekt samtidigt

💡 Tips: Skapa en .code-workspace fil för att gruppera relaterade projekt

🗂️ Workspace Trust

Kontrollera vilka workspace som får köra kod automatiskt

💡 Tips: Aktivera restricted mode för okända projekt

🗂️ Sync Settings

Synkronisera inställningar mellan flera enheter

💡 Tips: Använd Settings Sync med GitHub-konto

🗂️ Profiles

Skapa olika profiler för olika typer av utveckling

💡 Tips: Separata profiler för web, Python, och DevOps arbete

🚀VS Code Pro Tips

Använd Command Palette flitigt

Nästan allt i VS Code kan göras via Command Palette (Cmd/Ctrl+Shift+P).

Lär dig Emmet shortcuts

Skriv HTML och CSS mycket snabbare med Emmet abbreviations.

Integrera terminal i arbetsflödet

Använd integrerade terminalen istället för att byta mellan fönster.