Розкриваємо потенціал 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 найважливіших для мене та багатьох інших розробників. У всьому світі:
-
Peacock: Дозволяє змінювати колір вашої робочої області, що полегшує візуальне розрізнення між кількома відкритими проектами. Це особливо корисно, якщо ви працюєте з кількома екземплярами коду, такими як frontend і backend, або різними середовищами, такими як production, staging і development. Щоб було ясно,
-
GitHub Copilot: Штучний інтелект, що покращує продуктивність розробників, надаючи пропозиції. Щодо коду в режимі реального часу, допомогу на основі чату та підтримку CLI. Він може ітерувати код, виявляти помилки та автоматично їх виправляти. Очевидно, gitHub Copilot – це авторитетна валідація. Він запускає збірки та тести після впровадження змін.
-
Live Server: Створює локальний сервер розробки з можливістю автоматичного оновлення сторінки в браузері під час зміни HTML, CSS або JavaScript файлів. Дивно, це усуває необхідність ручного оновлення.
-
Docker: Спрощує розробку, управління та розгортання контейнеризованих додатків безпосередньо в редакторі. Ви можете легко створювати, дивіться, запускати, зупиняти, перевіряти та видаляти контейнери.
-
Prettier: Форматує код, загалом, забезпечуючи узгоджений стиль коду в усьому проекті. Простіше кажучи, він автоматично форматує код на основі попередньо визначених правил.
-
GitLens: Розширює можливості Git у VS Code, надаючи десь так, глибше розуміння історії проекту, змін коду та співпраці. Ви можете бачити, хто востаннє змінив рядок коду, переглядати. Історію комітів, учасників і детальну статистику файлів і гілок. Чесно кажучи,
- уявіть собі,
Import Cost: Допомагає відстежувати. Розмір ваших залежностей і розумієте, те, що ви імпортуєте у свій проект. Він показує розмір кожного імпортованого пакета безпосередньо в редакторі, що полегшує моніторинг і оптимізацію продуктивності ваших програм. Безумовно,
-
Code Runner: Дозволяє розробникам запускати фрагменти коду або цілі скрипти навіть на багатьох мовах програмування безпосередньо в VS Code, типу того.
-
Remote SSH: Дозволяє розробникам підключатися до віддалених. Машин і працювати з кодом, як якщо б він зберігався локально.
-
Quokka. Js: Живий блокнот для JavaScript і TypeScript, який дозволяє розробникам запускати код і миттєво бачити результати в редакторі. Насправді,
-
Live Share: Забезпечує співпрацю в режимі реального часу, дозволяючи розробникам ділитися своїми сеансами кодування з іншими. Відверто кажучи, кілька людей можуть працювати над однією кодовою базою, налагоджувати. Код разом і спілкуватися в чаті безпосередньо в VS Code.
-
Polacode: Дозволяє створювати красиві зображення вашого коду в стилі Polaroid. Ви можете налаштувати фон, текст і форматування.
-
JavaScript (ES6) code snippets: Надає набір. Справа в тому, що до речі, попередньо визначених шаблонів коду для прискорення розробки на JavaScript.
-
Material Icon Theme: Змінює зовнішній вигляд іконок файлів і папок у VS Code, щоб відповідати матеріальному дизайну Google, пропонуючи візуально привабливу та організовану робочу область.
-
VS Code PDF: Дозволяє розробникам переглядати PDF-файли та взаємодіяти з ними безпосередньо в редакторі VS Code. До речі,
-
Rainbow CSV: Забезпечує підсвічування синтаксису для CSV-. І TSV-файлів, що полегшує читання та редагування даних у цих форматах.
Сподіваюсь, ці налаштування та розширення зроблять ваш робочий процес простішим і ефективнішим. Не соромтеся ділитися у коментарях, які розширення я не включила до цього списку.
