Якщо ви програмуєте щодня, то знаєте, що добре налаштований редактор — це те, що відрізняє продуктивний день від фестивалю розчарувань. Visual Studio Code став редактором довідників Завдяки його продуктивності, системі розширень та величезній спільноті, яка постійно створює нові інструменти.
Справжня магія VS Code полягає не лише в базовому редакторі, а й у його екосистемі. Сотні розширень додають розширене автозаповнення, лінтери, теми, локальні сервери, налагодження, іконки, інтеграцію з Git, штучний інтелект та багато іншого.У цьому посібнику ви знайдете дуже повну колекцію рекомендованих розширень: від необхідних для будь-якої мови програмування до тих, що стосуються лише JavaScript, Python, PHP, HTML/CSS, TypeScript та щоденної роботи з Git, Docker або Markdown.
Що таке VS Code і чому його розширення такі важливі?
Код Visual Studio – це безкоштовний та кросплатформний редактор коду Створено Microsoft, доступно для Windows, macOS та Linux, і є одним з найкращі середовища розробки.
Він вже містить дуже потужні функції одразу після встановлення: підсвічування синтаксису, IntelliSense, інтегроване налагодження, термінал, інтеграція з Git та базова підтримка багатьох мов програмуванняАле справжній успіх настає, коли ви починаєте встановлювати розширення, щоб адаптувати середовище до вашого способу роботи.
Архітектура VS Code розроблена з урахуванням високої розширюваності: практично кожен аспект редактора можна покращити або замінити, від системи налагодження до тем, значків чи автозаповнення для певної мови.
Крім того, існує не один VS-код: Ви можете використовувати офіційну версію або альтернативи з відкритим кодом, такі як VSCodiumякі видаляють телеметрію та деякі власницькі частини, але зберігають сумісність з більшістю розширень.
Як встановлювати та керувати розширеннями у VS Code
Встановлення розширень у VS Code дуже просте. Все робиться з інтерфейсу редактора.без необхідності завантажувати файли вручну.
Щоб додати нові функції, відкрийте редактор і перейдіть на панель розширень (квадратний значок на бічній панелі або ярлик). Ctrl+Shift+X / Cmd+Shift+X в macOS). Звідти шукайте за назвою або ключовим словом. розширення, яке вас цікавить.
Коли ви знайдете цікаве розширення, перевірте його інформаційний лист: Кількість завантажень, відгуків, сумісності та скріншотівЦе дасть вам гарне уявлення про те, чи варто його встановлювати, чи ні.
Щоб завершити процес, просто натисніть кнопку встановлення. Більшість розширень активуються миттєвоДеякі вимагають перезавантаження вікна редактора, а деякі потребують додаткового налаштування (наприклад, ті, що залежать від зовнішніх інструментів, таких як ESLint, PHP Debug з Xdebug тощо).
Необхідні загальні розширення для будь-якого проекту
Існує набір розширень, які практично кожен повинен встановити, незалежно від мови чи стеку, який він використовує. Вони зосереджені на продуктивності, форматуванні, співпраці, контролі версій та взаємодії з користувачем..
Гарніша
Гарніша є де-факто стандартний формат коду У світі JavaScript та багатьох інших мов програмування він автоматично переписує ваш код, дотримуючись чітко визначених правил стилю.
Він здатний форматувати JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular та багато іншого. Ідея полягає в тому, що дискусії щодо того, чи використовувати одинарні чи подвійні лапки, крапку з комою чи ні, де використовувати фігурні дужки тощо, зникнуть, оскільки Весь проект дотримується однієї й тієї ж конвенції.
Ви можете використовувати налаштування за замовчуванням або створити власні правила, використовуючи типи файлів .prettierrcЗвичайна річ — це активувати форматування під час збереженнящоб щоразу, коли ви натискаєте Ctrl+S, код був чистим та узгодженим.
ESLint
Хоча Преттьєр зосереджується на аспекті коду, ESLint зосереджується на якості та передовій практиціЦе найпоширеніший лінтер у сучасних проектах JavaScript та TypeScript.
Розширення ESLint для VS Code дозволяє виконувати аналіз у фоновому режимі під час введення тексту. Він відображає помилки та попередження безпосередньо в коді.виділення проблемних ліній та швидке надання порад щодо їх виправлення.
Ви можете використовувати широко використовувані конфігурації, такі як Airbnb, Standard або офіційні рекомендації ESLintабо визначте власні правила, щоб адаптувати їх до проєкту. Він також сумісний з плагінами для фреймворків, таких як React, Vue або Node.js.
Кращі коментарі
У великих проєктах коментарі перетворюються на безлад, за яким важко стежити. Кращі коментарі дозволяють візуально класифікувати коментарі використовуючи кольори відповідно до префікса, який ви використовуєте.
Наприклад, ви можете мати коментарі типу ВСІ, ПОПЕРЕДЖЕННЯ, ВАЖЛИВІ, ПИТАННЯтощо, кожен зі своїм власним стилем. Це значно полегшує пошук незавершених завдань, критичних приміток або ключових пояснень під час перегляду коду.
Перевірка орфографії коду
Хоча це може здатися незначною деталлю, Орфографічні помилки в іменах змінних, коментарях або тексті інтерфейсу виглядають досить погано.Code Spell Checker діє як перевірка орфографії для коду.
Аналізує ідентифікатори, рядки та коментарі Позначте підозрілі словаВін пропонує пропозиції щодо їх виправлення. Його можна використовувати з кількома мовами програмування та він дуже корисний, якщо ви пишете документацію або видимий користувачеві текст у коді.
Лінза помилок
VS Code вже відображає помилки та попередження, але іноді вони залишаються непоміченими. Завдяки лінзі помилок їх неможливо ігнорувати відображення діагностичної інформації безпосередньо поруч із ураженим рядком та на полях редактора.
З першого погляду ви побачите де помилки зосереджені у файлібез необхідності відкривати панель проблем. У великих проектах з багатьма лінтерами та інструментами аналізу це дуже допомагає переконатися, що нічого не пропущено.
Код бігун
Якщо вам подобається, спробуйте невеликі фрагменти коду без складання цілого проєктуCode Runner дуже практичний. Він дозволяє запускати код з кількох мов (JavaScript, Python, C, C++, Java, PHP та інших) безпосередньо з редактора.
Ви можете запустити поточний файл або лише вибраний блок, переглядати вихідні дані на вбудованій панелі або в самому терміналі VS Code та налаштувати команди, що використовуються для кожної мови.
Шлях Intellisense
Під час роботи з багатьма ресурсами, імпортами та відносними шляхами, їх запис вручну є гарантованою помилкою. Шляхи до файлів і папок автоматично заповнюються системою Intellisense. під час запису рядків зі шляхами.
Працює на Імпорт JavaScript/TypeScript, посилання CSS, шляхи до зображень HTML І загалом у будь-якому контексті, де VS Code виявляє, що ви вводите маршрут. Це економить час і дозволяє уникнути надокучливих друкарських помилок.
vscode-icons, тема Material Icon та інші пакети іконок
Ікони – це не лише питання естетики. Гарна тема значків дозволяє миттєво визначити тип файлу. просто переглянувши браузер.
vscode-icons, тема Material Icon, VSCode Great Icons або певні теми, такі як Простіші іконки VSCode за допомогою Angular Вони надають власні значки для мов, фреймворків та файлів конфігурації (Angular, Docker, env тощо).
Вибір одного чи іншого – це справа смаку, але Будь-який з них значно покращує читабельність дерева файлівособливо в окремих одиницях або великих проектах.
GitLens
GitLens, ймовірно, Найпотужніше розширення для роботи з Git з VS CodeЦе виводить контроль версій на новий рівень, повністю інтегруючи історію в редактор.
Дозволяє побачити хто і коли змінював кожен рядок (винуватці), історія файлу, порівняння версій, дослідження гілок та тегівта багато іншого. Він також відображає контекстні анотації до коду з інформацією про останній коміт.
Якщо ви працюєте в команді, чудово розуміти причини певних змін, перегляд регресій та виконання перевірки коду не відходячи від редактора.
Поділитися в прямому ефірі
Для парного програмування або дистанційного наставництва, Live Share – одна з найкращих речей, які існують.Це дозволяє вам ділитися своїм сеансом VS Code з іншою людиною в режимі реального часу.
Ви обидва можете редагувати той самий файл, налагоджувати програму разом, ділитися терміналами та локальними серверами і навіть відкрити вбудований чат. Це ідеально підходить для усунення складних помилок або навчання когось роботі над певним проектом.
Спеціальні розширення для JavaScript та TypeScript
Екосистема JavaScript та TypeScript є однією з найбільш розпещених VS Code. Якщо ви працюєте у фронтенді, бекенді з Node або у сфері розробки повного стеку, ці розширення заощадять вам багато годин..
Фрагменти коду JavaScript (ES6).
Запис одних і тих самих структур знову і знову є виснажливим. Фрагменти коду JavaScript (ES6) додають безліч фрагментів для сучасного синтаксису від JS та TS.
За допомогою коротких скорочень ви можете створювати стрілкові функції, класи, імпорт, console.log, структури циклів та багато іншого. Це ідеально підходить для того, щоб менше запам'ятовувати та швидше друкувати.
npm Intellisense та розширення npm
Коли працюєш з багатьма пакетами, запам'ятовування точних назв — не найцікавіше завдання. npm Intellisense автоматично доповнює назви встановлених модулів у вашому імпорті та вимогах.
Тим часом, офіційне розширення npm для VS Code інтегрується з вашим package.json для перерахування та запуску скриптів Одним клацанням миші переглядайте залежності та керуйте рутинними завданнями, не відкриваючи термінал.
Вартість імпорту
Розмір пакету на фронтенді має велике значення. Вартість імпорту розраховує приблизний розмір кожного імпорту і показує його поруч із відповідним рядком.
Таким чином, ви миттєво знаєте, чи використовуєте ви цілу бібліотеку-монстра для чогось тривіального, і можете оцінити такі зміни, як використовуйте частковий імпорт, відкладене завантаження або легші альтернативи.
Quokka.js
Quokka.js функціонує як Інтерактивний блокнот для JavaScript та TypeScript у VS Code. Він виконує код під час його написання та відображає результати й значення змінних у вбудованих анотаціях.
Він ідеально підходить для тестувати швидкі ідеї, розуміти нові API або налагоджувати невеликі функції без необхідності створювати цілий проєкт з нуля. Він має безкоштовну версію з дуже корисними функціями та платну версію з додатковими можливостями.
Фрагменти коду ES7 React/Redux/GraphQL/React-Native та прості фрагменти коду React
Якщо ви працюєте з екосистемою React, ці два розширення – це чисте золото. ES7 React/Redux/GraphQL/React-Native пропонує фрагменти коду для компонентів, хуків, Redux, GraphQL та React Native.охоплюючи майже всі поширені візерунки.
З іншого боку, Simple React Snippets зосереджується на менший набір фрагментів коду для сучасного React (функціональні компоненти, базовий імпорт тощо), ідеально підходить, якщо вам потрібно щось менш складне, але однаково продуктивне.
JavaScript та TypeScript щоночі
Якщо ви хочете бути в курсі останніх мовних новин, JavaScript та TypeScript Nightly надає вам доступ до нічної версії сервера мови TypeScript. що використовує VS Code.
Це означає нові функції, покращення продуктивності та виправлення помилок, перш ніж вони досягнуть стабільної версії — ідеально для тестувати нові мовні функції та виявляти майбутні зміни що може вплинути на ваш код.
Розширення Python
VS Code, з правильними розширеннями, стає Першокласне середовище розробки PythonЯкщо ви займаєтесь бекенд-розробкою, наукою про дані або автоматизацією за допомогою цієї мови, це майже обов'язково.
Python (офіційне розширення)
Офіційне розширення Python від Microsoft – наріжний камінь для роботи з цією мовою у VS CodeБез цього підтримка дуже обмежена.
Забезпечує IntelliSense, налагодження, тестування, інтеграція з віртуальними середовищами, форматування коду (Black, autopep8), лінтування за допомогою Pylint або Flake8 та багато інших важливих функцій.
Піланс
Пайланс — це розширений мовний сервер для Python що ще більше покращує офіційне розширення. Воно забезпечує швидкий статичний аналіз, покращене автозаповнення та дуже детальну перевірку типів.
Якщо ви використовуєте анотації типів або хочете виявити помилки перед запуском коду, Pylance значно покращує досвід розробки. у середніх та великих проектах.
Юпітер
Розширення Jupyter інтегрується блокноти .ipynb безпосередньо у VS CodeВи можете створювати, відкривати та запускати комірки так само, як у класичному Jupyter, але з редактора.
Це особливо корисно для аналіз даних, машинне навчання, візуалізація та швидке прототипування, поєднуючи найкращі можливості блокнотів з перевагами повноцінного редактора.
Генератор документації Python
Внутрішня документація в Python зазвичай знаходиться в рядках документації. Генератор рядків документації Python автоматично створює скелет рядка документації для функцій, класів та методів.
Коли ви вводите початкові лапки, розширення генерує поля для опису, параметрів та значення, що повертається на основі сигнатури функції, що заохочує добре документований код, не будучи таким клопітким.
PHP та розширення бекенду
PHP залишається основою веб-бекенду, а VS Code... дуже зріла екосистема розширень для цієї мови.
PHP IntelliSense та Intelephense
PHP IntelliSense було одним із перших серйозних розширень автозаповнення для PHP. Воно пропонує Пропозиції щодо функцій, класів, методів, просторів імен та змінних, а також базова навігація до визначень.
PHP Intelephense йде ще далі: Дуже швидкий та глибокий аналіз, рефакторинг, дослідження довідкової інформації, оновлена підтримка PHP 7 та 8 і багато іншого. Навіть безкоштовна версія вже перевершує більшість альтернатив.
Блокувальник документів PHP
Для ведення належної документації у великих проектах, PHP DocBlocker генерує коментарі DocBlock повний для функцій, методів, класів та властивостей.
Письмово / ** у функції вона автоматично заповнює параметри та тип повернутого значення, що стимулює Правильно документуйте внутрішні та публічні API.
Композитор
Composer – це стандарт для керування залежностями в PHP. Відповідне розширення інтегрується з VS Code для... виконувати поширені команди (встановити, оновити, вимагати) з палітри, окрім автозаповнення та підсвічування в composer.json.
Це робить його набагато комфортнішим керувати бібліотеками, фреймворками та скриптами без постійного перемикання між редактором і терміналом.
Налагодження PHP
Налагодження PHP за допомогою var_dump має свою принадність до певної міри. PHP Debug додає повноцінний налагоджувач на основі Xdebug. в VS Code.
З ним можна Встановлення точок зупинки, перевірка змінних, покроковий перехід по коду та проаналізуйте стек викликів. Початкове налаштування вимагає певної обережності, але після налаштування це важливий інструмент.
Розширення для HTML, CSS та розробки фронтенду
Якщо ви працюєте над візуальною стороною веб-сторінки, існує кілька розширень, які Вони перетворюють VS Code на надзвичайно комфортне середовище для верстки та стилізації..
Живий сервер
Живий сервер монтує локальний сервер розробки з автоматичним перезавантаженнямНатискання кнопки «Опублікувати» відкриває ваш сайт у браузері та оновлює сторінку щоразу, коли ви зберігаєте файл.
Він ідеально підходить для Чистий HTML, швидке прототипування, статична верстка та прості фронтенд-проектиде миттєве бачення змін має вирішальне значення.
Підтримка HTML CSS
Це розширення покращує інтеграцію між HTML та CSS. Він пропонує інтелектуальне автодоповнення класів та ідентифікаторів, визначених у ваших таблицях стилів. коли ви пишете HTML, і навпаки.
Також пропонується CSS-властивості (включаючи префікси постачальників) і чудово працює в поєднанні з Emmet, що значно пришвидшує робочий процес верстки.
IntelliSense для імен класів CSS та Tailwind CSS IntelliSense
IntelliSense для назв класів CSS аналізує ваші файли CSS, SCSS або Less, щоб Запропонувати автодоповнення імен класів у HTMLЦе особливо корисно, коли є утиліти або класи з довгими іменами.
Якщо ви використовуєте Tailwind, Tailwind CSS IntelliSense йде ще далі, надаючи Автозаповнення, зв'язування та вбудована документація для утиліти Tailwind, що майже обов'язково для комфортної роботи з цим фреймворком.
CSS Peek та CSS Lint
CSS Peek дозволяє вам швидкий перегляд та перехід до CSS-визначення класу або ідентифікатора з HTML-коду, або у спливаючому вікні, або відкривши відповідний файл.
CSS Lint діє як лінтер для таблиць стилів, помилки маркування або проблемні візерунки (дубльовані властивості, неефективні правила тощо), що допомагає підтримувати чистіший та зручніший у супроводі CSS.
Автоматичне перейменування тегу та виділення відповідного тегу
Тег автоматичного перейменування виконує просту та корисну роботу: Коли ви змінюєте початковий тег елемента HTML або XML, це оновлює закриваючий тег. автоматично, щоб вони не розсинхронізувалися.
Виділіть відповідні теги пара відкриття/закриття тегу, де розташований курсорЦе дуже практично для великих документів або тих, що мають багато вкладених структур.
Попередній перегляд зображень, оптимізатор зображень та виділення кольорів
Попередній перегляд зображення показує мініатюра зображення, на яке посилається маршрут навівши курсор на нього або на поле, що допомагає перевірити правильність шляхів без окремого відкриття файлу.
Оптимізатор зображень дозволяє стиснення зображень (з втратами або без втрат) безпосередньо в редакторі, що дозволяє підготувати ваші ресурси до виробництва без використання зовнішніх інструментів.
Кольорове виділення виділяє колірні коди (шістнадцяткові, RGB, HSL тощо) з їхнім фактичним кольором як фоном або підкресленням, що значно полегшує роботу зі складними палітрами.
Додаткові розширення продуктивності, дизайн та налаштування
Окрім чистих інструментів розробки, існує чимало розширень, призначених для щоб зробити ваше повсякденне життя комфортнішим, а вашого редактора приємнішим для ока.
Теми для VS Code
Теми безпосередньо впливають на ваш візуальний комфорт. Деякі з найпопулярніших та рекомендованих: Відтінки фіолетового, Матеріальна тема, Нічна сова, Горизонт, Ноктіс або Монокай Флатленду.
Кожен з них має свою індивідуальність: яскраві темні схеми, палітри, розроблені для зменшення навантаження на очі, світлі та темні варіації або навіть повністю монохромні теми для тих, хто хоче жодних відволікаючих факторів.
Павич
Коли ви відкриваєте кілька проектів одночасно, легко заплутатися. Peacock дозволяє змінювати акцентний колір вікна VS Code для кожного проєкту.щоб ви могли з першого погляду зрозуміти, чи редагуєте ви бекенд, фронтенд чи певний мікросервіс.
Це просте, але неймовірно корисне розширення, якщо Зазвичай у вас одночасно відкрито кілька робочих просторів..
Веселкові відступи та райдужні дужки
кольори веселки відступів стовпці з відступами з різними тонами, що допомагає легко бачити структуру коду.
Rainbow Brackets робить щось подібне з дужки, квадратні дужки та фігурні фігурипризначення різного кольору кожному рівню вкладеності. Між цими двома рівнями набагато легше знайти відсутню дужку або блок із поганим відступом.
Дерево справ
Якщо ви використовуєте коментарі типу TODO, FIXME або BUG, Todo Tree сканує ваш робочий простір і створює панель інструментів з усіма цими анотаціями організовані у формі дерева.
Звідти ви можете переходити безпосередньо до кожної точки в коді де є незавершені завдання або позначені проблеми, перетворюючи TODO на своєрідний міні-менеджер завдань, пов'язаний з репозиторієм.
GitHub Copilot, Tabnine та ChatGPT/AI
Інструменти автозаповнення на основі штучного інтелекту успішно вийшли на ринок. GitHub Copilot та Tabnine пропонують рядки або цілі блоки коду на основі контексту, попередніх тестів або коментарів.
Розширення, що інтегрують ChatGPT або подібні моделі у VS Code, дозволяють запитувати пояснення коду, рефакторувати функції або створювати тести не виходячи з редактора. Вони вимагають ключів API, але як допоміжний засіб розробки вони дуже потужні, якщо використовувати їх розумно.
Markdown «Все в одному» та покращений попередній перегляд Markdown
Якщо ви документуєте проекти або пишете технічні публікації, Markdown All in One додає ярлики, покращений попередній перегляд, створення індексу та інші зручності. працювати з Markdown.
У поєднанні з розширеннями попереднього перегляду в стилі GitHub ви отримуєте досвід написання, дуже близький до того, як пізніше виглядатимуть ваші README-файли або статті в Інтернеті
Docker, віддалений SSH та віддалений WSL
У професійному середовищі дуже поширеною є робота з контейнерами або віддаленими машинами. Офіційне розширення Docker дозволяє керувати образами, контейнерами, мережами та томами. з бічної панелі, а також для спрощення налагодження в контейнерах.
Віддалений SSH та віддалений WSL дозволяють вам Відкривати віддалені папки або середовища Linux (WSL) так, ніби це локальні проекти, виконуючи команди та налагоджуючи їх прямо там, але зі зручністю інтерфейсу VS Code.
Завдяки всім цим добре підібраним та налаштованим розширенням, Visual Studio Code перетворюється з простого легкого редактора на Спеціальне середовище розробки, адаптоване до вашого стеку, вашого способу роботи та ваших проектів.Знаходження балансу між відсутністю перевантаження та наявністю лише необхідних інструментів – це ключ до швидкості, комфорту та якості вашого щоденного програмування.
