8 Моћни Висуал Студио Цоде Ектенсионс за Фронт-Енд програмере

Иако је Мицрософт објавио прву стабилну верзију Висуал Студио Цодеа, његовог моћног едитора кода прије само неколико мјесеци, до ожујка 2016. године, већ има много доступних проширења која могу искористити искуство кодирања на сљедећи ниво. Тхе званичне Висуал Студио Цоде екстензије су смештене у Висуал Студио Цоде Маркетплаце, од којих многе могу бити од велике помоћи за веб програмере.

За овај пост сам тестирао гомилу проширења ВС кода који се односе на развој фронт-енд-а и направио листу оних које сам пронашао интуитиван, једноставан за употребу и практичан. То није крајњи списак свих. Узмите си времена да сами прегледате тржиште и видите шта вам још може понудити, поготово што многи велики наставци тек долазе.

Како инсталирати екстензије ВС кода

Инсталирање проширења је прилично једноставно у Висуал Студио Цоде, као што можете урадите то у уређивачу кода. У тржници ВС кодова свако проширење има своју страницу, а можете пронаћи наредбу коју можете инсталирати на екран на врху ове странице.

Команда увек почиње са ект инсталл термин. Да бисте инсталирали проширење, само притисните ЦТРЛ + П унутар ВС кода за покретање Куицк Опен панела, цопи-пасте ову наредбу и на крају поново покрените уређивач кода да ураде нови рад на проширењу.

8 Моћни Висуал Студио Цоде Ектенсионс

ХТМЛ Сниппетс

Ако желите да често пишете ХТМЛ у Висуал Студио Цоде, екстензија ХТМЛ исјечака може доћи као згодан алат додаје разрађену подршку за ХТМЛ. Иако ВС код има основну подршку за ХТМЛ, као што је синтак цолоринг, екстензија ХТМЛ исјечака зна много више.

Вероватно најкориснија карактеристика овог проширења је та када почнете да уносите име ХТМЛ ознаке (без почетне угаоне заграде), ХТМЛ исјечци брзо приказује листу доступних опција са кратким информацијама о свакој од њих.

Када кликнете на елемент који вам је потребан, ХТМЛ исјечци додају пуни ХТМЛ5 таг са својим најчешћим својствима. На пример, ако желите да додате линк (анцхор таг) вашем документу, само откуцајте а у ВС код, одаберите одговарајућу опцију у искачућем прозору, а ХТМЛ исјечци ће уметнути неопходно у исјечак без икаквих проблема.

Аутор овог проширења такође посвећује пажњу уклањању застарелих елемената, тако да ако желите да користите ХТМЛ ознаку коју не можете да пронађете у искачућој листи, вреди проверити да ли је она још увек важећа или не.
ХТМЛ ЦСС Цласс Цомплетион

ХТМЛ ЦСС Цласс Цомплетион може бити корисна екстензија ако требате користити много ЦСС класе у вашем пројекту. Често се дешава код нас девелопера, да јесмо није потпуно сигуран у тачно име класе, али он само седи иза нашег ума као пасивно знање.

Ово паметно проширење даје решење за овај проблем, као и он добија имена свих ЦСС класа у тренутном радном простору и приказује листу о њима.

Рецимо, желите да направите сајт користећи Зурб фондацију и желите да користите малу мрежу. Не сећате се како су класе тачно именоване, али знате да имају семантичка имена.

Са ХТМЛ ЦСС Цласс Цомплетион-ом потребно је само да почнете да куцате реч мали, и доступне опције се појављују на екрану одједном, тако да можете лако одабрати онај који вам је потребан.
Приказ у претраживачу

Приказ у претраживачу је једноставан, али моћан наставак за Висуал Студио Цоде. То може олакшати развој фронт-енд-а допуштајући вам да то учините имати брзи преглед резултата вашег рада у претраживачу док кодирате. ХТМЛ датотеку можете отворити у подразумеваном претраживачу директно из ВС кода притиском на тастер ЦТРЛ + Ф1 пречица на тастатури.

Обратите пажњу на то у прегледачу подржава само ХТМЛ, тако да ако желите да видите ваш сајт, морате имати отворену ХТМЛ датотеку. ти не може директно да приступи претраживачу из ЦСС или ЈаваСцрипт датотеке.
Дебуггер фор Цхроме

Дебуггер за Цхроме изграђен је од стране Мицрософта, и тренутно је четврти најчешће преузимани Висуал Студио Цоде.

Дебуггер за Цхроме омогућава дебуг ЈаваСцрипт у Гоогле Цхроме-у без напуштања уређивача кода. То значи да не морате да радите са транспилед ЈаваСцриптом који прегледач види, али можете извршите исправљање грешака из оригиналних изворних датотека. Погледајте овај демо да бисте видели како функционише.

Проширење има све карактеристике које су потребне за исправан дебагер, као што је подешавање прекидне тачке, проматрање варијабли, корачање, а ханди дебуг цонсоле, и многе друге (погледајте листу карактеристика првог издања).

Да бисте користили ово проширење, морате да покренете Цхроме са омогућено је даљинско отклањање грешака, и поставите одговарајуће лаунцх.јсон филе. Ово последње може потрајати неко време, али можете наћи детаљне инструкције о томе како да правилно урадите ГитХуб.
ЈСХинт

Проширење ЈСХинт Висуал Студио Цоде интегрише популарни ЈСХинт ЈаваСцрипт линтер директно у едитор кода, тако да можете будите информисани о својим грешкама чим их почините. Подразумевано, проширење ЈСХинт користи подразумеване опције линтера које можете да прилагодите помоћу конфигурационе датотеке.

Употреба овог проширења је прилично јасна, јер ЈСХинт означава грешке црвеном бојом, а обавештења зеленом подцртавањем. Ако желите више информација о проблемима, само лебдите изнад подвучених делова, а ЈСХинт ће одмах приказати ознаку са описом проблема..
јКуери Кодни исечци

јКуери кодни исјечци могу увелике убрзати развој фронт-енд програма у Висуал Студио коду, јер вам омогућује брзо писање јКуери без основних синтаксних грешака. јКуери Кодни исечци тренутно има око 130 доступних исјечака можете позвати уписивањем десног окидача.

Сви јКуери исјечци, али један почиње са јк префикс. Једини изузетак је фунц активирајте то уноси анонимну функцију у едитор.

Ово практично проширење је згодна помоћ када нисте потпуно сигурни у одговарајућу синтаксу и желите да уштедите време да проверите документацију. Такође олакшава брзо кретање кроз доступне опције.
Бовер

Проширење Бовер ВС кода може да учини ваш рад на веб развоју интуитивнијим тако што ћете интегрисати менаџер Бовер пакета у Висуал Студио Цоде.

Ако ставите ово проширење на вас не морате да се пребацујете између терминала и уредника, али можете лако извршити задатке управљања пакетима унутар Висуал Студио кода.

Проширење Бовер вас води кроз креирање вашег пројекта бовер.јсон датотека, а такође можете да инсталирате, деинсталирате, претражујете, ажурирате пакете, управљате кешом и извршавате многе друге задатке са њим (погледајте комплетну листу функција).

Можете приступите командама које се односе на Бовер покретањем командне палете притиском на Ф1, типинг “Бовер” у траку за унос, кликом на “Бовер” у падајућој листи која се појављује и бира одговарајућу команду Бовер.
Гит Хистори

Историја Гит-а омогућава пратите промене Гит пројекта унутар Висуал Студио Цоде. Ово проширење је посебно корисно када желите да допринесете већем Гитхуб пројекту, и потребан је начин да брзо проверите модификације које су други програмери направили.

Са инсталираним додатком Гит Хистори можете погледајте историју целог фајла, или а одређену линију унутра. Можете такође упоредите претходне верзије исте датотеке.

Можете приступити командама које се односе на историју Гит ако упишете реч “Гит” у палету команди (Ф1), изаберите “Гит” у падајућој листи и коначно одаберите команду која вам је потребна. Напоменути да морате отворити датотеку од којих желите да видите историју пре него што можете да извршите било коју радњу на њој.