Ако програмирате ежедневно, ще знаете, че наличието на добре настроен редактор прави разликата между продуктивен ден и фестивал на разочарованията. Visual Studio Code се превърна в редактор на референтни данни Благодарение на неговата производителност, системата му за разширения и огромната общност, която непрекъснато създава нови инструменти.
Истинската магия на VS Code се крие не само в базовия редактор, но и в неговата екосистема. Стотици разширения добавят разширено автоматично довършване, linters, теми, локални сървъри, дебъгване, икони, Git интеграция, AI и много други.В това ръководство ще намерите много пълна колекция от препоръчителни разширения: от основните за всеки език, до специфични за JavaScript, Python, PHP, HTML/CSS, TypeScript и ежедневната работа с Git, Docker или Markdown.
Какво е VS Code и защо неговите разширения са толкова важни?
Visual Studio Code е безплатен и кросплатформен редактор на код Създаден от 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
Докато Prettier се фокусира върху аспекта на кода, ESLint се фокусира върху качеството и добрите практикиТова е най-широко използваният линтер в съвременните JavaScript и TypeScript проекти.
Разширението ESLint за VS Code кара анализа да се изпълнява във фонов режим, докато пишете. Той показва грешки и предупреждения директно в кода.подчертаване на проблемни линии и предлагане на бързи предложения за коригирането им.
Можете да използвате широко използвани конфигурации, като например Airbnb, Standard или официалните препоръки на ESLintили дефинирайте свои собствени правила, за да ги адаптирате към проекта. Съвместим е и с плъгини за рамки като React, Vue или Node.js.
По-добри коментари
В големите проекти коментарите се оказват объркана бъркотия, която е трудна за следване. „По-добри коментари“ ви позволява визуално да категоризирате коментарите използвайки цветове според префикса, който използвате.
Например, можете да имате коментари от типа ВСИЧКИ, ПРЕДУПРЕЖДЕНИЕ, ВАЖЕН, ВЪПРОСи т.н., всеки със собствен стил. Това улеснява много намирането на висящи задачи, критични бележки или ключови обяснения при преглед на кода.
Проверка на правописа на кода
Въпреки че може да изглежда като незначителен детайл, Правописните грешки в имената на променливи, коментарите или текста на интерфейса изглеждат доста зле.Проверката на правописа на кода действа като програма за проверка на правописа на код.
Анализира идентификатори, низове и коментари и Маркирайте подозрителните думиПредлага предложения за коригирането им. Може да се използва с множество езици и е много полезен, ако пишете документация или видим за потребителя текст в кода.
Грешка на обектива
VS Code вече показва грешки и предупреждения, но понякога те остават незабелязани. Грешката на обектива ги прави невъзможни за игнориране показване на диагностичната информация директно до засегнатия ред и в полето на редактора.
С един поглед ще видите където грешките са концентрирани във файлабез да се налага да отваряте панела с проблеми. В големи проекти с много линтери и инструменти за анализ, това е огромна помощ, за да се гарантира, че нищо не е пропуснато.
coderunner
Ако обичате опитайте малки фрагменти от код, без да се сглобява цял проектCode Runner е много практичен. Той ви позволява да изпълнявате код от множество езици (JavaScript, Python, C, C++, Java, PHP и други) директно от редактора.
Можете да стартирате текущия файл или само избрания блок, преглед на изхода на интегриран панел или в самия терминал на VS Code и персонализирайте командите, използвани за всеки език.
Path Intellisense
Когато работите с много ресурси, импортирани данни и относителни пътища, писането им на ръка е гарантирана грешка. Пътят Intellisense автоматично довършва пътищата до файлове и папки докато пишете низове с пътища.
Работи върху Импортиране в JavaScript/TypeScript, CSS препратки, HTML пътища към изображения И като цяло във всеки контекст, където VS Code засече, че въвеждате маршрут. Това спестява време и избягва досадни печатни грешки.
vscode-icons, тема за икони на материали и други пакети с икони
Иконите не са само въпрос на естетика. Добрата тема за икони ви позволява незабавно да идентифицирате типа на файла. само като погледнете в браузъра.
vscode-icons, тема за икони на материали, VSCode Great Icons или специфични теми като VSCode по-прости икони с Angular Те предоставят персонализирани икони за езици, рамки и конфигурационни файлове (Angular, Docker, env и др.).
Изборът на едното или другото е въпрос на вкус, но Всеки от тях значително подобрява четливостта на файловото дървоособено при проекти с единични единици или големи проекти.
GitLens
GitLens вероятно е Най-мощното разширение за работа с Git от VS CodeТова издига контрола на версиите на друго ниво, като напълно интегрира историята в редактора.
Позволява ви да видите кой е променил всеки ред и кога (вина), историята на файла, сравняване на ревизии, изследване на клонове и таговеи много други. Също така показва контекстуални анотации върху кода с информация за последния commit.
Ако работите в екип, е чудесно да разбирате причините за определени промени, преглед на регресии и извършване на преглед на кода без да напускате редактора.
Live Share
За програмиране по двойки или дистанционно менторство, Live Share е едно от най-добрите неща, които съществуват.Това ви позволява да споделяте вашата VS Code сесия с друг човек в реално време.
И двамата можете редактирайте един и същ файл, отстранявайте грешки заедно, споделяйте терминали и локални сървъри и дори да отворите интегриран чат. Това е идеално за отстраняване на сложни грешки или за обучение на някого как да работи по конкретен проект.
Специфични разширения за JavaScript и TypeScript
Екосистемата на JavaScript и TypeScript е една от най-разглезените от VS Code. Ако работите във фронтенд, бекенд с Node или full stack разработка, тези разширения ще ви спестят много часове..
Фрагменти от 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 snippets предлага snippets за компоненти, hooks, Redux, GraphQL и React Native.покривайки почти всички често срещани модели.
Simple React Snippets, от друга страна, се фокусира върху по-малък набор от фрагменти за модерен React (функционални компоненти, основен импорт и др.), идеално, ако искате нещо по-малко натоварващо, но също толкова продуктивно.
JavaScript и TypeScript Nightly
Ако искате да сте в крак с езиковите актуализации, JavaScript и TypeScript Nightly ви дава достъп до нощната версия на езиковия сървър TypeScript. който използва VS Code.
Това означава нови функции, подобрения в производителността и корекции на грешки, преди да достигнат стабилната версия – идеално за тестване на нови езикови функции и откриване на бъдещи промени което може да повлияе на вашия код.
Разширения на Python
VS Code, с правилните разширения, се превръща в Първокласна Python IDEАко се занимавате с backend разработка, наука за данни или автоматизация с този език, те са почти задължителни.
Python (официално разширение)
Официалното разширение на Microsoft за Python е крайъгълният камък за работа с този език във VS CodeБез него подкрепата е много ограничена.
осигурява IntelliSense, дебъгване, тестване, интеграция с виртуални среди, форматиране на код (Black, autopep8), linting с Pylint или Flake8 и много други важни функции.
Пиланс
Пиланс е разширен езиков сървър за Python което допълнително подобрява официалното разширение. То осигурява бърз статичен анализ, подобрено автоматично довършване и много подробна проверка на типа.
Ако използвате анотации на типове или искате да откриете грешки преди изпълнението на кода, Pylance значително подобрява процеса на разработка. в средни и големи проекти.
Юпитер
Разширението Jupyter интегрира тетрадки .ipynb директно във VS CodeМожете да създавате, отваряте и изпълнявате клетки точно както в класическия Jupyter, но от редактора.
Особено полезно е за анализ на данни, машинно обучение, визуализация и бързо прототипиране, съчетавайки най-доброто от тетрадките с предимствата на пълноценен редактор.
Генератор на документационни низове на Python
Вътрешната документация в Python обикновено е в docstrings. Генераторът на документационни низове на Python автоматично създава скелета на документационния низ за функции, класове и методи.
Когато въвеждате началните кавички, разширението генерира полета за описание, параметри и връщана стойност базирано на сигнатурата на функцията, което насърчава добре документирания код, без да е толкова досадно.
PHP и backend разширения
PHP остава основен елемент в уеб backend-а, а VS Code има... много зряла екосистема от разширения за този език.
PHP IntelliSense и Intelephense
PHP IntelliSense беше едно от първите сериозни разширения за автоматично довършване за PHP. То предлага Предложения за функции, класове, методи, пространства от имена и променливи, в допълнение към основната навигация до дефинициите.
PHP Intelephense отива още една крачка напред: Много бърз и задълбочен анализ, рефакторинг, справочни проучвания, актуализирана поддръжка за PHP 7 и 8 и още. Дори безплатната версия вече превъзхожда повечето алтернативи.
PHP DocBlocker
За да се поддържа прилична документация в големи проекти, PHP DocBlocker генерира коментари в DocBlock завършено за функции, методи, класове и свойства.
Писмено / ** при функция, тя автоматично попълва параметрите и типа на връщаната стойност, което стимулира Правилно документирайте вътрешните и публичните API.
композирам
Composer е стандартът за управление на зависимости в PHP. Съответното разширение се интегрира с VS Code за изпълнява често срещани команди (инсталиране, актуализиране, изискване) от палитрата, освен че предлага автоматично довършване и маркиране в composer.json.
Това го прави много по-удобно управлявайте библиотеки, рамки и скриптове без постоянно превключване между редактор и терминал.
PHP отстраняване на грешки
Дебъгването на PHP с var_dump има своя чар до известна степен. PHP Debug добавя пълен дебъгер, базиран на Xdebug. в рамките на VS Code.
С него можете Задаване на точки на прекъсване, проверка на променливи, преминаване през кода стъпка по стъпка и анализирайте стека от повиквания. Първоначалната настройка изисква известно внимание, но след като бъде настроена, тя е важен инструмент.
Разширения за HTML, CSS и frontend разработка
Ако работите върху визуалната страна на мрежата, има няколко разширения, които Те трансформират VS Code в супер удобна среда за оформление и стилизиране..
Сървър на живо
Live Server монтира локален сървър за разработка с автоматично презарежданеЩракването върху „Публикуване“ отваря сайта ви в браузъра ви и обновява страницата всеки път, когато запазвате файл.
Той е идеален за Чист HTML, бързо прототипиране, статично оформление и прости front-end проектикъдето виждането на промените мигновено прави цялата разлика.
Поддръжка на 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 дефиницията на клас или ID от HTML кода, или в изскачащ прозорец, или чрез отваряне на съответния файл.
CSS Lint действа като linter за стилови таблици, грешки в маркирането или проблемни модели (дублиращи се свойства, неефективни правила и др.), което помага за поддържането на по-чист и по-лесно поддържаем CSS.
Автоматично преименуване на етикет и маркиране на съответстващ етикет
Етикетът за автоматично преименуване се грижи за нещо толкова просто, колкото и полезно: Когато промените отварящия таг на HTML или XML елемент, това актуализира и затварящия таг. автоматично, за да не се разсинхронизират.
Акценти на съвпадащия етикет отварящата/затварящата двойка на тага, където се намира курсорътТова е много практично в големи документи или такива с много вложени структури.
Преглед на изображението, оптимизатор на изображението и цветно маркиране
Преглед на изображението показва миниатюра на изображението, посочено в маршрут като задържите курсора върху него или в полето, което помага да се провери дали пътищата са правилни, без да се отваря файлът отделно.
Оптимизаторът на изображения позволява компресиране на изображения (със или без загуба) от самия редактор, оставяйки вашите активи готови за производство, без да се налага да използвате външни инструменти.
Цветното подчертаване подчертава цветови кодове (hex, RGB, HSL и др.) с действителния им цвят като фон или подчертаване, което значително улеснява работата със сложни палитри.
Допълнителни разширения за продуктивност, дизайн и персонализиране
В допълнение към чистите инструменти за разработка, има доста разширения, предназначени за за да направите ежедневието си по-комфортно, а редакторът ви по-приятен за окото.
Теми за VS Code
Темите пряко влияят на вашия визуален комфорт. Някои от най-популярните и препоръчителни са: Нюанси на лилаво, Материална тема, Нощна сова, Хоризонт, Ноктис или Монокай от равнината.
Всеки от тях има своя собствена индивидуалност: ярки тъмни схеми, палитри, предназначени да намалят напрежението на очите, светли и тъмни вариации или дори напълно монохромни теми за тези, които искат нулеви разсейвания.
Паун
Когато отваряте няколко проекта едновременно, е лесно да се объркате. Peacock ви позволява да променяте акцентния цвят на прозореца на VS Code за всеки проект.така че с един поглед да можете да разберете дали редактирате backend-а, frontend-а или конкретна микросървис.
Това е просто, но невероятно полезно разширение, ако Обикновено имате няколко отворени работни пространства едновременно..
Indent-rainbow и Rainbow скоби
цветовете на дъгата indent колони с отстъп с различни тонове, което помага да се види структурата на кода без усилие.
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 се превръща от обикновен и лек редактор в... Персонализирана среда за разработка, съобразена с вашия стек, вашия начин на работа и вашите проекти.Намирането на баланса между това да не го претоварвате и да имате само необходимите инструменти е ключът към постигане на скорост, комфорт и качество в ежедневното ви програмиране.
