Хей, имам нещо специално за теб!

Попълни имейл адрес, на който до минута ще получиш обещаното ;)
В тази статия/урок на {dev} blondie; реших да ти споделя за моите топ 5 разширения (или extensions) за Visual Studio Code, които използвам и правят процесите по разработка по-лесни и по-бързи.
Бележка: всички разширения са безплатни и можеш да ги инсталираш директно от Extensions панела на VSCode.
Няма как да не започна с най-предпочитаното и може би първото инсталирано разширение от всеки разработчик, а именно Live Server.
Това разширение стартира локален сървър на твоята машина и презарежда проекта, над който работиш, без значение дали е статичен или динамичен.
Всеки път, когато запазиш даден файл, сървърът ще презареди и ще видиш промените си отразени директно в браузъра.
Това ускорява процесът по разработване, а и ти дава възможност да забележиш bug или несъответствие своевременно.
Виж повече тук: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
В програмирането има стандарти за всичко! Един от тях е лесно четимият и бърз за ориентиране код.
Това е особено важно, когато над един проект работят повече от един разработчик, тъй като спазването на консистентност и добро форматиране на кода между членовете на екипа е от голяма важност.
Както се досещаш, невъзможно е това да се прави ръчно и да се спазва от всеки един разработчик. Затова на помощ идва Prettier.
Prettier е мощно разширение, което автоматизира този процес от край до край. Разширението подсигурява доброто форматиране на кода автоматично, а ако имаш по-специфични нужди – може да го настроиш така, че да работи за теб.
Поддържа не просто HTML, CSS и JavaScript, но и библиотеки и frameworks като Angular, React, Vue, Svelte и TypeScript.
Виж повече тук: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Представи си, че имаш HTML контейнер, в него имаш два елемента, във всеки тях по още два и така нататък и така нататък…
А сега си представи, че трябва да добавиш един <p> на определено място и не успяваш да се ориентираш къде…
Тук на помощ идва един от любимите ми extension-и, а именно Indent Rainbow.
Indent Rainbow е цветно разширение, което използваме, за да направим отстъпите разбираеми, коеот пък помага да поддържаме добре организиран и правилно структуриран код.
Всеки отстъп е маркиран с различен цвят, като се редуват 4 различни такива.
Най-приятната част е, че можеш да персонализираш тези 4 цвята.
Виж повече тук: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Случвало ли ти се е да имаш <p>
елемент и в даден момент да решиш, че искаш да е <span>
? Променяш отварящия таг, но както знаем, над 90% от HTML таговете имат и затварящ такъв.
За да си сигурен, че винаги щом промениш таг, то той ще бъде актуализиран и в отварящата, и в затварящата си част, на помощ идва Auto Rename Tag.
Тук положението е straight forward и няма какво да ти разяснявам, просто променяш отварящия таг и затварящия се актуализира автоматично.
Виж повече тук: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
И говорейки за тагове, няма как да пропусна другото ми любимо разширение, що се отнася до продуктивност, а именно Auto Close Tag.
Разширението добавя съответстващия затварящ таг веднага, щом въведеш затварящата скоба </
По този начин няма да се притесняваш, че някой div
някъде е останал незатворен и ти „чупи“ целия markup надолу по страницата 😉
Виж повече тук: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
С това списъка от полезни разширения за Visual Studio Code изобщо не се изчерпва, но пък тези 5 са гарантирано доказани за повишаване на продуктивността 🙂