VS Code Praktisk Guide: Viktige tips og verktøyanbefalinger for effektive utviklere

Visual Studio Code (VS Code) er en gratis, åpen kildekode og plattformuavhengig kodeeditor som er svært populær blant utviklere. Den har kraftige funksjoner, et rikt utvidelsesøkosystem og et enkelt og brukervennlig grensesnitt. Denne artikkelen vil kombinere nylige diskusjoner på X/Twitter for å oppsummere praktiske VS Code-tips og verktøyanbefalinger for å hjelpe deg med å øke utviklingseffektiviteten.

Hva er appellen til VS Code?

Fra X/Twitter-diskusjonen kan vi se utviklernes entusiasme for VS Code. @@freeCodeCamp nevnte gjentatte ganger populariteten og gratis tilgjengeligheten til VS Code, og understreket de rike funksjonene den tilbyr. @@chomado delte sin favoritteditor og anbefalte utvidelsesfunksjoner for frontend-ingeniører.

For å oppsummere inkluderer de viktigste fordelene med VS Code:

• Gratis og åpen kildekode: Alle kan bruke den gratis og delta i utviklingen av fellesskapet.
• Plattformuavhengig: Støtter flere operativsystemer som Windows, macOS, Linux osv.
• Lettvekt: Rask oppstartshastighet og lavt ressursforbruk.
• Kraftig utvidelsesøkosystem: Ved å installere utvidelser kan du forbedre funksjonene til VS Code for å møte ulike utviklingsbehov.
• Innebygde feilsøkingsverktøy: Støtter feilsøking av flere programmeringsspråk, noe som gjør det enkelt for utviklere å raskt finne og løse problemer.
• Integrert Git: Gjør det enkelt for utviklere å utføre versjonskontroll.
• Intelligente tips: Gir kodefullføring, syntaksjekk og andre funksjoner for å forbedre kodeeffektiviteten.

VS Code Praktiske tips: Øk utviklingseffektiviteten din

1. Mestre hurtigtaster: VS Code tilbyr et rikt utvalg av hurtigtaster, og å mestre disse hurtigtastene kan i stor grad forbedre utviklingseffektiviteten. Her er noen vanlige hurtigtaster:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Åpne kommandopaletten. Dette er en av kjernefunksjonene i VS Code, og du kan utføre ulike operasjoner gjennom kommandopaletten.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Åpne filer raskt.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Gå raskt til symboler (funksjoner, klasser osv.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Globalt søk.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Velg neste treff. Du kan redigere flere identiske tekster samtidig.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Kopier gjeldende linje til neste/forrige linje.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Kommenter/fjern kommentar fra gjeldende linje eller valgt kodeblokk.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Flytt gjeldende linje eller valgt kodeblokk opp/ned.
   • Ctrl+K Ctrl+S: Åpne grensesnittet for innstillinger for tastatursnarveier, hvor du kan se og tilpasse hurtigtaster.

2. Gjør god bruk av kommandopaletten: Åpne kommandopaletten via Ctrl+Shift+P / Cmd+Shift+P for å utføre ulike operasjoner, for eksempel:

   • Settings: Åpne innstillingsgrensesnittet.
   • Extensions: Install Extension: Installer utvidelser.
   • Git: Commit: Send Git-endringer.
   • Format Document: Formater gjeldende dokument.
   • Go to Symbol in Workspace: Gå raskt til symboler i arbeidsområdet.

3. Egendefinerte innstillinger: VS Code lar brukere tilpasse ulike innstillinger, inkludert tema, skrifttype, innrykk og mer. Du kan åpne innstillingsgrensesnittet via File -> Preferences -> Settings, eller redigere settings.json-filen direkte.

   • Tema: Velg et tema du liker for å forbedre komforten under koding.
   • Skrifttype: Velg en passende skrifttype for å forbedre lesbarheten av koden. Det anbefales å bruke en monospace-skrifttype, for eksempel Fira Code, JetBrains Mono, etc.
   • Innrykk: Angi innrykksmetoden i henhold til prosjektspesifikasjonene, du kan bruke mellomrom eller Tab-tasten.
   • Autolagring: Slå på autolagringsfunksjonen for å unngå å miste kode fordi du glemmer å lagre.

4. Bruk av kodesnutter (Code Snippets): Kodesnutter kan hjelpe deg med å raskt sette inn vanlige kodeblokker. VS Code har noen vanlige kodesnutter innebygd, og du kan også tilpasse kodesnutter.

   • Åpne kommandopaletten, skriv inn Preferences: Configure User Snippets, velg språket du vil redigere, og du kan redigere kodesnuttene.
   • Du kan for eksempel opprette en clog-kodesnutt for JavaScript for raskt å sette inn console.log():

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

5. Bruk av multi-markørredigering: Hold nede Alt (Windows/Linux) / Option (macOS)-tasten, og klikk deretter med musen for å opprette markører på flere steder og redigere flere linjer med kode samtidig. Du kan også bruke Ctrl+D / Cmd+D for å velge neste samsvar og utføre multi-markørredigering.

6. Del redigeringsprogrammet: Du kan dele redigeringsprogrammet i flere vinduer for å vise og redigere flere filer samtidig. Du kan bruke kommandoen View -> Editor Layout -> Split Editor for å dele redigeringsprogrammet.

7. Fjernutvikling: VS Code tilbyr Remote Development-utvidelsen, som lar deg redigere kode på en ekstern server lokalt. Dette er veldig nyttig for utvikling av serverapplikasjoner.

8. Bruk VS Code i nettleseren: Som @@Prathkum påpekte, kan du bruke VS Code direkte i nettleseren ved å gå til vscode.dev, noe som er praktisk og raskt. Dette er veldig nyttig for midlertidig redigering eller arbeid på enheter som ikke har VS Code installert. Arbeidet til @@CompuIves forbedret dette ytterligere, han klarte å kjøre VS Code direkte i nettleseren og koble den til CodeSandbox API.

VS Code 工具推荐：打造你的专属 IDE

VS Codes styrke ligger i det rike utvidelsesøkosystemet. Her er noen vanlige utvidelsesanbefalinger:

• Prettier: Et kodeformateringsverktøy som automatisk kan formatere kode og opprettholde en konsistent kodestil.

  ext install esbenp.prettier-vscode
  

• ESLint: Et JavaScript-kodeinspeksjonsverktøy som kan sjekke koden for feil og potensielle problemer.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Et verktøy for å opprettholde konsistent kodestil på tvers av forskjellige editorer.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Starter raskt en lokal server, praktisk for feilsøking av frontend-kode. @@ThreatSynop nevner en sikkerhetssårbarhet i Live Server, og minner utviklere om å være oppmerksomme på sikkerheten når de bruker utvidelsen.

  ext install ritwickdey.LiveServer
  

• Code Runner: Støtter kjøring av flere programmeringsspråk, praktisk for rask testing av kodebiter. På samme måte peker @@ThreatSynop på en sikkerhetssårbarhet i Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: En utvidelse som forbedrer Git-funksjonaliteten, lar deg se kodens commit-historikk, forfatterinformasjon osv.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Fargekoder parenteser for å gjøre det lettere å se kodestrukturen.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Levert av Microsoft) AI-assistert kodefullføring, kan gi mer intelligente kodeforslag basert på kontekst.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Levert av GitHub, betalt) AI-kodeassistent, kan generere kodebiter, funksjoner og til og med hele filer basert på koden din. @@aadhilkh nevner den høye kostnadseffektiviteten ved bruk av VS Code Copilot.

• Markdown Preview Enhanced: En bedre Markdown-forhåndsvisningsplugin. @@ThreatSynop påpeker også at denne pluginen har sikkerhetsproblemer, og man må være forsiktig.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Inkluderer utvidelser som SSH, Containers, WSL osv., praktisk for ekstern utvikling.

Om integrasjon av LLM og VS Code

Det har også vært noen diskusjoner om integrasjon av LLM og VS Code på X/Twitter. @@akshay_pachaar delte en metode for å trene LLM i VS Code. @@MacopeninSUTABA nevnte integrasjonen av Anthropic sin AI-kodeagent "Claude Code" med VS Code. Dette indikerer at AI vil spille en stadig viktigere rolle i fremtidig utvikling.

Sikkerhetstips

Som @@ThreatSynop nevnte, har noen VS Code-utvidelser sikkerhetssårbarheter som kan føre til filtyveri og ekstern kodeutførelse. Derfor, når du bruker utvidelser, bør du være oppmerksom på følgende:

• Velg offisielle eller anerkjente utvidelser.
• Oppdater utvidelser regelmessig.
• Les nøye gjennom utvidelsens tillatelsesbeskrivelse.
• Installer kodekontrollverktøy, for eksempel ESLint, som kan hjelpe deg med å oppdage potensielle problemer i koden din.
• Følg med på sikkerhetsmeldinger fra VS Code og utvidelser, og fiks sårbarheter i tide.## Oppsummering

VS Code er en kraftig kodeeditor med mange praktiske tips og et rikt utvidelsesøkosystem som kan hjelpe utviklere med å øke utviklingseffektiviteten. Ved å mestre hurtigtaster, tilpasse innstillinger, bruke kodebiter, installere passende utvidelser osv., kan du gjøre VS Code til din egen IDE. Samtidig må du være oppmerksom på sikkerhetsproblemer, velge offisielle eller anerkjente utvidelser og oppdatere utvidelser regelmessig. Håper denne artikkelen har vært nyttig for deg!