8 Galingi „Visual Studio“ kodo plėtiniai „Front-end Developers“

Nors „Microsoft“ išleido pirmąją stabilią „Visual Studio Code“ versiją, galingą kodo redaktorių tik prieš kelis mėnesius, iki 2016 m. Kovo mėn. Ji jau turi daug plėtinių, galinčių perkelti kodavimo patirtį į kitą lygį. The oficialūs „Visual Studio“ kodo plėtiniai yra talpinami „Visual Studio Code Marketplace“, kurių daugelis gali būti labai naudingi žiniatinklio kūrėjams.

Šiam įrašui aš išbandžiau VS kodo plėtinių, susijusių su „front-end“ plėtra, krūva, ir pateikiau sąrašą tų, kuriuos radau labiausiai intuityvi, paprasta naudoti ir patogi. Tai nėra galutinis sąrašas. Skirkite laiko, kad naršytumėt rinkoje, ir pažiūrėkite, ką dar galite jums pasiūlyti, ypač dėl to, kad dar yra daug puikių plėtinių.

Kaip įdiegti VS kodo plėtinius

„Visual Studio Code“, kaip jūs galite, įdiegti plėtinį yra gana paprasta tai padaryti kodų redaktoriuje. VS kodo rinkoje kiekvienas plėtinys turi savo puslapį, ir galite rasti komandą, kurią galite įdiegti nurodytame plėtinyje, šio puslapio viršuje.

Komanda visada prasideda ext install terminas. Norėdami įdiegti plėtinį, tiesiog paspauskite CTRL + P VS kodo viduje, kad paleistumėte greitojo atidarymo skydelį, nukopijuokite šią komandą į jį ir galiausiai iš naujo paleiskite kodo redaktorių atlikti naują pratęsimo darbą.

8 Galingi „Visual Studio“ kodo plėtiniai

1. HTML fragmentai

   Jei norite dažnai rašyti HTML „Visual Studio“ kode, HTML fragmentų plėtinys gali būti patogus įrankis prideda sudėtingą HTML palaikymą. Nors VS kodas turi pagrindinę HTML palaikymą, pvz., sintaksės spalvos, HTML fragmentų plėtinys žino daug daugiau.

   

   Tikriausiai naudingiausias šio plėtinio bruožas yra tai, kad kai pradėsite įvesti HTML žymą (be pradinio kampo laikiklio), HTML fragmentai greitai rodo sąrašą galimų parinkčių su trumpa informacija apie kiekvieną.

   

   Kai spustelėsite reikiamą elementą, HTML fragmentai prideda visą HTML5 žymą su labiausiai paplitusiomis savybėmis. Pvz., Jei norite pridėti nuorodą (inkaro žymę) prie dokumento, tiesiog įveskite a į VS kodą, iššokančiame lange pasirinkite tinkamą parinktį, o HTML fragmentai įterpia reikiamą fragmentą į redaktorių be jokių rūpesčių.

   Šio plėtinio autorius taip pat atkreipia dėmesį į pašalintų elementų pašalinimą, todėl, jei norite naudoti HTML žymę, kurios nerandate iššokančiame sąraše, verta patikrinti, ar jis vis dar galioja, ar ne.

2. HTML CSS klasės baigimas

   HTML CSS klasės baigimas gali būti naudingas pratęsimas, jei reikia naudoti daugelį CSS klasės jūsų projekte. Tai dažnai pasitaiko mums kūrėjams, kad esame nėra visiškai tikras, kad tiksliai klasės pavadinimas, bet jis tiesiog sėdi prie mūsų proto kaip pasyvios žinios.

   Šis protingas išplėtimas suteikia galimybę išspręsti šią problemą atsiunčia visų CSS klasių pavadinimus dabartinėje darbo vietoje ir rodomas sąrašas.

   

   Tarkime, jūs norite sukurti svetainę naudodami „Zurb Foundation“ ir norite naudoti mažą tinklelį. Jūs neprisimenate, kaip tiksliai pavadintos klasės, bet žinote, kad jie turi semantinius pavadinimus.

   Su „HTML CSS Class Completion“ reikia pradėti tik įvesti žodį mažas, ir ekrane rodomos galimos pasirinktys, todėl galite lengvai pasirinkti reikiamą.

   

3. Peržiūrėti naršyklėje

   Peržiūrėti naršyklėje yra paprastas, bet galingas „Visual Studio“ kodo išplėtimas. Tai gali palengvinti „front-end“ plėtrą, leidžiant jums koduodami peržiūrėkite savo darbo rezultatus naršyklėje. HTML failą galite atidaryti savo numatytąją naršyklę tiesiai iš VS kodo paspausdami CTRL + F1 spartusis klavišas.

   Atkreipkite dėmesį, kad peržiūra naršyklėje palaiko tik HTML, taigi, jei norite matyti savo svetainę, turite atidaryti HTML failą. Tu negali tiesiogiai pasiekti naršyklės iš CSS ar „JavaScript“ failo.

   

4. „Chrome“ derinimo priemonė

   „Chrome“ derinimo programą sukūrė pati „Microsoft“, o šiuo metu tai ketvirtas dažniausiai atsisiųsti „Visual Studio“ kodo plėtinys.

   „Chrome“ derinimo priemonė leidžia derinti „JavaScript“ „Google Chrome“ nepalikdami kodo redaktoriaus. Tai reiškia, kad jums nereikia dirbti su transpiluotu „JavaScript“, kurį mato naršyklė, bet jūs galite atlikite derinimo funkciją tiesiai nuo pradinių šaltinių failų. Peržiūrėkite šį demonstraciją, kad pamatytumėte, kaip jis veikia.

   

   Išplėtimas turi kiekvienos funkcijos tinkamas derinimo poreikius, pvz lūžio taško nustatymas, kintamasis stebėjimas, žingsnis, a patogus derinimo pultas, ir daugelis kitų (žr. pirmojo leidinio funkcijų sąrašą).

   Jei norite naudoti šį plėtinį, turite paleisti „Chrome“ įgalintas nuotolinis derinimas, ir sukurti tinkamą start.json failą. Pastarasis gali užtrukti tam tikrą laiką, tačiau galite rasti išsamią informaciją apie „GitHub“, kaip tai tinkamai atlikti.

5. JSHint

   „Visual Studio Code“ „JSHint“ plėtinys sujungia populiarų „JSHint JavaScript“ naršyklę tiesiai į kodų redaktorių, todėl galite informuoti apie savo klaidas, kai tik jūs juos prisiimate. Pagal numatytuosius nustatymus „JSHint“ plėtinys naudoja numatytasis linterio parinktis, kurias galite pritaikyti konfigūracijos failo pagalba.

   

   Šio plėtinio naudojimas yra gana paprastas, nes „JSHint“ žymi klaidas su raudona spalva, o pranešimai - su žalia spalva. Jei norite gauti daugiau informacijos apie problemas, tiesiog užveskite ant pabrauktų dalių ir JSHint iš karto pakels etiketę su problemos aprašymu.

   

6. jQuery kodo fragmentai

   „jQuery“ kodo fragmentai gali labai pagreitinti „Visual Studio“ kodo „front-end“ kūrimą, nes leidžia greitai rašyti „jQuery“ be pagrindinių sintaksės klaidų. jQuery kodo fragmentai šiuo metu yra aplink 130 galimų fragmentų galite kreiptis įvesdami tinkamą trigerį.

   

   Visi jQuery fragmentai, bet vienas prasideda jq priešdėlis. Viena išimtis yra funk tai sukelia į redaktorių įterpia anoniminę funkciją.

   Šis patogus plėtinys yra patogi pagalba, kai nesate visiškai tikri dėl tinkamos sintaksės, ir norite sutaupyti laiko dokumentams patikrinti. Taip pat lengva greitai pereiti prie turimų parinkčių.

   

7. Bower

   „Bower VS“ kodo plėtinys gali padaryti jūsų žiniatinklio kūrimo procesą intuityvesnį, integruojant „Bower“ paketo tvarkyklę į „Visual Studio“ kodą.

   Jei naudosite šį plėtinį nereikia persijungti tarp terminalo ir redaktoriaus, bet jūs galite lengvai atlikti paketų valdymo užduotis viduje Visual Studio Code.

   

   „Bower“ plėtinys veda jus per jūsų projekto kūrimą bower.json taip pat galite įdiegti, pašalinti, ieškoti, atnaujinti paketus, tvarkyti talpyklą ir atlikti daug kitų užduočių (žr. visą funkcijų sąrašą).

   Tu gali prieiti prie „Bower“ susijusių komandų paleidžiant komandų paletę paspausdami F1, spausdinimas “Bower” į įvesties juostą, spustelėdami “Bower” pasirodančiame išskleidžiamajame sąraše ir pasirinkus atitinkamą „Bower“ komandą.

   

8. „Git“ istorija

   „Git“ istorija leidžia sekite „Git“ projekto pakeitimus „Visual Studio“ kodo viduje. Šis plėtinys ypač naudingas, kai norite prisidėti prie didesnio „Github“ projekto ir reikia būdų, kaip greitai patikrinti kitus kūrėjus.

   Įdiegus „Git History“ plėtinį galite peržiūrėti istoriją iš viso failo arba a tam tikra linija viduje. Tu taip pat gali palyginti ankstesnes versijas tos pačios bylos.

   

   Jei įvedate žodį, galite pasiekti komandas, susijusias su „Git“ istorija “Git” į komandų paletę (F1), pasirinkite “Git” išskleidžiamajame sąraše ir galiausiai pasirinkite reikiamą komandą. Prisimink tai reikia atidaryti failą iš kurių norite matyti istoriją, kol galėsite atlikti bet kokius veiksmus.