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

5 грешки, които допускаш по време на интервю

Попълни имейл адрес, на който до минута ще получиш обещаното ;)

пет разширения за Visual Studio Code

5 Visual Studio Code разширения за продуктивност

Представям ти 5 Visual Studio Code разширения, които ще подобрят продуктивността ти и ще направят...

В тази статия/урок на {dev} blondie; реших да ти споделя за моите топ 5 разширения (или extensions) за Visual Studio Code, които използвам и правят процесите по разработка по-лесни и по-бързи.

Бележка: всички разширения са безплатни и можеш да ги инсталираш директно от Extensions панела на VSCode.

1. Live Server

Няма как да не започна с най-предпочитаното и може би първото инсталирано разширение от всеки разработчик, а именно Live Server.

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

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

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

Live Server for Visual Studio Code

Виж повече тук: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Prettier

В програмирането има стандарти за всичко! Един от тях е лесно четимият и бърз за ориентиране код.

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

Както се досещаш, невъзможно е това да се прави ръчно и да се спазва от всеки един разработчик. Затова на помощ идва Prettier.

Prettier е мощно разширение, което автоматизира този процес от край до край. Разширението подсигурява доброто форматиране на кода автоматично, а ако имаш по-специфични нужди – може да го настроиш така, че да работи за теб.

Поддържа не просто HTML, CSS и JavaScript, но и библиотеки и frameworks като Angular, React, Vue, Svelte и TypeScript.

Prettier extension for Visual Studio Code

Виж повече тук: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

3. Indent Rainbow

Представи си, че имаш HTML контейнер, в него имаш два елемента, във всеки тях по още два и така нататък и така нататък…

А сега си представи, че трябва да добавиш един <p> на определено място и не успяваш да се ориентираш къде…

Тук на помощ идва един от любимите ми extension-и, а именно Indent Rainbow.

Indent Rainbow е цветно разширение, което използваме, за да направим отстъпите разбираеми, коеот пък помага да поддържаме добре организиран и правилно структуриран код.

Всеки отстъп е маркиран с различен цвят, като се редуват 4 различни такива.

Най-приятната част е, че можеш да персонализираш тези 4 цвята.

Indent Rainbow extension for Visual Studio Code

Виж повече тук: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

4. Auto Rename Tag

Случвало ли ти се е да имаш <p> елемент и в даден момент да решиш, че искаш да е <span>? Променяш отварящия таг, но както знаем, над 90% от HTML таговете имат и затварящ такъв.

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

Тук положението е straight forward и няма какво да ти разяснявам, просто променяш отварящия таг и затварящия се актуализира автоматично.

Auto Rename Tag extension for Visual Studio Code

Виж повече тук: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

5. Auto Close Tag

И говорейки за тагове, няма как да пропусна другото ми любимо разширение, що се отнася до продуктивност, а именно Auto Close Tag.

Разширението добавя съответстващия затварящ таг веднага, щом въведеш затварящата скоба </

По този начин няма да се притесняваш, че някой div някъде е останал незатворен и ти „чупи“ целия markup надолу по страницата 😉

Auto Close Tag extension for Visual Studio Code

Виж повече тук: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

С това списъка от полезни разширения за Visual Studio Code изобщо не се изчерпва, но пък тези 5 са гарантирано доказани за повишаване на продуктивността 🙂

Остави коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *