17 KiB
Коришћење уређивача кода
Ова лекција покрива основе коришћења VSCode.dev, веб-базираног уређивача кода, како бисте могли да правите измене у свом коду и доприносите пројекту без инсталирања било чега на вашем рачунару.
Циљеви учења
У овој лекцији ћете научити како да:
- Користите уређивач кода у пројекту
- Пратите измене помоћу контроле верзија
- Прилагодите уређивач за развој
Предуслови
Пре него што почнете, потребно је да направите налог на GitHub. Идите на GitHub и направите налог ако га већ немате.
Увод
Уређивач кода је основни алат за писање програма и сарадњу на постојећим пројектима. Када разумете основе уређивача и како да користите његове функције, моћи ћете да их примените приликом писања кода.
Почетак рада са VSCode.dev
VSCode.dev је уређивач кода на вебу. Не морате ништа да инсталирате да бисте га користили, баш као када отварате било који други веб сајт. Да бисте започели, отворите следећи линк: https://vscode.dev. Ако нисте пријављени на GitHub, пратите упутства да се пријавите или направите нови налог, а затим се пријавите.
Када се учита, требало би да изгледа слично овој слици:
Постоје три главна дела, почевши од крајње леве стране и крећући се удесно:
- Трака активности која укључује неке иконе, као што су лупа 🔎, зупчаник ⚙️ и неколико других
- Проширена трака активности која подразумевано приказује Истраживач, назван бочна трака
- И на крају, област за код са десне стране.
Кликните на сваку од икона да бисте приказали различите меније. Када завршите, кликните на Истраживач да бисте се вратили на почетну позицију.
Када почнете да креирате код или мењате постојећи код, то ће се дешавати у највећој области са десне стране. Ову област ћете користити и за визуализацију постојећег кода, што ћете урадити у наставку.
Отварање GitHub репозиторијума
Прво што вам је потребно је да отворите GitHub репозиторијум. Постоји више начина за отварање репозиторијума. У овом делу видећете два различита начина на која можете отворити репозиторијум и започети рад на изменама.
1. Коришћењем уређивача
Користите сам уређивач да отворите удаљени репозиторијум. Ако одете на VSCode.dev, видећете дугме "Open Remote Repository":
Можете користити и командну палету. Командна палета је поље за унос у које можете уписати било коју реч која је део команде или акције да бисте пронашли одговарајућу команду за извршење. Користите мени у горњем левом углу, затим изаберите View, а потом Command Palette, или користите следећу пречицу на тастатури: Ctrl-Shift-P (на MacOS-у би то било Command-Shift-P).
Када се мени отвори, упишите open remote repository, а затим изаберите прву опцију. Више репозиторијума у којима учествујете или које сте недавно отворили ће се приказати. Можете користити и пуну GitHub URL адресу да бисте изабрали један. Користите следећи URL и налепите га у поље:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Ако је успешно, видећете све датотеке за овај репозиторијум учитане у текстуалном уређивачу.
2. Коришћењем URL-а
Можете користити и URL директно да учитате репозиторијум. На пример, пуни URL за тренутни репозиторијум је https://github.com/microsoft/Web-Dev-For-Beginners, али можете заменити GitHub домен са VSCode.dev/github и директно учитати репозиторијум. Резултујући URL би био https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Уређивање датотека
Када отворите репозиторијум у прегледачу или на vscode.dev, следећи корак је да направите ажурирања или измене у пројекту.
1. Креирање нове датотеке
Можете креирати датотеку унутар постојећег фолдера или је креирати у коренском директоријуму/фолдеру. Да бисте креирали нову датотеку, отворите локацију/директоријум у који желите да сачувате датотеку и изаберите икону 'New file ...' на траци активности (лево), дајте јој име и притисните Enter.
2. Уређивање и чување датотеке у репозиторијуму
Коришћење vscode.dev је корисно када желите брзо да ажурирате свој пројекат без потребе за локалним учитавањем софтвера.
Да бисте ажурирали свој код, кликните на икону 'Explorer', која се такође налази на траци активности, да бисте видели датотеке и фолдере у репозиторијуму.
Изаберите датотеку да бисте је отворили у области за код, направите измене и сачувајте.
Када завршите са ажурирањем пројекта, изаберите икону source control која садржи све нове измене које сте направили у репозиторијуму.
Да бисте видели измене које сте направили у пројекту, изаберите датотеку(е) у фолдеру Changes на проширеној траци активности. Ово ће отворити 'Working Tree' где можете визуелно видети измене које сте направили у датотеци. Црвена боја означава изостављање у пројекту, док зелена означава додавање.
Ако сте задовољни изменама које сте направили, пређите мишем преко фолдера Changes и кликните на дугме + да бисте поставили измене. Постављање значи припрему ваших измена за њихово комитовање на GitHub.
Ако, међутим, нисте задовољни неким изменама и желите да их одбаците, пређите мишем преко фолдера Changes и изаберите икону undo.
Затим, упишите commit message (Опис измене коју сте направили у пројекту), кликните на икону check да бисте комитовали и послали своје измене.
Када завршите са радом на пројекту, изаберите икону hamburger menu у горњем левом углу да бисте се вратили на репозиторијум на github.com.
Коришћење екстензија
Инсталирање екстензија на VSCode омогућава вам да додате нове функције и опције за прилагођавање развојног окружења у вашем уређивачу како бисте побољшали свој радни ток. Ове екстензије такође помажу у додавању подршке за више програмских језика и често су или опште екстензије или екстензије засноване на језику.
Да бисте прегледали листу свих доступних екстензија, кликните на икону Extensions на траци активности и почните да куцате име екстензије у текстуално поље означено 'Search Extensions in Marketplace'.
Видећете листу екстензија, од којих свака садржи име екстензије, име издавача, једну реченицу описа, број преузимања и звездице за оцену.
Можете такође прегледати све претходно инсталиране екстензије проширивањем фолдера Installed, популарне екстензије које користи већина програмера у фолдеру Popular и препоручене екстензије за вас, било од стране корисника у истом радном простору или на основу недавно отворених датотека у фолдеру Recommended.
1. Инсталирање екстензија
Да бисте инсталирали екстензију, упишите име екстензије у поље за претрагу и кликните на њу да бисте видели додатне информације о екстензији у области за код када се појави на проширеној траци активности.
Можете кликнути на плаво дугме за инсталацију на проширеној траци активности да бисте инсталирали или користити дугме за инсталацију које се појављује у области за код када изаберете екстензију да учитате додатне информације.
2. Прилагођавање екстензија
Након инсталирања екстензије, можда ћете морати да модификујете њено понашање и прилагодите је на основу својих преференција. Да бисте то урадили, изаберите икону Extensions, и овог пута ваша екстензија ће се појавити у фолдеру Installed, кликните на икону зупчаника и идите на Extensions Setting.
3. Управљање екстензијама
Након инсталирања и коришћења екстензије, vscode.dev нуди опције за управљање вашом екстензијом на основу различитих потреба. На пример, можете изабрати да:
-
Онемогућите: (Привремено онемогућите екстензију када вам више није потребна, али не желите да је потпуно деинсталирате)
Изаберите инсталирану екстензију на проширеној траци активности > кликните на икону зупчаника > изаберите 'Disable' или 'Disable (Workspace)' ИЛИ Отворите екстензију у области за код и кликните на плаво дугме Disable.
-
Деинсталирате: Изаберите инсталирану екстензију на проширеној траци активности > кликните на икону зупчаника > изаберите 'Uninstall' ИЛИ Отворите екстензију у области за код и кликните на плаво дугме Uninstall.
Задатак
Направите веб-сајт за резиме користећи vscode.dev
Преглед и самостално учење
Прочитајте више о VSCode.dev и неким његовим другим функцијама.
Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако тежимо тачности, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква неспоразумевања или погрешна тумачења која могу произаћи из коришћења овог превода.