8 Snažna proširenja Visual Studio koda za razvojne inženjere s prednje strane

Iako je Microsoft objavio prvu stabilnu verziju Visual Studio Codea, njegovog moćnog editora koda prije samo nekoliko mjeseci, do ožujka 2016., već ima na raspolaganju mnoga proširenja koja mogu doživjeti kodiranje na višu razinu. službene Visual Studio Code ekstenzije su smještene u Visual Studio Code Marketplaceu, od kojih mnoge mogu biti od velike pomoći za web-programere.

Za ovaj post sam testirao hrpu proširenja VS koda u vezi s front-end razvojem i napravio popis onih koje sam pronašao intuitivan, jednostavan za korištenje i praktičan. To nije konačan popis svih. Uzmite si vremena da sami pregledate tržište i vidite što vam još može ponuditi, pogotovo zato što mnoga velika proširenja tek dolaze.

Kako instalirati ekstenzije VS koda

Instaliranje proširenja je prilično jednostavno u Visual Studio Codeu, kao što možete učinite to u uređivaču koda. U tržnici VS kodova svako proširenje ima svoju stranicu, a naredbu koju možete instalirati možete navesti na vrhu ove stranice..

Naredba uvijek počinje s ext install termin. Da biste instalirali proširenje, samo tisak Ctrl + P unutar VS koda za pokretanje ploče za brzo otvaranje, copy-paste ovu naredbu i konačno ponovno pokrenite uređivač koda napraviti novi rad na proširenju.

8 Moćna proširenja koda Visual Studio

HTML isječci

Ako želite često pisati HTML u Visual Studio Code, ekstenzija HTML isječaka može doći kao zgodan alat dodaje razrađenu podršku za HTML. Iako VS kod ima osnovnu podršku za HTML, kao što je bojanje sintakse, proširenje HTML isječaka zna mnogo više.

Vjerojatno je najkorisnija značajka tog proširenja to kada počnete upisivati naziv HTML oznake (bez početne kutne zagrade), HTML isječci brzo prikazuje popis dostupnih opcija s kratkim informacijama o svakoj od njih.

Kada kliknete na element koji vam je potreban, HTML isječci dodaju punu HTML5 oznaku s najčešćim svojstvima. Na primjer, ako želite dodati vezu (oznaku sidra) u dokument, samo upišite u VS kod, odaberite pravu opciju u skočnom prozoru, a HTML isječci će umetnuti potrebno isječak u uređivač bez ikakvih problema.

Autor ovog proširenja također posvećuje pozornost uklanjanju zastarjelih elemenata, tako da ako želite koristiti HTML oznaku koju ne možete pronaći na skočnom popisu, vrijedi provjeriti je li još uvijek valjana ili ne.
HTML CSS završetak razreda

HTML CSS Class Completion može biti korisna ekstenzija ako trebate koristiti mnoge CSS klase u vašem projektu. Često se dešava nama programerima da jesmo nije potpuno siguran u točan naziv razreda, ali on samo sjedi iza našeg uma kao pasivno znanje.

Ovo pametno proširenje daje rješenje za ovaj problem, kao i on dohvaća imena svih CSS klasa u trenutnom radnom prostoru i prikazuje popis o njima.

Recimo, želite stvoriti web-lokaciju pomoću Zaklade Zurb i želite koristiti malu mrežu. Ne sjećate se kako su klase točno imenovane, ali znate da imaju semantička imena.

S HTML CSS Class Completion trebate samo početi pisati riječ mali, i dostupne opcije pojavljuju se na zaslonu odjednom, tako da možete jednostavno odabrati onaj koji vam je potreban.
Prikaz u pregledniku

Pregled u pregledniku je jednostavna, ali moćna ekstenzija za Visual Studio Code. To može olakšati razvoj front-end, omogućujući vam da to učinite imati brzi pregled rezultata vašeg rada u pregledniku tijekom kodiranja. HTML datoteku možete otvoriti u zadanom pregledniku izravno iz VS koda pritiskom na gumb CTRL + F1 tipkovnički prečac.

Imajte na umu da je prikaz u pregledniku podržava samo HTML, tako da ako želite vidjeti svoju web-lokaciju, morate otvoriti HTML datoteku. Vas ne može izravno pristupiti pregledniku iz CSS ili JavaScript datoteke.
Debugger za Chrome

Program za ispravljanje pogrešaka za Chrome izradio je sam Microsoft, a trenutačno je četvrti najčešći dodatak za Visual Studio Code.

Debugger za Chrome omogućuje to debug JavaScript u Google Chromeu bez napuštanja uređivača koda. To znači da ne morate raditi s pregledanim JavaScriptom koji preglednik vidi, ali možete izvršite ispravljanje pogrešaka iz izvornih izvornih datoteka. Pogledajte ovaj demo da biste vidjeli kako funkcionira.

Proširenje ima sve značajke pristojne potrebe za pronalaženje pogrešaka, kao što su postavljanje prekidne točke, promatranje varijabli, koračanje, praktična debug konzola, i mnogi drugi (pogledajte popis značajki prvog izdanja).

Da biste koristili ovo proširenje, pokrenite Chrome s omogućeno je daljinsko otkrivanje pogrešaka, i postavite pravi launch.json datoteka. Ovo potonje može potrajati neko vrijeme, ali možete pronaći detaljne upute o tome kako pravilno to učiniti.
JSHint

JSHint proširenje Visual Studio Code integrira popularni JSHint JavaScript linter izravno u uređivač koda, tako da možete biti obaviješteni o svojim pogreškama čim ih počinite. Prema zadanim postavkama, JSHint proširenje koristi zadane opcije lintera koje možete prilagoditi pomoću konfiguracijske datoteke.

Korištenje ovog proširenja je prilično jednostavno, jer JSHint označava pogreške crvenom bojom, a obavijesti zelenom podcrtavanjem. Ako želite više informacija o problemima, samo lebdite iznad podcrtanih dijelova, a JSHint će istodobno prikazati oznaku s opisom problema..
jQuery Kodni isječci

jQuery kodni isječci mogu uvelike ubrzati razvoj front-end programa u Visual Studio Codeu, jer vam omogućuje brzo pisanje jQuery bez osnovnih sintaksnih pogrešaka. jQuery Kodni isječci trenutno ima oko 130 dostupnih isječaka možete pozvati upisivanjem desnog okidača.

Svi jQuery isječci, ali jedan počinje s JQ prefiks. Jedina iznimka je funk aktivirajte to unosi anonimnu funkciju u urednik.

Ovo praktično proširenje prikladna je pomoć kada niste potpuno sigurni u odgovarajuću sintaksu i želite uštedjeti vrijeme za provjeru dokumentacije. Također olakšava brzo pomicanje kroz dostupne opcije.
Sjenica

Proširenje Bower VS koda može učiniti vaš radni tijek web-intuitivnijim integriranjem upravitelja Bower paketa u Visual Studio Code.

Ako stavite ovo proširenje na vas ne morate se prebacivati između terminala i urednika, ali možete jednostavno izvršiti zadatke upravljanja paketima unutar Visual Studio Code.

Proširenje Bower vodi vas kroz stvaranje vašeg projekta bower.json datoteku, a također možete instalirati, deinstalirati, pretraživati, ažurirati pakete, upravljati predmemorijom i izvršavati mnoge druge zadatke s njom (pogledajte popis svih značajki).

Možeš pristupite naredbama koje se odnose na Bower pokretanjem palete naredbi pritiskom na F1, kucanje “Sjenica” u traku za unos, klikom na “Sjenica” na padajućem popisu koji se pojavljuje i odabirom odgovarajuće naredbe Bower.
Povijest Git-a

Git Povijest omogućuje slijedite promjene Git projekta unutar Visual Studio Code. Ovo proširenje je posebno korisno kada želite doprinijeti većem Github projektu, i trebate način da brzo provjerite izmjene koje su drugi programeri napravili.

Sa instaliranim proširenjem povijesti Git možete pogledajte povijest cijele datoteke ili određenu liniju unutar njega. Također možete usporedite prethodne verzije iste datoteke.

Možete pristupiti naredbama koje se odnose na Git povijest ako upišete riječ “Git” u paletu naredbi (F1), odaberite “Git” unutar padajućeg popisa i konačno odaberite naredbu koja vam je potrebna. Zapamtite to trebate otvoriti datoteku od kojih želite vidjeti povijest prije nego što možete izvršiti bilo koju radnju na njoj.