8 Jaudīgi Visual Studio koda paplašinājumi priekšgala izstrādātājiem

Kaut arī Microsoft izlaida pirmo stabilu Visual Studio koda versiju, tās jaudīgo kodu redaktoru tikai pirms dažiem mēnešiem, līdz 2016. gada martam, tam jau ir pieejami daudzi paplašinājumi, kas var uzņemt kodēšanas pieredzi uz nākamo līmeni. The oficiālie Visual Studio koda paplašinājumi ir izvietoti Visual Studio Code Marketplace, no kuriem daudzi var būt noderīgi tīmekļa izstrādātājiem.

Šim ziņojumam es pārbaudīju virkni VS koda paplašinājumu, kas saistīti ar front-end izstrādi, un izveidoju sarakstu ar tiem, kurus atradu visvairāk intuitīvs, viegli lietojams un ērts. Tas nav vissvarīgākais saraksts. Paveiciet laiku, lai pārlūkotu tirgu sev un redzētu, ko vēl var jums piedāvāt, jo īpaši tāpēc, ka vēl ir daudz lielisku paplašinājumu..

Kā uzstādīt VS kodu paplašinājumus

Paplašinājuma instalēšana Visual Studio kodā ir diezgan vienkārša, kā jūs varat darīt to koda redaktorā. VS koda tirgus laukumā katram paplašinājumam ir sava lapa, un jūs varat atrast komandu, kurā varat instalēt konkrēto paplašinājumu šīs lapas augšpusē.

Komanda vienmēr sākas ar ext instalēt termiņā. Lai instalētu paplašinājumu, vienkārši nospiediet CTRL + P iekšpusē VS kods, lai sāktu ātrās atvēršanas paneli, kopējiet šo komandu un beidzot restartējiet koda redaktoru veikt jaunu paplašinājumu.

8 Jaudīgi Visual Studio koda paplašinājumi

1. HTML fragmenti

   Ja jūs vēlaties bieži rakstīt HTML Visual Studio kodā, HTML fragmentu paplašinājums var būt parocīgs rīks, kā tas ir pievieno sarežģītu HTML atbalstu. Lai gan VS kodam ir pamata HTML atbalsts, piemēram, sintakse, HTML fragmentu paplašinājums zina daudz vairāk.

   

   Iespējams, šī paplašinājuma noderīgākā iezīme ir tā kad sākat ievadīt HTML taga nosaukumu (bez sākuma leņķa kronšteina), HTML fragmenti ātri parāda sarakstu pieejamo opciju īsu informāciju par katru.

   

   Noklikšķinot uz vajadzīgā elementa, HTML fragmenti pievieno pilnu HTML5 tagu ar visbiežāk lietotajām īpašībām. Piemēram, ja vēlaties pievienot dokumentam saiti (enkura tagu), ierakstiet tikai a Ievietojiet VS kodu, uznirstošajā lodziņā izvēlieties pareizo opciju un HTML fragmenti ievietos nepieciešamo redaktora fragmentu bez problēmu.

   Šī paplašinājuma autors arī pievērš uzmanību novecojušo elementu noņemšanai, tādēļ, ja vēlaties izmantot HTML tagu, ko nevar atrast uznirstošajā sarakstā, ir vērts pārbaudīt, vai tas joprojām ir derīgs vai nav.

2. HTML CSS klases pabeigšana

   HTML CSS klases pabeigšana var būt noderīgs paplašinājums, ja nepieciešams izmantot daudzus CSS klases jūsu projektā. Tas bieži notiek ar mums izstrādātājiem, ka mēs esam nav pilnīgi pārliecināts par precīzu klases nosaukumu, bet tā vienkārši sēž pie mūsu prāta kā pasīvās zināšanas.

   Šis viedais paplašinājums sniedz risinājumu šai problēmai ielādē visu CSS klašu nosaukumus pašreizējā darbvietā un parāda to sarakstu.

   

   Pieņemsim, ka jūs vēlaties izveidot vietni, izmantojot Zurb Foundation, un vēlaties izmantot mazo tīklu. Jūs neatceraties, kā klases ir tieši nosauktas, bet jūs zināt, ka tām ir semantiski nosaukumi.

   Ar HTML CSS klases pabeigšanu jums tikai jāsāk rakstīt vārdu mazs, un displejā uzreiz parādās pieejamās opcijas, lai jūs varētu viegli izvēlēties vajadzīgo.

   

3. Skatīt pārlūkprogrammā

   Skats pārlūkprogrammā ir vienkāršs, bet spēcīgs Visual Studio koda paplašinājums. Tas var atvieglot priekšgala attīstību, ļaujot jums kodēšanas laikā ātri apskatiet sava darba rezultātus pārlūkprogrammā. HTML failu var atvērt noklusējuma pārlūkprogrammā tieši no VS koda, nospiežot CTRL + F1 īsceļu.

   Ņemiet vērā, ka skatījums pārlūkprogrammā atbalsta tikai HTML, tādēļ, ja vēlaties redzēt jūsu vietni, jums ir nepieciešams atvērt HTML failu. Jūs nevar tieši piekļūt pārlūkprogrammai no CSS vai JavaScript faila.

   

4. Pārlūkprogramma Chrome

   Debugger for Chrome tika uzbūvēts pats Microsoft, un tas pašlaik ir 4. visbiežāk lejupielādētais Visual Studio koda paplašinājums.

   Debugger for Chrome ļauj atkļūdot JavaScript Google Chrome, neatstājot kodu redaktoru. Tas nozīmē, ka jums nav jāstrādā ar pārlūkprogrammas redzamo transkripto JavaScript, bet jūs varat veikt atkļūdošanu tieši no sākotnējiem avota failiem. Skatiet šo demonstrāciju, lai redzētu, kā tas darbojas.

   

   Paplašinājumam ir katrai iezīmei atbilstošas ​​atkļūdotāju vajadzības, piemēram, pārtraukuma punkta iestatīšana, mainīga skatīšanās, pastiprināšana, a ērts atkļūdošanas konsole, un daudzi citi (skatiet pirmās versijas funkciju sarakstu).

   Lai izmantotu šo paplašinājumu, jāaktivizē pārlūks Chrome iespējota attālā atkļūdošana, un izveidot pareizu start.json failu. Pēdējais var aizņemt kādu laiku, bet jūs varat atrast detalizētus norādījumus par GitHub par to, kā pareizi to izdarīt.

5. JSHint

   Visual Studio Code JSHint paplašinājums integrē populāro JSHint JavaScript linteri tieši koda redaktorā, lai jūs varētu informējiet par savām kļūdām, tiklīdz jūs to izdarīsiet. Pēc noklusējuma paplašinājums JSHint izmanto linter noklusējuma opcijas, kuras varat pielāgot, izmantojot konfigurācijas failu.

   

   Šī paplašinājuma izmantošana ir diezgan vienkārša, jo JSHint atzīmē kļūdas ar sarkanu un paziņojumus ar zaļu pasvītrojumu. Ja vēlaties iegūt vairāk informācijas par jautājumiem, vienkārši virziet virs pasvītrotajām daļām, un JSHint uzlīmēs etiķeti ar problēmas aprakstu uzreiz.

   

6. jQuery koda fragmenti

   jQuery koda fragmenti var ievērojami paātrināt priekšējā gala izstrādi Visual Studio kodā, jo tas ļauj ātri rakstīt jQuery bez pamata sintakses kļūdām. jQuery koda fragmenti pašlaik ir aptuveni 130 pieejamie fragmenti jūs varat atsaukties, ierakstot pareizo sprūdu.

   

   Visi jQuery fragmenti, bet viens sākas ar jq priedēklis. Viens izņēmums ir funkcion to izraisa redaktorā ievieto anonīmu funkciju.

   Šis ērts paplašinājums ir ērts palīgs, ja neesat pilnīgi pārliecināts par pareizo sintaksi un vēlaties ietaupīt laiku, lai pārbaudītu dokumentāciju. Tas arī atvieglo ātru ritināšanu, izmantojot pieejamās iespējas.

   

7. Bower

   Bower VS koda paplašinājums var padarīt jūsu tīmekļa izstrādes darbplūsmu intuitīvāku, integrējot Bower pakotnes pārvaldnieku programmā Visual Studio Code.

   Ja šo paplašinājumu izmantojat jums nav jāpārslēdzas starp termināli un redaktoru, bet jūs varat viegli veikt paketes pārvaldības uzdevumus tieši Visual Studio kodā.

   

   Bower paplašinājums ved jūs caur sava projekta izveidi bower.json varat instalēt, atinstalēt, meklēt, atjaunināt pakotnes, pārvaldīt kešatmiņu un veikt daudzus citus uzdevumus (skat. pilnu funkciju sarakstu).

   Jūs varat piekļūstiet ar Bower saistītām komandām, startējot komandu paleti nospiežot F1, rakstīt “Bower” ievades joslā, noklikšķinot uz “Bower” opcija nolaižamajā sarakstā, un izvēloties atbilstošo komandu Bower.

   

8. Gita vēsture

   Git vēsture ļauj sekojiet Git projekta izmaiņām Visual Studio kodā. Šis paplašinājums ir īpaši noderīgs, ja vēlaties veicināt lielāku Github projektu, un ir nepieciešams veids, kā ātri pārbaudīt citus izstrādātājus.

   Varat instalēt paplašinājumu Git History apskatīt vēsturi no visa faila vai a konkrētā līnija iekšpusē. Jūs varat arī salīdzināt iepriekšējās versijas no tā paša faila.

   

   Ja ievadāt vārdu, varat piekļūt komandām, kas saistītas ar Git vēsturi “Git” komandu paletē (F1), izvēlieties “Git” nolaižamajā sarakstā un beidzot izvēlieties vajadzīgo komandu. Pieraksti to jums ir nepieciešams atvērt failu kuru jūs vēlaties redzēt vēsturi, pirms varat veikt jebkādas darbības.