VS Code Praktisk Guide: Viktiga tips och verktygsrekommendationer för effektiva utvecklare

Visual Studio Code (VS Code) är en populär kodredigerare bland utvecklare, som är gratis, öppen källkod och plattformsoberoende. Den har kraftfulla funktioner, ett rikt ekosystem av tillägg och ett enkelt och användarvänligt gränssnitt. Den här artikeln kommer att sammanfatta praktiska tips och verktygsrekommendationer för VS Code, baserat på den senaste diskussionen på X/Twitter, för att hjälpa dig att öka din utvecklingseffektivitet.

Vad är charmen med VS Code?

Från diskussionen på X/Twitter kan vi se utvecklarnas entusiasm för VS Code. @@freeCodeCamp nämnde upprepade gånger VS Codes popularitet och kostnadsfrihet, och betonade de rika funktioner som den erbjuder. @@chomado delade sin favoriteditor och rekommenderade tilläggsfunktioner för frontend-utvecklare.

Sammanfattningsvis inkluderar de största fördelarna med VS Code:

• Gratis och öppen källkod: Vem som helst kan använda den gratis och delta i communityns utveckling.
• Plattformsoberoende: Stöder flera operativsystem som Windows, macOS, Linux.
• Lättviktig: Snabb uppstart och låg resursanvändning.
• Kraftfullt tilläggsekosystem: Genom att installera tillägg kan du förbättra VS Codes funktioner och möta olika utvecklingsbehov.
• Inbyggda felsökningsverktyg: Stöder felsökning av flera programmeringsspråk, vilket gör det enkelt för utvecklare att snabbt lokalisera och lösa problem.
• Integrerad Git: Gör det enkelt för utvecklare att hantera versionskontroll.
• Intelligent tips: Ger funktioner som kodkomplettering och syntaxkontroll för att förbättra kodningseffektiviteten.

VS Code Praktiska tips: Öka din utvecklingseffektivitet

1. Behärska kortkommandon: VS Code erbjuder ett rikt utbud av kortkommandon, och att behärska dessa kortkommandon kan avsevärt förbättra utvecklingseffektiviteten. Här är några vanliga kortkommandon:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Öppna kommandopaletten. Detta är en av VS Codes kärnfunktioner, och du kan utföra olika operationer via kommandopaletten.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Öppna filen snabbt.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Hoppa snabbt till symbolen (funktion, klass, etc.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Global sökning.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Välj nästa matchning. Du kan redigera flera identiska texter samtidigt.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Kopiera den aktuella raden till nästa rad/föregående rad.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Kommentera/avkommentera den aktuella raden eller det valda kodblocket.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Flytta den aktuella raden eller det valda kodblocket uppåt/nedåt.
   • Ctrl+K Ctrl+S: Öppna inställningsgränssnittet för tangentbordsgenvägar, där du kan visa och anpassa kortkommandon.

2. Använd kommandopaletten väl: Genom att öppna kommandopaletten med Ctrl+Shift+P / Cmd+Shift+P kan du utföra olika operationer, till exempel:

   • Settings: Öppna inställningsgränssnittet.
   • Extensions: Install Extension: Installera tillägg.
   • Git: Commit: Skicka Git-ändringar.
   • Format Document: Formatera det aktuella dokumentet.
   • Go to Symbol in Workspace: Hoppa snabbt till symbolen i arbetsytan.

3. Anpassade inställningar: VS Code tillåter användare att anpassa olika inställningar, inklusive teman, teckensnitt, indrag och mer. Du kan öppna inställningsgränssnittet via File -> Preferences -> Settings eller redigera filen settings.json direkt.

   • Tema: Välj ett tema du gillar för att öka komforten vid kodning.
   • Teckensnitt: Välj ett lämpligt teckensnitt för att förbättra kodens läsbarhet. Det rekommenderas att använda ett teckensnitt med fast bredd, till exempel Fira Code, JetBrains Mono, etc.
   • Indrag: Ställ in indrag enligt projektets specifikationer, du kan använda mellanslag eller Tab-tangenten.
   • Autospara: Aktivera autosparningsfunktionen för att undvika att förlora kod på grund av att du glömmer att spara.

4. Använda kodsnuttar (Code Snippets): Kodsnuttar kan hjälpa dig att snabbt infoga vanliga kodblock. VS Code har inbyggda kodsnuttar för vanliga uppgifter, och du kan även anpassa dina egna kodsnuttar.

   • Öppna kommandopaletten, skriv Preferences: Configure User Snippets, välj det språk du vill redigera och börja redigera kodsnuttar.
   • Du kan till exempel skapa en clog-kodsnutt för JavaScript för att snabbt infoga console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

5. Använda redigering med flera markörer: Håll ned Alt (Windows/Linux) / Option (macOS)-tangenten och klicka sedan med musen för att skapa markörer på flera platser och redigera flera rader kod samtidigt. Du kan också använda Ctrl+D / Cmd+D för att välja nästa matchning och redigera med flera markörer.

6. Dela redigeraren: Du kan dela redigeraren i flera fönster för att visa och redigera flera filer samtidigt. Du kan använda kommandot View -> Editor Layout -> Split Editor för att dela redigeraren.

7. Fjärrutveckling: VS Code erbjuder Remote Development-tillägget, som låter dig redigera kod på en fjärrserver lokalt. Detta är mycket användbart för att utveckla serverapplikationer.

8. Använda VS Code i webbläsaren: Som @@Prathkum påpekade kan du använda VS Code direkt i webbläsaren genom att besöka vscode.dev, vilket är snabbt och bekvämt. Detta är mycket användbart för tillfällig redigering eller arbete på enheter som inte har VS Code installerat. @@CompuIves arbete har ytterligare förbättrat detta genom att framgångsrikt köra VS Code direkt i webbläsaren och ansluta till CodeSandbox API.

VS Code Verktygsrekommendationer: Skapa din egen exklusiva IDE

Styrkan med VS Code ligger i dess rika ekosystem av tillägg. Här är några vanliga tilläggsrekommendationer:

• Prettier: Ett kodformateringsverktyg som automatiskt kan formatera kod och upprätthålla en konsekvent kodstil.

  ext install esbenp.prettier-vscode
  

• ESLint: Ett JavaScript-kodgranskningsverktyg som kan kontrollera koden för fel och potentiella problem.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Ett verktyg för att upprätthålla enhetlig kodstil mellan olika redigerare.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Startar snabbt en lokal server, vilket underlättar felsökning av frontend-kod. @@ThreatSynop nämner en säkerhetsbrist i Live Server och påminner utvecklare om att vara uppmärksamma på säkerheten när de använder tillägget.

  ext install ritwickdey.LiveServer
  

• Code Runner: Stöder körning av flera programmeringsspråk, vilket underlättar snabb testning av kodsnuttar. Likaså pekar @@ThreatSynop på en säkerhetsbrist i Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Ett tillägg som förbättrar Git-funktioner, du kan se kodens commit-historik, författarinformation etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Färglägger matchande parenteser, vilket underlättar visning av kodstruktur.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Tillhandahålls av Microsoft) AI-assisterad kodkomplettering, kan ge mer intelligenta kodförslag baserat på kontext.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Tillhandahålls av GitHub, betalt) AI-kodassistent, kan generera kodsnuttar, funktioner och till och med hela filer baserat på din kod. @@aadhilkh nämner den höga kostnadseffektiviteten vid användning av VS Code Copilot.

• Markdown Preview Enhanced: Ett bättre plugin för Markdown-förhandsvisning. @@ThreatSynop påpekar också att detta plugin har säkerhetsproblem och bör hanteras med försiktighet.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Inkluderar tillägg som SSH, Containers, WSL etc., vilket underlättar fjärrutveckling.

Om integrering av LLM och VS Code

Det har också förekommit diskussioner på X/Twitter om integrering av LLM och VS Code. @@akshay_pachaar delade en metod för att träna LLM i VS Code. @@MacopeninSUTABA nämnde integrationen av Anthropic's AI-kodningsagent "Claude Code" med VS Code. Dessa indikerar alla att AI kommer att spela en allt viktigare roll i framtida utveckling.

Säkerhetstips

Som @@ThreatSynop nämnde finns det säkerhetsbrister i vissa VS Code-tillägg som kan leda till filstöld och fjärrkörning av kod. Därför bör du vara uppmärksam på följande punkter när du använder tillägg:

• Välj officiella eller välrenommerade tillägg.
• Uppdatera tillägg regelbundet.
• Läs noggrant igenom tilläggets behörighetsbeskrivning.
• Installera kodgranskningsverktyg, som ESLint, kan hjälpa dig att upptäcka potentiella problem i koden.
• Följ säkerhetsmeddelanden från VS Code och tillägg och åtgärda sårbarheter i tid.## Sammanfattning

VS Code är en kraftfull kodredigerare med många praktiska tips och ett rikt ekosystem av tillägg som kan hjälpa utvecklare att öka sin utvecklingseffektivitet. Genom att bemästra kortkommandon, anpassa inställningar, använda kodsnuttar, installera lämpliga tillägg etc. kan du göra VS Code till din egen IDE. Samtidigt bör du vara uppmärksam på säkerhetsfrågor, välja officiella eller välrenommerade tillägg och uppdatera tilläggen regelbundet. Hoppas den här artikeln har varit till hjälp!