8 Мощни разширения за Visual Studio Code за Front-End разработчици

Въпреки че Microsoft пусна първата стабилна версия на Visual Studio Code, неговият мощен редактор на кодове само преди няколко месеца, до март 2016 г., той вече разполага с много разширения, които могат да отнесат опита за кодиране към следващото ниво. Най- официални разширения на Visual Studio Code са хоствани в Visual Studio Code Marketplace, много от които могат да бъдат от голяма полза за уеб разработчиците.

За тази публикация изпробвах няколко разширения на VS код, свързани с разработката на предния край, и направих списък с тези, които намерих най-много интуитивен, лесен за използване и удобен. Това не е краен списък от всички. Отделете време да разгледате пазара за себе си и да видите какво още може да ви предложи, особено след като много големи разширения предстоят..

Как да инсталирате разширенията на VS код

Инсталирането на разширение е доста лесно в Visual Studio Code, както можете го направете в редактора на код. Във VS Code Marketplace всяко разширение има своя собствена страница и можете да намерите командата, на която можете да инсталирате даденото разширение в началото на тази страница.

Командата винаги започва с ext install термин. За да инсталирате разширение, просто Натиснете CTRL + P вътре в VS кода, за да стартирате панела за бързо отваряне, copy-paste тази команда в него и накрая рестартирайте редактора на код да извършат новата работа по разширяването.

8 Мощни разширения на Visual Studio Code

HTML фрагменти

Ако искате често да пишете HTML в Visual Studio Code, разширението на HTML Snippets може да се използва като удобен инструмент добавя сложна поддръжка за HTML. Въпреки че VS Code има основна поддръжка за HTML, като например оцветяване на синтаксис, разширението на HTML фрагментите знае много повече.

Вероятно най-полезната характеристика на това разширение е тази когато започнете да въвеждате името на HTML маркер (без началната ъглова скоба), HTML фрагменти бързо показва списък от наличните опции с кратка информация за всяка от тях.

Когато кликнете върху елемента, който ви трябва, HTML фрагментите добавят пълния HTML5 маркер с най-често срещаните му свойства. Например, ако искате да добавите връзка (anchor tag) към документа, просто напишете а в VS Code, изберете правилната опция в изскачащия прозорец, а HTML Snippets ще вмъкне необходимото откъсвам в редактора си без никакви проблеми.

Авторът на това разширение обръща внимание и на премахването на отхвърлените елементи, така че ако искате да използвате HTML маркер, който не можете да намерите в изскачащия списък, си струва да проверите дали все още е валиден или не.
Завършване на HTML CSS клас

HTML CSS Class Completion може да бъде полезно разширение, ако трябва да използвате много CSS класове във вашия проект. Често се случва на нас разработчиците, че сме не е напълно сигурен в точното име на класа, но тя просто седи в задната част на нашия ум като пасивно знание.

Това интелигентно разширение дава решение на този проблем, както и него извлича имената на всички CSS класове в текущото работно пространство и показва списък за тях.

Да речем, че искате да създадете сайт, използвайки Zurb Foundation, и искате да използвате малката мрежа. Не си спомняте как точно са наречени класовете, но знаете, че имат семантични имена.

С HTML CSS Class Completion трябва само да започнете да въвеждате думата малък, и наличните опции се появяват на екрана наведнъж, така че лесно можете да изберете този, който ви е необходим.
Преглед в браузъра

Преглед в браузъра е просто, но мощно разширение за Visual Studio Code. Тя може да улесни разработката от предния край, като ви позволява погледнете бързо резултатите от работата си в браузъра, докато кодирате. Можете да отворите HTML файла във вашия браузър по подразбиране директно от VS код, като натиснете бутона CTRL + F1 клавишна комбинация.

Имайте предвид, че Преглед в браузъра поддържа само HTML, така че ако искате да видите вашия сайт, трябва да имате отворен HTML файл. Ти не могат да имат пряк достъп до браузъра от CSS или JavaScript файл.
Debugger за Chrome

Debugger за Chrome е построен от самия Microsoft и в момента е четвъртото най-често изтегляно разширение на Visual Studio Code.

Debugger за Chrome прави възможно това отстраняване на грешки в JavaScript в Google Chrome, без да напускате редактора на код. Това означава, че не е необходимо да работите с прегледания JavaScript, който браузърът вижда, но можете изпълнява отстраняването на грешки от оригиналните оригинални файлове. Вижте тази демонстрация, за да видите как работи.

Разширяването има всяка функция, която трябва да е подходяща за дебъгер, като например настройка на прекъсване, наблюдение на променливи, стъпване, а удобна конзола за отстраняване на грешки, и много други (вижте списъка с функции на първото издание).

За да използвате това разширение, трябва да стартирате Chrome с дистанционното отстраняване на грешки е активирано, и създаде подходящо launch.json файл. Последното може да отнеме известно време, но можете да намерите подробни инструкции за GitHub как да го направите правилно.
JSHint

Разширението JSHint на Visual Studio Code интегрира популярния JSHint JavaScript linter в редактора на кодове, така че можете да бъдете информирани за грешките си веднага щом ги направите. По подразбиране разширението JSHint използва опциите по подразбиране на linter, които можете да персонализирате с помощта на конфигурационен файл.

Използването на това разширение е доста лесно, тъй като JSHint маркира грешките с червено, а уведомленията със зелено подчертаване. Ако искате повече информация за проблемите, просто задръжте курсора на мишката върху подчертаните части и JSHint ще пусне етикет с описанието на проблема наведнъж..
jQuery кодови фрагменти

Кодовите фрагменти на jQuery могат значително да ускорят разработката в Visual Studio Code, тъй като ви позволява бързо да пишете jQuery без основни синтактични грешки. jQuery кодови фрагменти в момента има около 130 налични фрагмента можете да извикате, като напишете десния спусък.

Всички откъси на jQuery, но едното започва с JQ префикс. Единственото изключение е функ задействам това вмъква анонимна функция в редактора.

Това удобно разширение е удобна помощ, когато не сте напълно сигурни в правилния синтаксис и искате да отделите време за проверка на документацията. Той също така улеснява бързото превъртане на наличните опции.
беседка

Разширяването на кода на Bower VS може да направи работния процес на уеб разработки по-интуитивен, като интегрира мениджъра на пакет Bower в кода на Visual Studio.

Ако поставите това разширение в употреба не трябва да превключвате между терминала и редактора, но можете лесно да изпълнявате вашите задачи за управление на пакети точно в Visual Studio Code.

Разширението Bower ви води през създаването на вашия проект bower.json файл, а също така можете да инсталирате, деинсталирате, търсите, актуализирате пакети, управлявате кеш и изпълнявате много други задачи с него (вижте пълния списък с функции).

Можеш достъп до командите, свързани с Bower, като стартирате командната палитра чрез натискане F1, типизиране “беседка” в лентата за въвеждане, като кликнете върху “беседка” в падащия списък, който се появява, и изберете съответната команда на Bower.
История на Git

Историята на Git прави възможно следвайте промените на проект Git в Visual Studio Code. Това разширение е особено полезно, когато искате да допринесете за по-голям проект на Github и нужда от начин за бърза проверка на модификациите, направени от други разработчици.

С инсталираното разширение на историята на Git можете преглед на историята на цял файл или определена линия вътре в нея. Можете също сравни предишните версии на същия файл.

Можете да получите достъп до командите, свързани с историята на Git, ако въведете думата “Git” в командната палитра (F1), избирам “Git” в падащия списък и накрая изберете командата, от която се нуждаете. Отбележи, че трябва да отворите файла от които искате да видите историята, преди да можете да извършите каквито и да е действия върху нея.