Visual Studio Code Min nye favoritt kode editor

I denne videoen skal jeg introdusere deg til min nye favorittkodeditor: Visual Studio Code. Visual Studio er et Microsoft-produkt, som kan komme som en overraskelse for mange av dere, men ta forutsetningene dine til side for et øyeblikk og bli med meg når jeg viser deg rundt.

Visual Studio Code

 

Gjennom årene har jeg brukt en rekke forskjellige kodeditorer; TextMate, Coda, Sublime Text, Atom, og hver har hatt sine fordeler og ulemper. Visual Studio Code, men er absolutt min favoritt så langt, så la oss ta en titt på noen av funksjonene sine.

Begynn å laste ned versjonen for systemet ditt (Windows, Mac OS, Linux) på code.visualstudio.com (det er gratis også).

UI

En av grunnene til at jeg liker Visual Studio Code så mye er grensesnittet; det er veldig enkelt.

Den har et par sidebjelker, som kan plasseres til venstre eller høyre etter dine preferanser. Den første gir deg noen ikoner for å bytte mellom paneler. Velg fra Explorer, Søk, Git, Debug og Extensions. Gå til Vis for å endre type skjerm (full skjerm, zen modus etc.)

Hovering over mapper i Utforskeren gir oss et par alternativer: Ny fil, Ny mappe, Oppdater, og Collapse All. Høyreklikk gir en kontekstmeny.

Kommandopaletten

Truffet Skift-Kommando-P å ta opp kommandopaletten.

Innenfor dette panelet kan du søke etter hva du vil for rask og enkel handling; Git-kommandoer, endring av temaer, installering av utvidelser - alt kan gjøres via kommandopaletten.

på samme måte, Kommando-P vil hente opp Gå til fil ... palett.

Terminal

Holding Kommando-' vil åpne den innebygde terminalen, som jeg kjærlighet.

Dette åpner terminalen direkte i roten av prosjektet ditt, og sparer deg fra å måtte navigere. Klikk på + ikonet åpner flere terminalvinduer som kan byttes mellom ved hjelp av rullegardinmenyen. Alt dette legger til en veldig nyttig funksjon, spesielt hvis du bruker kompilatorer når du koder.

Git

En annen funksjon jeg er en stor fan av, er Git-integrasjonen. Endringer du gjør i filene dine er uthevet på forskjellige steder, slik at du vet nøyaktig hva som skjer:

I figuren over kan du se sidebarvarselet fortelle meg om en ubegrenset endring, endringen som er oppført i Git-panelet, og en linjehøyde for å vise meg hvor endringen er i selve filen.

VSC vil også vise versjonen sammenligninger side ved side, bare for ekstra klarhet.

Andre standard Git-kommandoer som synkronisering, trekk og så videre, er tilgjengelige fra Git-panelet.

Emmet (Zen Coding)

Gode ​​nyheter: Emmet er allerede bygget inn i VSC. Ingen oppsett eller konfigurasjon er nødvendig, du kan bare begynne å bruke den (med Tab være den forhåndsdefinerte hurtigtast for å utløse dine utdrag) så snart du åpner redigeringen for første gang.

Flere markører

Når du markerer et stykke kode i filen, vil VSC automatisk markere alle andre forekomster av den aktuelle strengen. Du kan da treffe Kommando-D for å legge til en annen markør i neste forekomst, eller Skift-Kommando-L å legge til en markør i alle tilfeller. Massearbeid, enkelt.

innstillinger

Innstillingssiden i VSC er veldig intuitiv. Som Sublime Text, lagres innstillingene i en fil (JSON i dette tilfellet) som lar deg bla gjennom alle standardinnstillingene. Ved å trykke på redigere ikonet ved siden av hver innstilling, kopierer du det til en egendefinert fil der du kan gjøre endringer:

Truffet Lagre og se endringene dine har umiddelbar effekt.

IntelliSense

IntelliSense er en funksjon innen VSC som jeg var veldig opptatt av å prøve ut så snart jeg først åpnet redaktøren. Det er en superbelastet assistent for automatisk ferdigstillelse, syntax-markering og går litt lenger enn du forventer at denne typen funksjon skal gå.

Hovering over CSS selectors vil gi deg et eksempel på hvordan du kan bruke den tilsvarende HTML (veldig nyttig for nybegynnere):

Hovering over egenskapene avslører dokumentasjon om hva de gjør, og fargeverdier blir prepended med små stifter for å vise deg hvordan de vises på skjermen. Kodeforslag når du skriver er også ekstremt grundig.

utvidelser

Kode> Innstillinger> Farge tema vil åpne opp (du gjettet det) fargetema paletten. Bla gjennom eksemplene, og du vil se brukergrensesnittets endring tilsvarende. Truffet Tast inn for å gjøre endringene permanent.

Utover standardtemaene er det også en stor markedsplass for andre (foreløpig gratis) eksempler, samt utvidelser av alle slag for å leke med.

Konklusjon

Det handler bare om å bryte opp noen av mine favorittfunksjoner i Visual Studio Code, det er nok å si at det er mange, mange flere funksjoner tilgjengelig for diskusjon. Når det gjelder min erfaring ved hjelp av VSC så langt, kan jeg bare si at det har vært positivt. Tidligere brukte jeg Atom, og jeg angrer ikke å gjøre bryteren en bit. Selvfølgelig kan du være uenig med meg, men i min personlige mening vil du ikke gå langt galt å laste ned og ta denne kodeditoren for en spinn.

nyttige lenker

  • Viktige utvidelser for Visual Studio Code av Craig Campbell
  • Last ned Visual Studio Code
  • Grunnleggende webdesign: Velge en tekstredigerer
  • Visual Studio Code Marketplace