Visual Studio Code er en av de mest populære kodeditorene som ikke bare er åpen kildekode, men plattform, lett og rask. Selv om VS Code er ganske kraftig utenom boksen takket være Intellisense-teknologien og inkluderte utvidelser som Emmet, kan du øke funksjonaliteten og nytteverdien ytterligere ved å installere flere utvidelser. Her er noen av de beste VScode-utvidelsene jeg fant fra å bruke Visual Studio Code de siste par årene eller så.
Beste Visual Studio-kodeutvidelser
1. Synkronisering av innstillinger
Settings Sync er en av de beste og må ha VS Code-utvidelse som hver bruker skal ha. Årsaken er at Settings Sync vil synkronisere alle de tilpassede VS-kodens innstillinger, tastebindinger, temaer og programtilleggsliste med GitHub. Dette eliminerer behovet for å installere alle utvidelsene og temaene på nytt og konfigurere dem på nytt hver gang du installerer VS-kode eller når du bruker VS-kode på flere systemer. Det beste med Settings Sync er at det er ganske enkelt å bruke. Når du har koblet den til GitHub, kan du faktisk laste opp eller synkronisere innstillinger med bare en enkelt hurtigtast. Om nødvendig kan du konfigurere den til å laste opp eller laste ned innstillinger automatisk.
2. Live-server
Hvis du er en webutvikler eller bare noen som jobber med webteknologier som CSS, JavaScript, PHP, HTML, etc., så er Live Server et must-have. Hva Live Server gjør er at den vil opprette en lokal server i VS Code og lar deg åpne utviklingssidene med bare to klikk i hvilken som helst nettleser du ønsker. Du trenger ikke å gå til filplasseringen manuelt og åpne den derfra. For ikke å nevne, når Live Server er aktiv og fungerer, vil siden automatisk lastes inn hver gang du lagrer dokumentet. Så hvis du er en webutvikler, kan du prøve. Du kommer ikke tilbake.
3. Åpne i nettleser
Som du kan se fra selve navnet, lar Åpne i nettleserutvidelse deg åpne alle støttede filer i standardleseren eller i nettleseren du ønsker med et enkelt klikk. Selv om det ikke er like kraftig eller funksjonsrikt som Live Server-utvidelse, hjelper Åpne i nettleser deg med å raskt forhåndsvise nettdokumentet uten å lage en forekomst av en bakgrunnsserver. For ikke å nevne at Open in Browser-utvidelsen er ganske lett og gjør det den sier vil gjøre uten hikke.
4. Vakrere
Prettier er en annen av favorittutvidelsene mine som jeg installerer nesten umiddelbart. Som navnet antyder, får Prettier koden til å se pen ut og forbedrer lesbarheten ved å formatere den riktig i henhold til de offisielle og bransjestandardene. Etter at du har installert utvidelsen, kan du enten forhåndsbekrefte koden din ved å trykke på en hurtigtast eller konfigurere utvidelsen fra VS-kodeinnstillingssiden for å formatere koden automatisk ved lagring. Om nødvendig kan du endre hvordan Prettier formaterer koden din ved å endre forskjellige innstillinger som fanerom, brakeavstand, etterfølgende komma, utskriftsbredde, innpakning osv., Fra selve innstillingssiden.
5. Fargeinfo
Color Info er en veldig enkel, men effektiv utvidelse som viser en stor forhåndsvisning og tilleggsinformasjon om fargene du bruker i CSS. I tilfelle du lurer på, ja, VS Code viser en liten forhåndsvisning av fargen du bruker. Det er imidlertid ikke så nyttig, spesielt i mørke temaer. Tilleggsinformasjonen som vises med Color Info inkluderer, men er ikke begrenset til HSL-verdier, RGB-verdier, alfa-verdi, flere typer forhåndsvisninger av farger osv. Color Info støtter CSS, SASS, SCSS og LESS.
6. Todo Highlighter
Har du noen gang ønsket å gjøre noen endringer, oppdatere eller legge til kode, men glemte det? Installer Todo Highlighter, og du trenger ikke å gå gjennom den prøvelsen igjen. Hvis du noen gang har brukt Todo-funksjonen i en hvilken som helst IDE (Integrated Development Environment), fungerer Todo Highlighter i VS Code på samme måte. Bare legg til Todo’ene som du pleier å gjøre, så skiller de seg ut fra den vanlige koden din og gjør oppmerksom på det.
7. Forhåndsvisning av Regex
Uansett hvor mange ganger jeg bruker Regular Expressions, blir jeg fortsatt forvirret av dem. For å si det ærlig, kan jeg ikke skrive min egen Regex ordentlig. En av årsakene til dette er at jeg ikke kan bekrefte regexen min i farta. Det er her Regex Preview kommer til å spille. Etter at du har installert Regex Preview, viser den forhåndsvisning av regexen din side om side. Hvis du spiller med mange vanlige uttrykk, så prøv Regex Preview og se om det passer dine behov.
8. Git Lens
VS Code har skikkelig innebygd støtte for Git og gjør den enkel å bruke. Git Lens tar det et hakk og lader de innebygde Git-funksjonene til VS Code. Det som gjør Git Lens spesiell er at det gjør det enkelt å utforske arkiver, utforske filhistorikk, visualisere kodeforfatteri med Git-skyldkommentarer og kodelinser, fremhever nylige endringer, begå søk, sammenligne forskjellige grener osv. Hvis du bruker Git mye, så prøv Git Lens, det gjør en verden av forskjell i arbeidsflyten din.
9. Path Intellisense
I nettutvikling er det veldig vanlig å koble forskjellige typer filer som CSS, JS i dokumenter som HTML og PHP. Selv om det ikke er så vanskelig å skrive inn filbanen, kan litt assistanse i form av automatisk fullføring komme langt. Path Intellisense gjør akkurat det. Det vil si at den automatisk fullfører filnavnet og banen slik at du ikke trenger å tenke to ganger om filstien eller navnet.
10. CSS-titt
VS Code har en fin funksjon kalt Go To Definition og Go To Type Definition som tar deg til erklæringen eller typedefinisjonen av et symbol. CSS Peek tar det et hakk og viser deg en forhåndsvisning av CSS som brukes i dokumentet. Dette er ganske nyttig fordi du ikke trenger å forlate det nåværende dokumentet bare for å se hva du gjør med den spesifikke CSS-klassen eller ID-en. Hvis du er en webdesigner, er CSS Peek en av disse må-ha-utvidelsene for VS Code.
11. Markdown Alt i ett
Markdown All in One lar deg raskt opprette og redigere readme-filer eller rich text ved hjelp av Markdown rett innenfor VS-koden. Det beste med Markdown All in One er at den kan vise en direkte forhåndsvisning, og bruken er også veldig intuitiv.
12. Bokmerker
Hvis du skriver mye kode, er det helt naturlig at du beveger deg mellom noen viktige deler igjen og igjen. Selv om VS-kode har linjenumre, gjør det livet ditt lettere hvis du kan merke de viktige linjene. Bokmerkeutvidelsen gjør akkurat det slik at du enkelt kan merke viktige posisjoner og navigere mellom dem raskt og enkelt.
13. Brakettpar Colorizer
Jeg har nylig oppdaget Bracket Pair Colorizer-utvidelsen, og den ble raskt en av favorittutvidelsene mine i VS Code. Som du kan se fra selve navnet, gjør Bracket Pair Colorizer det enkelt å identifisere samsvarende parenteser. Ikke bare vil det matche parenteser med farger, men vil også markere hele kodeblokken i parentesene slik at du vet hvor du er. Stol på meg, når du lager nestede løkker eller hvis uttalelser, vil Bracket Pair Colorizer hjelpe deg mye.
Håper det hjelper. Hvis du tror jeg savnet noen av favoritt VS-kodeutvidelsene dine, så del dem i kommentarfeltet nedenfor.
