VS Code: Налаштування, теми та 16 must-have розширень для продуктивності

Розкриваємо потенціал VS Code: налаштування, теми та 16 незамінних розширень

Щойно ви завантажили VS Code, вас, ймовірно, трохи розчарував його вигляд. Чому він не такий, як на тих яскравих відео YouTube, які ви дивилися? Не хвилюйтеся, адже ми збираємось пройтись по налаштуваннях, щоб ваш VS Code виглядав блискуче та ефективно.

Налаштування VS Code для максимального комфорту

Перше, що я роблю, коли запускаю VS Code, – це збільшую інтерфейс. Текст здається мені трохи малим, але це, звичайно, справа смаку. На Mac я просто натискаю Command + один раз, і все стає трохи більшим. Іконки на бічній панелі також стають більшими, що полегшує навігацію.

Далі, зверніть увагу на смугу прокрутки праворуч. Вона чудова для файлів з невеликою кількістю рядків коду, але коли ви працюєте з великим обсягом коду, є набагато простіший спосіб навігації. Просто клікніть правою кнопкою миші на смузі прокрутки та виберіть опцію “Міні-карта”. З’явиться невелика карта праворуч, і, перетягуючи її, ви зможете легко прокручувати файл.

Чому ця функція така потужна? Уявіть, що у вас є файл на 450 рядків коду. На міні-карті ви не тільки бачите весь файл, але й усі помилки, які відображаються на кожному рядку. Наполегливо рекомендую вам увімкнути міні-карту!

Персоналізація VS Code: тема на ваш смак

Щоб додати індивідуальності вашій робочій області, налаштуйте тему. Відкрийте панель розширень та пошукайте “Pale Knight”. Це моя улюблена тема, але ви можете обрати будь-яку, яка вам до вподоби. Просто натисніть “Встановити”, і ви одразу побачите, як зміниться колірна схема вашого коду.

Елегантні налаштування курсора та тексту

Далі змінимо параметр “Блимання курсора”. За замовчуванням курсор блимає, але ми змінимо це на “Розширення”. Тепер, коли ви натискаєте будь-де у файлі, курсор плавно анімується, розширюючись. Це лише особиста перевага, але мені подобається ця анімація.

Також увімкніть “Плавну анімацію каретки курсора”. Це робить анімацію друку набагато плавнішою. Замість того, щоб текст з’являвся миттєво, він плавно з’являється.

Тепер введіть “Перенесення слів” у налаштуваннях і виберіть “Увімкнути”. Це дозволить тексту автоматично переноситись на наступний рядок, коли змінюється розмір вікна VS Code. Це особливо корисно, коли у вас довгий рядок коду, і ви не хочете постійно прокручувати його вправо.

І останнє, але не менш важливе: переконайтеся, що у вас увімкнено “Підсвічування парних дужок”. Ця функція призначає унікальні кольори відповідним дужкам, що полегшує ідентифікацію вкладених структур, особливо в складному коді з кількома рівнями відступів. Хоча ця функція увімкнена за замовчуванням, я завжди перевіряю це після завантаження VS Code.

Розширюємо можливості VS Code: 16 незамінних розширень

Щоб отримати максимум від VS Code, перейдіть на вкладку “Розширення”. Тут ви можете шукати, встановлювати, видаляти розширення та переглядати їхні налаштування та документацію. Це, по суті, магазин для розширення та персоналізації вашого середовища розробки.

Існують тисячі розширень для VS Code, але сьогодні я покажу вам 16 найважливіших для мене та багатьох інших розробників у всьому світі:

1. Peacock: Дозволяє змінювати колір вашої робочої області, що полегшує візуальне розрізнення між кількома відкритими проектами. Це особливо корисно, якщо ви працюєте з кількома екземплярами коду, такими як frontend і backend, або різними середовищами, такими як production, staging і development.

2. GitHub Copilot: Штучний інтелект, що покращує продуктивність розробників, надаючи пропозиції щодо коду в режимі реального часу, допомогу на основі чату та підтримку CLI. Він може ітерувати код, виявляти помилки та автоматично їх виправляти. GitHub Copilot – це авторитетна валідація. Він запускає збірки та тести після впровадження змін.

3. Live Server: Створює локальний сервер розробки з можливістю автоматичного оновлення сторінки в браузері під час зміни HTML, CSS або JavaScript файлів. Це усуває необхідність ручного оновлення.

4. Docker: Спрощує розробку, управління та розгортання контейнеризованих додатків безпосередньо в редакторі. Ви можете легко створювати, запускати, зупиняти, перевіряти та видаляти контейнери.

5. Prettier: Форматує код, забезпечуючи узгоджений стиль коду в усьому проекті. Він автоматично форматує код на основі попередньо визначених правил.

6. GitLens: Розширює можливості Git у VS Code, надаючи глибше розуміння історії проекту, змін коду та співпраці. Ви можете бачити, хто востаннє змінив рядок коду, переглядати історію комітів, учасників і детальну статистику файлів і гілок.

7. Import Cost: Допомагає відстежувати розмір ваших залежностей і те, що ви імпортуєте у свій проект. Він показує розмір кожного імпортованого пакета безпосередньо в редакторі, що полегшує моніторинг і оптимізацію продуктивності ваших програм.

8. Code Runner: Дозволяє розробникам запускати фрагменти коду або цілі скрипти навіть на багатьох мовах програмування безпосередньо в VS Code.

9. Remote SSH: Дозволяє розробникам підключатися до віддалених машин і працювати з кодом, як якщо б він зберігався локально.

10. Quokka.js: Живий блокнот для JavaScript і TypeScript, який дозволяє розробникам запускати код і миттєво бачити результати в редакторі.

11. Live Share: Забезпечує співпрацю в режимі реального часу, дозволяючи розробникам ділитися своїми сеансами кодування з іншими. Кілька людей можуть працювати над однією кодовою базою, налагоджувати код разом і спілкуватися в чаті безпосередньо в VS Code.

12. Polacode: Дозволяє створювати красиві зображення вашого коду в стилі Polaroid. Ви можете налаштувати фон, текст і форматування.

13. JavaScript (ES6) code snippets: Надає набір попередньо визначених шаблонів коду для прискорення розробки на JavaScript.

14. Material Icon Theme: Змінює зовнішній вигляд іконок файлів і папок у VS Code, щоб відповідати матеріальному дизайну Google, пропонуючи візуально привабливу та організовану робочу область.

15. VS Code PDF: Дозволяє розробникам переглядати PDF-файли та взаємодіяти з ними безпосередньо в редакторі VS Code.

16. Rainbow CSV: Забезпечує підсвічування синтаксису для CSV- і TSV-файлів, що полегшує читання та редагування даних у цих форматах.

Сподіваюсь, ці налаштування та розширення зроблять ваш робочий процес простішим і ефективнішим. Не соромтеся ділитися у коментарях, які розширення я не включила до цього списку.