En oversigt over Visual Studio-kode til front-end-udviklere

Uanset om du er en nybegynder eller en erfaren udvikler, er kodeditor en vigtig del af dit arbejde. Problemet, især hvis du er nybegynder, er, at der er mange valgmuligheder for IDE'er. Og mange af dem deler lignende funktioner, funktionaliteter og endda UI. Som et resultat kan det faktisk tage mere tid og kræfter, som du troede, at vælge den rigtige IDE.

Hvis dit spørgsmål lige nu er: "Hvilken kodeditor skal jeg starte med?", Ville jeg svare: "Det afhænger, min ven." Valg af en bestemt IDE afhænger markant af nogle få faktorer: hvilken type udvikler du er, hvilke slags af miljøer, du for det meste arbejder med, eller om du har en eksklusiv indbygget funktion, som du absolut har brug for for at få udført job.

Jeg vil sige, at måden at vælge en er at prøve at udforske dem alle og derefter vælge det, der passer bedst til dig.

Valg af den rigtige kodeditor til dig

Som de fleste nybegynder gør, startede jeg med Notepad ++ som min første kodeditor. Dette er måske en af ​​de enkleste IDE'er, jeg har prøvet. Senere, efterhånden som mine behov begyndte at kræve mere avanceret funktionalitet fra redaktøren, prøvede jeg Brackets, Atom og derefter Visual Studio Code.

Efter en anstændig mængde eksperimentering blev VSCode min favorit. Det imponerede mig med dets moderne brugergrænseflade, en bred tilgængelighed af udvidelser samt fantastiske funktioner såsom indbygget Git og terminal.

Hovedformålet med denne blog er ikke at sammenligne forskellige IDE'er, men at diskutere min oplevelse med VSCode. Så i dette indlæg vil jeg:

  • Vis en kort introduktion til VSCode
  • introducer det bestemt tema, jeg har installeret
  • diskutere nyttige udvidelser, jeg bruger
  • viser dig, hvordan jeg udnytter VSCodes funktioner til at forbedre min arbejdsgang.

Lad os komme ind på det!

Men først, hvad er VSCode alligevel?

Visual Studio Code (VSCode) er en kildekodeditor, der er udviklet af Microsoft, der kan køres på Windows, macOS og Linux. Det er gratis open source og giver support til fejlfinding såvel som indbygget Git-versionskontrol, syntaks-højdepunkter, uddrag osv. Brugergrænsefladen til VSCode er meget tilpasselig, da brugere kan skifte til forskellige temaer, tastaturgenveje og præferencer.

VSCode blev oprindeligt annonceret i 2015 som et open source-projekt, der blev hostet på GitHub, før det blev frigivet på nettet et år senere. Siden da har Microsofts kodeditor fået popularitet blandt udviklere.

I udviklingsundersøgelsen af ​​Stack Overflow 2018 blev VSCode rangeret som det mest populære udviklingsmiljø med ca. 35% ud af over 100.000 respondenter, der siger, at de bruger det. Mere imponerende er dette tal omkring 39% inden for webudviklingsfeltet.

Og med månedlige opdateringer kan brugerne forvente at nyde en endnu bedre oplevelse - fejlrettelser, stabilitet og ydeevne øges ofte.

Tema: Farve og skrifttype

Hvis du er som mig, og du interesserer dig for dit IDE-tema, er det meget vigtigt at finde en passende font og temafarve. Jeg foretrækker personligt et mørkt tema og hader standard Consolas-skrifttypen til VSCode på Windows.

Så Monokai-farvetemaet og FiraCode-skrifttypen er mine nuværende valg. Denne kombination bringer en høj kontrast, som jeg synes er meget behagelig at arbejde med.

  • Hvis du vil installere et tema, skal du klikke på Indstillingsikonet => Farvetema => Vælg det tema, du kan lide
  • Find installationsvejledning for FiraCode her.
  • Du kan også tjekke OneDarkPro, et andet fantastisk mørkt tema: i Extensions (Ctrl + Shift + X på Windows), søg efter OneDarkPro, klik på Installer, og vælg det fra Color Theme.

Nyttige udvidelser (Udvidelser => Søgning => Installer)

Dette er nogle af mine yndlingsudvidelser:

  • Forskønne: Skønne kode på plads og gøre din kode mere læsbar
  • Bracket Pair Colorizer: gør det muligt at identificere matchende parenteser med farver
Farverne på (og {er adskilt ikke?)
  • ESLint: en skal-have udvidelse til React- eller JavaScript-udviklere generelt. ESLint bruges til at finde problemer og skrivefejl i din kode, og giver dig mulighed for at markere denne skrivefejl. Det foreslår også løsninger.
  • HTML-kodestykker: tilføj understøttelse af rig sprog til HTML-markeringen, f.eks. Automatisk lukning af tags.
  • Kodestykker af JavaScript (ES6): temmelig selvforklarende
  • Live Server: start en lokal server med live reload-funktioner til dit HTML- eller PHP-sted
  • Forhåndsvisning af markdown Forbedret: kør live server til din markdown-fil.
  • Materiale ikon-tema: indeholder ikoner baseret på Googles materialedesign. For at aktivere skal du klikke på Setting => File Icon Theme => Vælg Material Icon Icon Theme
  • Smukkere: Formater din JavaScript / TypeScript / CSS-kode smukt.

Tilpas dit brugergrænseflade

Du kan tilpasse næsten alt fra font-familie og fontstørrelse på din kode til linjehøjde ved:

  • Gå til Brugerindstillinger (Ctrl +,)
  • Søger efter nøgleord relateret til din ønskede tilpasning
  • Klik på knappen Rediger i venstre side af indstillingerne og vælg Erstat under Indstillinger
  • Ændring af værdien af ​​den indstilling, du lige har valgt.

I min nuværende opsætning satte jeg fontSize til 14, lineHeight til 22 og tabSize til 3 for min personlige præference (og for god læsbarhed).

Ting, jeg ville ønske, at jeg havde kendt siden begyndelsen

Bortset fra disse temaer og udvidelser vil jeg gerne dele med dig, hvordan jeg bruger VSCodes fantastiske funktioner til at øge produktiviteten. Dette er alt, hvad jeg ikke vidste som nybegynder, og som ville have været meget nyttigt til at udnytte og lette min arbejdsgang.

Integrerede terminaler

Det er slags uundgåeligt, at jo mere tid du er i softwareudvikling, desto vigtigere bliver terminalen. Som JavaScript-udvikler bruger jeg terminalen til at installere pakker, køre udviklingsserveren eller endda skubbe ændringer i mit nuværende arkiv til GitHub.

I begyndelsen tog jeg for det meste de opgaver med Windows Command Prompt eller Git Bash senere. Hvis du bruger Windows, kan du måske vide, hvor dum og irriterende CMD kan være. Git Bash er et dejligt værktøj, men at skifte mellem apps, når du arbejder, er ikke rigtig en behagelig oplevelse.

VSCode løser virkelig dette problem for mig med sin fantastiske terminal. Og den seje ting er, at du nemt kan indstille den til at arbejde på samme måde som Git Bash, men lige inden i VSCode! Derefter har du en fantastisk kombination.

For at få adgang til VSCode-terminalen skal du bruge Ctrl + `(venstre side af din 1-tast). Så dukker terminalen op.

Herfra kan du gøre masser af seje ting som at oprette en ny terminal eller dræbe den eksisterende. Du kan også dele visningen såvel som sidevisningen.

Det er sejt at have flere terminaler bygget lige i din kodeditor, er det ikke?

Kildekontrol (Git)

Når du arbejder på et lager og konstant har brug for at foretage ændringer, ville du normalt finde terminalen til at foretage de seneste ændringer, ikke sandt? Nå, VSCode giver dig et fantastisk indbygget værktøj til at kontrollere dine versioner.

Ved at klikke på Git-ikonet i venstre panel eller ved at bruge Ctrl + Shift + G (Windows) har du let adgang til kildekontrol. Herinde kan du gøre alle Git-tingene. Så praktisk, er det ikke?

Hvordan forbedrer alle disse ting min arbejdsgang - og hvordan kan de også gøre din bedre?

Efter en anstændig mængde tid at arbejde med VSCode, er jeg meget overbevist om, at dens nøgleværdi er baseret i dets alt-i-et-miljø. Alle mine behov og opgaver inden for min arbejdsgang som Front-end-udvikler håndteres pænt og fejlfrit.

For at gøre disse fordele klarere, lad mig lede dig gennem min normale arbejdsgang.

Lad os sige, at jeg har nogle ideer, der arbejder på en ny Musik-app oprettet af React. Jeg starter normalt et projekt ved at oprette en tom mappe - så jeg opretter en ny mappe ved navn music_react. Derefter kan jeg øjeblikkeligt åbne projektet i VSCode ved at vælge en højreklik-mulighed.

Når jeg først er i mit arbejdsprojekt, kan jeg hurtigt oprette filen og mapperne med genveje i venstre panel.

I dette projekt vil jeg bruge create-react-app-initialiseringen. Derfor er jeg muligvis nødt til at installere denne pakke - ikke en stor aftale. Jeg åbner min terminal ved at skrive Ctrl + `. Utrolig nok navigerer terminalen automatisk til min nøjagtige mappe. Det er ikke nødvendigt at skifte mapper længere.

Efter at have indtastet kommandolinjen for at installere npm-pakken, er alt hvad jeg skal gøre, at vente, indtil alle afhængigheder er installeret.

Jeg vil også udgive mit projekt på GitHub, så jeg skulle sandsynligvis initialisere et Git-arkiv til at begynde med. Når pakkerne er installeret, skriver jeg også en Git-initialiseringskommando lige i min terminal.

Når Git er installeret, kan jeg overføre alle afventende ændringer lige i kildekontrollen på venstre panel.

Derefter kan jeg fortsætte med at arbejde på mit projekt som normalt. Desuden kan jeg skubbe alle ændringer til GitHub fra min terminal, hvis jeg vil.

Afslutter

Så det er min normale arbejdsgang i VSCode-miljøet. Jeg forstår, at dette varierer markant afhængigt af hvilken type udvikler du er. En back-end-udvikler har muligvis en helt anden arbejdsgang i forhold til min.

Hvis du imidlertid er en front-end-udvikler, der bare bliver kjent med VSCode, og du vil tjekke det ud, før du går ind i det, håber jeg, at denne artikel giver dig indsigt og hjælper med at forbedre din produktivitet. Når alt kommer til alt er min største inspiration til at skrive denne lille retningslinje, fordi jeg ikke rigtig kunne finde nogen grundig gennemgang af VSCode for nytilkomne. Som et resultat kan denne blog forhåbentlig give dig en vis værdi.

Til sidst, hvis din opsætning er anderledes end min, eller der er store udvidelser, som du synes er rart at have, så tøv ikke med at dele i kommentarerne. Jeg er spændt på at høre fra dig!

Det er slutningen på denne blog! Tak for at have læst! Hvis du kan lide det, skal du trykke på

Sig hej på SM: Facebook, Twitter, LinkedIn eller min personlige side.

Hold øje med kommende teknologiske blogs