Codul Visual Studio Editorul meu nou de cod preferat

În acest videoclip vă voi prezenta noul editor de cod preferat: Visual Studio Code. Visual Studio este un produs Microsoft, care poate fi o surpriză pentru mulți dintre dvs., dar pune preconcepțiile dvs. deoparte pentru un moment și alăturați-vă cum vă arăt.

Codul Visual Studio

 

De-a lungul anilor am folosit o serie de editori de cod diferit; TextMate, Coda, Sublime Text, Atom, și fiecare a avut argumentele pro și contra. Visual Studio Code, cu toate acestea, este absolut meu preferat până acum, așa că haideți să aruncăm o privire la unele dintre caracteristicile sale.

Începeți prin a descărca versiunea pentru sistemul dvs. (Windows, Mac OS, Linux) la code.visualstudio.com (este gratuit).

UI

Unul dintre motivele pentru care îmi place codul Visual Studio este interfața; este foarte simplu.

Are câteva laterale, care pot fi poziționate la stânga sau la dreapta în funcție de preferințele dvs. Prima vă oferă câteva pictograme pentru a comuta între panouri. Alegeți dintre Explorer, Căutare, Git, Debug și Extensii. Accesați Vizualizare pentru a schimba tipul de afișare (ecran complet, modul zen etc.)

Plasarea cu mouse-ul peste dosarele din Explorer ne oferă câteva opțiuni: Fișier nou, Folder nou, Reîmprospătare și Reducere totală. Faceți clic dreapta și aduce un meniu contextual.

Comandă Paletă

Lovit Shift-Command-P să aducă paleta de comandă.

În acest panou puteți căuta orice doriți pentru o acțiune rapidă și ușoară; Comenzile Git, schimbarea temelor, instalarea extensiilor - toate pot fi realizate prin Paleta de Comenzi.

asemănător, Command-P va ridica Du-te la dosar ... paletă.

Terminal

Deținere Comanda-' va deschide terminalul încorporat, pe care l dragoste.

Aceasta deschide terminalul direct în rădăcina proiectului dvs., evitând astfel navigarea. Dând clic pe + pictograma deschide mai multe ferestre ale terminalelor care pot fi comutate între utilizarea meniului derulant. Toate acestea adaugă o caracteristică foarte utilă, mai ales dacă folosiți compilatoare atunci când codificați.

git

O altă trăsătură pe care o cunosc este integrarea Git. Modificările pe care le faceți în fișierele dvs. sunt evidențiate în diverse locuri, astfel încât să știți exact ce se întâmplă:

În figura de mai sus puteți vedea notificarea barei laterale care mi-a spus despre o schimbare necondiționată, despre schimbarea afișată în panoul Git și o evidențiere a liniei pentru a-mi arăta unde este schimbarea în fișierul în sine.

VSC va afișa, de asemenea, comparații de versiuni unul lângă altul, doar pentru o mai mare claritate.

Alte comenzi Git standard, cum ar fi sincronizarea, tragerea și așa mai departe, sunt disponibile din panoul Git.

Emmet (Zen Coding)

Vestea cea mare: Emmet este deja construit în VSC. Nu este necesară configurarea sau configurarea, puteți începe să o utilizați (cu Tab fiind fierbinte predefinită pentru a declanșa fragmentele dvs.) de îndată ce deschideți editorul pentru prima dată.

Multi cursori

Când evidențiați o bucată de cod în fișierul dvs., VSC va evidenția automat toate celelalte apariții ale șirului respectiv. Puteți lovi apoi Command-D pentru a adăuga un alt cursor la următoarea instanță sau Shift-Command-L pentru a adăuga un cursor la toate instanțele. Editarea în masă, cu ușurință.

Setări

Pagina de setări din VSC este foarte intuitivă. Ca text sublim, setările sunt stocate într-un fișier (JSON în acest caz), care vă permite să răsfoiți toate valorile implicite. Prin lovirea Editați | × pictograma de lângă fiecare setare, o veți copia într-un fișier personalizat în care puteți efectua modificări:

Lovit Salvați și văd că schimbările au efect imediat.

IntelliSense

IntelliSense este o caracteristică în cadrul VSC pe care am fost foarte dornică să o încerc de îndată ce am deschis pentru prima oară editorul. Este un super-încărcat de auto-finalizare, sintaxă-subliniind asistent și merge puțin mai mult decât v-ați aștepta acest tip de caracteristică pentru a merge.

Plasarea cursorului peste selectorii CSS vă va oferi un exemplu despre modul în care puteți utiliza codul HTML corespunzător (foarte util pentru începători):

Plasarea cursorului peste proprietăți dezvăluie documentația despre ceea ce fac și valorile culorilor sunt prefixate cu mici mărimi pentru a vă arăta cum apar pe ecran. Sugestiile de cod atunci când tastați sunt extrem de amănunțite.

Extensii

Cod> Preferințe> Temă culori se va deschide (ați ghicit-o) paleta de teme pentru culori. Derulați prin exemple și veți vedea modificarea UI în consecință. Lovit introduce pentru a face aceste schimbări permanente.

Dincolo de temele implicite, există și o piață uriașă a altor exemple (în prezent gratuite) disponibile, plus extensii de tot felul pentru a juca cu.

Concluzie

Asta inseamna ca imi incalzeste cateva dintre caracteristicile mele preferate in Visual Studio Code, insa este suficient sa spun ca sunt multe, multe alte caracteristici disponibile pentru discutie. În ceea ce privește experiența mea utilizând VSC până acum, pot spune doar că a fost pozitiv. Anterior, am folosit Atom și nu regret să fac un comutator un pic. Desigur, puteți să fiți în dezacord cu mine, dar în opinia mea personală, nu veți merge prea greșit să descărcați și să luați acest editor de cod pentru o rotire.

Link-uri utile

  • Extensii esențiale pentru Visual Studio Code de Craig Campbell
  • Descărcați codul Visual Studio
  • Bazele de web design: Alegerea unui editor de text
  • Visual Studio Code Marketplace