Ако програмирате свакодневно, знаћете да добро подешен едитор прави разлику између продуктивног дана и фестивала фрустрација. Visual Studio Code је постао референтни едитор Захваљујући својим перформансама, систему проширења и огромној заједници која стално ствара нове алате.
Права магија VS Code-а не лежи само у основном едитору, већ у његовом екосистему. Стотине екстензија додају напредно аутоматско довршавање, линтере, теме, локалне сервере, отклањање грешака, иконе, Гит интеграцију, вештачку интелигенцију и још много тога.У овом водичу ћете пронаћи веома комплетну колекцију препоручених екстензија: од оних основних за било који језик, до оних специфичних за 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 у мацОС-у). Одатле, претражите по имену или кључној речи. екстензију која вас занима.
Када пронађете занимљиво проширење, проверите његов информативни лист: Број преузимања, рецензија, компатибилности и снимака екранаТо ће вам дати добру индикацију да ли се исплати инсталирати или не.
Да бисте завршили процес, једноставно кликните на дугме за инсталацију. Већина екстензија се активира тренутноНеки захтевају поновно учитавање прозора едитора, а некима је потребна додатна конфигурација (на пример, они који зависе од спољних алата као што су ESLint, PHP Debug са Xdebug-ом, итд.).
Неопходна општа проширења за сваки пројекат
Постоји скуп екстензија које би практично свако требало да има инсталиране, без обзира на језик или стек који користи. Фокусирани су на продуктивност, форматирање, сарадњу, контролу верзија и корисничко искуство..
Лепше
Лепше је де фацто стандардни форматер кода У свету Јаваскрипта и многих других језика, он аутоматски преписује ваш код пратећи добро дефинисана правила стила.
Може да форматира Јаваскрипт, ТајпСкрипт, ЈСX, ТСX, ЈСОН, ХТМЛ, ЦСС, СЦСС, Лесс, ЈАМЛ, ГрапКЛ, Маркдаун, Вју, Ангулар и још много тога. Идеја је да ће дискусије о томе да ли користити једноструке или двоструке наводнике, тачка-зарез или не, где користити заграде итд., нестати јер Читав пројекат прати исту конвенцију.
Можете користити подразумевана подешавања или креирати сопствена правила користећи типове датотека .prettierrcУобичајена ствар је активирање форматирање приликом чувањатако да сваки пут када притиснете Ctrl+S код буде чист и конзистентан.
ЕСЛинт
Док се Претјер фокусира на аспект кода, ESLint се фокусира на квалитет и добре праксеТо је најшире коришћени линтер у модерним JavaScript и TypeScript пројектима.
ESLint екстензија за VS Code омогућава да се анализа извршава у позадини док куцате. Приказује грешке и упозорења директно у коду.истицање проблематичних линија и нуђење брзих предлога за њихово исправљање.
Можете користити широко коришћене конфигурације као што су Airbnb, Standard или званичне препоруке ESLint-аили дефинишите сопствена правила да бисте их прилагодили пројекту. Такође је компатибилан са додацима за фрејмворке као што су React, Vue или Node.js.
Беттер Цомментс
У великим пројектима, коментари на крају испадну као збрка коју је тешко пратити. Бољи коментари вам омогућавају да визуелно категоризујете коментаре користећи боје према префиксу који користите.
На пример, можете имати коментаре типа СВА, УПОЗОРЕЊЕ, ВАЖНО, ПИТАЊЕитд., сваки са својим стилом. Ово знатно олакшава проналажење задатака који чекају на извршење, критичних напомена или кључних објашњења приликом прегледа кода.
Провера правописа кода
Иако може изгледати као мањи детаљ, Правописне грешке у именима променљивих, коментарима или тексту интерфејса изгледају прилично лоше.Провера правописа кода делује као провера правописа за код.
Анализира идентификаторе, стрингове и коментаре и Означите сумњиве речиНуди предлоге за њихово исправљање. Може се користити са више језика и веома је користан ако пишете документацију или текст видљив корисницима унутар кода.
Грешка сочива
VS Code већ приказује грешке и упозорења, али понекад она остану непримећена. Грешка објектива их чини немогућим занемарити приказивање дијагностичких информација директно поред дотичне линије и на маргини уређивача.
На први поглед видећете где су грешке концентрисане у датотецибез потребе за отварањем панела са проблемима. У великим пројектима са много линтер-а и алата за анализу, то је од велике помоћи у осигуравању да ништа није пропуштено.
цодеруннер
Ако волите да пробате мали фрагменти кода без састављања целог пројектаCode Runner је веома практичан. Омогућава вам да покрећете код из више језика (JavaScript, Python, C, C++, Java, PHP и других) директно из едитора.
Можете покренути тренутну датотеку или само изабрани блок, погледајте излаз на интегрисаном панелу или у самом VS Code терминалу и прилагодите команде које се користе за сваки језик.
Path Intellisense
Када радите са много ресурса, увоза и релативних путања, њихово ручно писање је загарантована грешка. Путања помоћу Intellisense-а се аутоматски довршава путем датотека и фасцикли приликом писања стрингова са путањама.
Ради на Увоз JavaScript/TypeScript-а, CSS референце, HTML путање слика И генерално у било ком контексту где VS Code детектује да куцате руту. То штеди време и избегава досадне грешке у куцању.
vscode-icons, тема икона за материјал и други пакети икона
Иконе нису само ствар естетике. Добра тема икона вам омогућава да одмах идентификујете тип датотеке. само гледањем у прегледач.
vscode-icons, тема икона за материјал, одличне иконе за VSCode или одређене теме попут VSCode једноставније иконе са Angular-ом Они пружају прилагођене иконе за језике, фрејмворке и конфигурационе датотеке (Angular, Docker, env, итд.).
Избор једног или другог је ствар укуса, али Било који од њих значајно побољшава читљивост стабла датотекапосебно код појединачних јединица или великих пројеката.
ГитЛенс
ГитЛенс је вероватно Најмоћније проширење за рад са Гитом из VS Code-аПодиже контролу верзија на виши ниво потпуном интеграцијом историје унутар уређивача.
Омогућава вам да видите ко је променио сваки ред и када (кривац), историја датотеке, упоређивање ревизија, истраживање грана и ознакаи још много тога. Такође приказује контекстуалне напомене на коду са информацијама о последњем commit-у.
Ако радите у тиму, дивно је разумети разлоге за одређене промене, прегледати регресије и извршити преглед кода без напуштања уредника.
Ливе Схаре
За програмирање у пару или менторство на даљину, Дељење уживо је једна од најбољих ствари које постоје.Омогућава вам да делите своју VS Code сесију са другом особом у реалном времену.
Обоје можете Уредите исту датотеку, заједно отклањајте грешке, делите терминале и локалне сервере па чак и отворити интегрисани чет. Савршено је за решавање сложених грешака или подучавање некога како да ради на одређеном пројекту.
Посебна проширења за JavaScript и TypeScript
Екосистем JavaScript и TypeScript је један од најразмаженијих од стране VS Code-а. Ако радите у фронтенд-у, бекенд-у са Ноде-ом или развоју целог стека, ова проширења ће вам уштедети много сати..
Исечци JavaScript (ES6) кода
Писање истих структура изнова и изнова је мука. Исечци JavaScript (ES6) кода додају мноштво исечака за модерну синтаксу од ЈС и ТС.
Са кратким скраћеницама можете генерисати функције стрелица, класе, увоз, 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 (функционалне компоненте, основни увоз итд.), идеално ако желите нешто мање преоптерећујуће, али подједнако продуктивно.
Јаваскрипт и Типскрипт ноћно
Ако желите да будете у току са језичким дешавањима, Јаваскрипт и Типскрипт Најтли вам дају приступ ноћној верзији Типскрипт језичког сервера. који користи VS код.
То значи нове функције, побољшања перформанси и исправке грешака пре него што стигну до стабилне верзије – идеално за тестирајте нове језичке функције и откријте будуће промене што може утицати на ваш код.
Пајтон екстензије
VS Code, са правим екстензијама, постаје Врхунски Пајтон IDEАко се бавите развојем бекенда, науком о подацима или аутоматизацијом помоћу овог језика, ово је готово обавезно.
Пајтон (званично проширење)
Званично Мајкрософтово проширење за Пајтон је камен темељац за рад са овим језиком у VS Code-уБез тога, подршка је веома ограничена.
Доприноси IntelliSense, дебаговање, тестирање, интеграција са виртуелним окружењима, форматирање кода (Black, autopep8), линтовање са Pylint или Flake8 и многе друге неопходне функције.
Пајланс
Пајланс је напредни језички сервер за Пајтон што додатно побољшава званично проширење. Пружа брзу статичку анализу, побољшано аутоматско довршавање и веома детаљну проверу типова.
Ако користите анотације типова или желите да откријете грешке пре покретања кода, Pylance значајно побољшава искуство развоја. у средњим и великим пројектима.
Јупитер
Јупитер екстензија интегрише .ipynb датотеке за свеске директно у VS Code-уМожете креирати, отварати и покретати ћелије баш као у класичном Јупитеру, али из уређивача.
Посебно је корисно за анализа података, машинско учење, визуелизација и брза израда прототипова, комбинујући најбоље од свезака са предностима потпуно развијеног уређивача.
Генератор документације у Пајтону
Интерна документација у Пајтону је обично у документационим низовима (docstrings). Генератор документационих стрингова у Пајтону аутоматски креира скелет документационог стринга за функције, класе и методе.
Када укуцате почетне наводнике, екстензија генерише поља за опис, параметре и повратну вредност на основу потписа функције, што подстиче добро документован код без толике муке.
PHP и backend екстензије
PHP остаје главни ослонац у веб бекенду, а VS Code има веома зрео екосистем екстензија за овај језик.
PHP IntelliSense и Intelephense
PHP IntelliSense је био једно од првих озбиљних проширења за аутоматско довршавање за PHP. Нуди Предлози за функције, класе, методе, именске просторе и променљиве, поред основне навигације до дефиниција.
PHP Intelephense иде корак даље: Веома брза и дубинска анализа, рефакторисање, истраживање референци, ажурирана подршка за PHP 7 и 8 и више. Чак и бесплатна верзија већ надмашује већину алтернатива.
PHP DocBlocker
Да би се одржала пристојна документација у великим пројектима, PHP DocBlocker генерише DocBlock коментаре комплетно за функције, методе, класе и својства.
Писмено / ** на функцији, аутоматски попуњава параметре и тип повратка, што подстиче Правилно документујте интерне и јавне API-је.
Саставити
Композитор је стандард за управљање зависностима у PHP-у. Одговарајуће проширење се интегрише са VS Code-ом за покрените уобичајене команде (инсталирајте, ажурирајте, захтевајте) из палете, поред тога што нуди аутоматско довршавање и истицање у цомпосер.јсон.
Ово га чини много удобнијим управљање библиотекама, оквирима и скриптама без сталног пребацивања између едитора и терминала.
ПХП отклањање грешака
Дебаговање PHP-а помоћу var_dump има своју драж до извесне мере. PHP Debug додаје комплетан дебагер базиран на Xdebug-у. унутар VS кода.
Са њим можеш Поставите тачке прекида, прегледајте променљиве, прођите кроз код и анализирајте стек позива. Почетно подешавање захтева извесну пажњу, али када се једном подеси, то је неопходан алат.
Екстензије за HTML, CSS и развој фронтенда
Ако радите на визуелној страни веба, постоји неколико екстензија које Они трансформишу VS Code у супер удобно окружење за распоред и стилизовање..
Ливе Сервер
Живи сервер монтира локални развојни сервер са аутоматским поновним поновним поновним поновљавањемКликом на „Објави“ отвара се ваш сајт у прегледачу и освежава страница сваки пут када сачувате датотеку.
Идеално је за Чисти HTML, брзо прототипирање, статички распоред и једноставни фронт-енд пројектигде тренутна видљивост промена прави сву разлику.
ХТМЛ ЦСС подршка
Ово проширење побољшава интеграцију између HTML-а и CSS-а. Нуди интелигентно аутоматско довршавање класа и ИД-ова дефинисаних у вашим стилским листовима. када пишете HTML и обрнуто.
Такође предлаже CSS својства (укључујући префикси добављача) и одлично функционише у комбинацији са Еметом, што знатно убрзава ток рада на распореду.
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 делује као линтер за стилске листове, грешке у обележавању или проблематични обрасци (дуплирана својства, неефикасна правила итд.), помажући у одржавању чистијег и лакшег CSS-а.
Аутоматско преименовање ознаке и истицање одговарајуће ознаке
Ознака за аутоматско преименовање брине о нечему једноставном колико и корисном: Када промените почетну ознаку HTML или XML елемента, ажурира се и завршна ознака. аутоматски како не би постали несинхронизовани.
Истакните подударање ознака почетни/затварајући пар ознаке где се налази курсорОво је веома практично код великих докумената или оних са јако угнежђеним структурама.
Преглед слике, оптимизатор слике и истицање боја
Преглед слике се приказује сличица слике на коју се позива рута преласком курсора преко њега или на маргину, што помаже да се провери да ли су путање исправне без отварања датотеке засебно.
Оптимизатор слика омогућава компресујте слике (са губицима или без губитака) из самог едитора, остављајући вашу имовину спремном за производњу без коришћења спољних алата.
Истицање бојом истиче кодови боја (хексакуларна, RGB, HSL, итд.) са њиховом стварном бојом као позадином или подвученом линијом, што знатно олакшава рад са сложеним палетама.
Додатна проширења за продуктивност, дизајн и прилагођавање
Поред чистих алата за развој, постоји и доста екстензија дизајнираних за да би ваш свакодневни живот био удобнији, а ваш уредник пријатнији оку.
Теме за VS Code
Теме директно утичу на вашу визуелну удобност. Неке од најпопуларнијих и препоручених су: Нијансе љубичасте, Материјална тема, Ноћна сова, Хоризонт, Ноктис или Флатланд Монокаи.
Свака од њих има своју личност: светле тамне шеме, палете дизајниране да смање напрезање очију, светле и тамне варијације или чак потпуно монохроматске теме за оне који желе нула ометања.
Паун
Када отворите неколико пројеката одједном, лако се можете збунити. Пеацоцк вам омогућава да промените боју акцента прозора VS Code по пројектутако да на први поглед можете видети да ли уређујете бекенд, фронтенд или одређени микросервис.
То је једноставно, али невероватно корисно проширење ако Обично имате неколико радних простора отворених истовремено..
Увлачење дуге и дугине заграде
увлачење-дугине боје увлачење колона са различитим тоновима, што помаже да се структура кода види без напора.
Дугине заграде раде нешто слично са заграде, угласте заграде и вештачке витицедодељивање различите боје сваком нивоу угнежђења. Између њих двоје, проналажење недостајуће заграде или лоше увученог блока постаје много лакше.
Дрво задатака
Ако користите коментаре попут TODO, FIXME или BUG, Todo Tree скенира ваш радни простор и креира контролну таблу са свим овим напоменама организовано у облику дрвета.
Одатле можете директно се крећите до сваке тачке у коду где постоје задаци који чекају на извршење или означени проблеми, претварајући TODO-ове у неку врсту мини менаџера задатака повезаног са спремиштем.
GitHub Copilot, Tabnine и ChatGPT/AI
Алати за аутоматско довршавање засновани на вештачкој интелигенцији су снажно ушли. GitHub Copilot и Tabnine предлажу линије или целе блокове кода на основу контекста, претходних тестова или коментара.
Екстензије које интегришу ChatGPT или сличне моделе у VS Code-у омогућавају захтевајте објашњења кода, рефакторишите функције или генеришите тестове без напуштања уређивача. Потребни су им API кључеви, али као развојни копилот су веома моћни ако се користе разумно.
Markdown Све у једном и побољшани преглед Markdown-а
Ако документујете пројекте или пишете техничке постове, Markdown All in One додаје пречице, побољшани преглед, генерисање индекса и друге погодности да ради са Маркдауном.
У комбинацији са екстензијама за преглед у стилу GitHub-а, добијате искуство писања веома слично ономе како ће ваши README-ови или чланци касније изгледати на мрежи
Докер, удаљени SSH и удаљени WSL
У професионалним окружењима је веома уобичајено радити са контејнерима или удаљеним машинама. Званично Докер проширење вам омогућава да управљате сликама, контејнерима, мрежама и запреминама. са бочне траке, поред олакшавања отклањања грешака унутар контејнера.
Удаљени SSH и удаљени WSL вам омогућавају Отварање удаљених фасцикли или Linux окружења (WSL) као да су локални пројекти, извршавајући команде и отклањајући грешке одмах на лицу места, али уз погодности VS Code интерфејса.
Са свим овим добро одабраним и конфигурисаним екстензијама, Visual Studio Code прелази из једноставног лаганог едитора у Прилагођено развојно окружење, прилагођено вашем стеку, вашем начину рада и вашим пројектима.Проналажење равнотеже између тога да га не преоптеретите и да имате само алате који су вам потребни је кључ за постизање брзине, удобности и квалитета у вашем свакодневном програмирању.
