VS Code Praktisk Guide: Vigtige tips og værktøjsanbefalinger til effektive udviklere

Visual Studio Code (VS Code) er en gratis, open source og cross-platform kodeeditor, der er meget populær blandt udviklere. Den har kraftfulde funktioner, et rigt udvidelsesøkosystem og en enkel og brugervenlig grænseflade. Denne artikel vil kombinere de seneste diskussioner på X/Twitter for at opsummere praktiske VS Code-tips og værktøjsanbefalinger, der hjælper dig med at forbedre din udviklingseffektivitet.

Hvad er charmen ved VS Code?

Fra X/Twitter-diskussionerne kan vi se udviklernes entusiasme for VS Code. @@freeCodeCamp har gentagne gange nævnt VS Codes popularitet og gratis karakter og understreget de mange funktioner, den tilbyder. @@chomado delte sin yndlingseditor og anbefalede udvidelser til frontend-ingeniører.

For at opsummere inkluderer VS Codes vigtigste fordele:

• Gratis og open source: Alle kan bruge den gratis og deltage i fællesskabets udvikling.
• Cross-platform: Understøtter flere operativsystemer som Windows, macOS, Linux osv.
• Letvægt: Hurtig opstart og lavt ressourceforbrug.
• Kraftfuldt udvidelsesøkosystem: Ved at installere udvidelser kan du forbedre VS Codes funktionalitet og imødekomme forskellige udviklingsbehov.
• Indbyggede debugging-værktøjer: Understøtter debugging af flere programmeringssprog, hvilket gør det nemt for udviklere hurtigt at lokalisere og løse problemer.
• Integreret Git: Gør det nemt for udviklere at udføre versionskontrol.
• Intelligente forslag: Giver kodefuldførelse, syntakscheck og andre funktioner for at forbedre kodningseffektiviteten.

VS Code Praktiske tips: Forbedre din udviklingseffektivitet

1. Behersk genvejstaster: VS Code tilbyder et rigt sæt genvejstaster, og beherskelse af disse genvejstaster kan i høj grad forbedre udviklingseffektiviteten. Her er nogle almindelige genvejstaster:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Åbn kommandopaletten. Dette er en af ​​VS Codes kernefunktioner, og du kan udføre forskellige handlinger via kommandopaletten.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Åbn filen hurtigt.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Gå hurtigt til symbol (funktion, klasse osv.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Global søgning.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Vælg det næste match. Du kan redigere flere identiske tekster samtidigt.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Kopier den aktuelle linje til næste/forrige linje.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Kommenter/fjern kommentar fra den aktuelle linje eller den valgte kodeblok.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Flyt den aktuelle linje eller den valgte kodeblok op/ned.
   • Ctrl+K Ctrl+S: Åbn grænsefladen til indstilling af tastaturgenveje, hvor du kan se og tilpasse genvejstaster.

2. Gør god brug af kommandopaletten: Åbn kommandopaletten via Ctrl+Shift+P / Cmd+Shift+P for at udføre forskellige handlinger, for eksempel:

   • Settings: Åbn indstillingsgrænsefladen.
   • Extensions: Install Extension: Installer udvidelsen.
   • Git: Commit: Commit Git-ændringer.
   • Format Document: Formater det aktuelle dokument.
   • Go to Symbol in Workspace: Gå hurtigt til symbolet i arbejdsområdet.

3. Tilpasning: VS Code giver brugerne mulighed for at tilpasse forskellige indstillinger, herunder temaer, skrifttyper, indrykning osv. Du kan åbne indstillingsgrænsefladen via File -> Preferences -> Settings eller redigere filen settings.json direkte.

   • Tema: Valg af et tema, du kan lide, kan forbedre komforten ved kodning.
   • Skrifttype: Valg af en passende skrifttype kan forbedre kodens læsbarhed. Det anbefales at bruge en skrifttype med fast bredde, såsom Fira Code, JetBrains Mono osv.
   • Indrykning: Indstil indrykningen i henhold til projektspecifikationerne. Du kan bruge mellemrum eller tabulatortasten.
   • Automatisk lagring: Aktivering af automatisk lagring kan forhindre tab af kode, fordi du glemmer at gemme.

4. Udnyttelse af kodebidder (Code Snippets): Kodebidder kan hjælpe dig med hurtigt at indsætte almindeligt anvendte kodeblokke. VS Code har indbygget nogle almindeligt anvendte kodebidder, og du kan også tilpasse kodebidder.

   • Åbn kommandopaletten, skriv Preferences: Configure User Snippets, vælg det sprog, du vil redigere, og så kan du redigere kodebidder.
   • Du kan f.eks. oprette et clog-kodebid for JavaScript for hurtigt at indsætte console.log():

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

5. Brug af redigering med flere markører: Hold Alt-tasten (Windows/Linux) / Option-tasten (macOS) nede, og klik derefter med musen for at oprette markører flere steder og redigere flere linjer kode samtidigt. Du kan også bruge Ctrl+D / Cmd+D til at vælge det næste match og udføre redigering med flere markører.

6. Opdeling af editor: Du kan opdele editoren i flere vinduer for at se og redigere flere filer samtidigt. Du kan bruge kommandoen View -> Editor Layout -> Split Editor til at opdele editoren.

7. Fjernudvikling: VS Code tilbyder Remote Development-udvidelsen, som giver dig mulighed for at redigere kode på en fjernserver lokalt. Dette er meget nyttigt til udvikling af server-side applikationer.

8. Brug af VS Code i browseren: Som @@Prathkum påpegede, kan du få adgang til vscode.dev for at bruge VS Code direkte i browseren, hvilket er praktisk og hurtigt. Dette er meget nyttigt til midlertidig redigering eller arbejde på enheder, hvor VS Code ikke er installeret. @@CompuIves's arbejde har yderligere forbedret dette, idet han med succes har fået VS Code til at køre direkte i browseren og oprette forbindelse til CodeSandbox's API.

VS Code værktøjsanbefalinger: Skab din egen IDE

VS Codes styrke ligger i dets rige udvidelsesøkosystem. Her er nogle almindeligt anvendte udvidelsesanbefalinger:

• Prettier: Kodeformateringsværktøj, der automatisk kan formatere kode og opretholde en ensartet kodestil.

  ext install esbenp.prettier-vscode
  

• ESLint: JavaScript-kodekontrolværktøj, der kan kontrollere for fejl og potentielle problemer i koden.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Et værktøj til at opretholde en ensartet kodestil på tværs af forskellige editorer.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Starter hurtigt en lokal server, hvilket gør det nemmere at debugge frontend-kode. @@ThreatSynop nævner en sikkerhedsbrist i Live Server og minder udviklere om at være opmærksomme på sikkerheden, når de bruger udvidelsen.

  ext install ritwickdey.LiveServer
  

• Code Runner: Understøtter kørsel af flere programmeringssprog, hvilket gør det nemt hurtigt at teste kodebidder. Ligeledes påpeger @@ThreatSynop en sikkerhedsbrist i Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: En udvidelse, der forbedrer Git-funktionaliteten, så du kan se kodens commit-historik, forfatterinformation osv.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Farvekoder parenteser for at gøre det nemmere at se kodestrukturen.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Leveret af Microsoft) AI-assisteret kodefuldførelse, der kan give mere intelligente kodeforslag baseret på konteksten.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Leveret af GitHub, betalt) AI-kodeassistent, der kan generere kodebidder, funktioner og endda hele filer baseret på din kode. @@aadhilkh nævner den høje værdi for pengene ved at bruge VS Code Copilot.

• Markdown Preview Enhanced: Et bedre Markdown-preview plugin. @@ThreatSynop påpeger også, at dette plugin har sikkerhedsproblemer, som man skal være opmærksom på.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Inkluderer udvidelser som SSH, Containers, WSL osv., hvilket gør det nemmere at udføre fjernudvikling.

Om integrationen af LLM og VS Code

Der er også dukket diskussioner op på X/Twitter om integrationen af LLM og VS Code. @@akshay_pachaar delte en metode til at træne LLM'er i VS Code. @@MacopeninSUTABA nævnte integrationen af Anthropic's AI-kodningsagent "Claude Code" med VS Code. Disse indikerer alle, at AI vil spille en stadig vigtigere rolle i fremtidig udvikling.

Sikkerhedstips

Som @@ThreatSynop nævnte, er der sikkerhedsbrister i nogle VS Code-udvidelser, der kan føre til filtyveri og eksekvering af fjernkode. Derfor skal du være opmærksom på følgende, når du bruger udvidelser:

• Vælg officielle eller velrenommerede udvidelser.
• Opdater udvidelser regelmæssigt.
• Læs udvidelsens tilladelsesbeskrivelse omhyggeligt.
• Installer kodeinspektionsværktøjer, såsom ESLint, som kan hjælpe dig med at opdage potentielle problemer i din kode.
• Hold øje med sikkerhedsmeddelelser fra VS Code og udvidelser, og ret sårbarheder i tide.## Konklusion

VS Code er en kraftfuld kodeeditor med mange praktiske tips og et rigt økosystem af udvidelser, der kan hjælpe udviklere med at forbedre deres udviklingseffektivitet. Ved at mestre tastaturgenveje, tilpasse indstillinger, bruge kodebidder, installere passende udvidelser osv., kan du omdanne VS Code til din egen dedikerede IDE. Samtidig skal du også være opmærksom på sikkerhedsproblemer, vælge officielle eller velrenommerede udvidelser og opdatere udvidelser regelmæssigt. Håber denne artikel har været nyttig for dig!