18 KiB
Използване на редактор за код
Този урок обхваща основите на използването на VSCode.dev, уеб-базиран редактор за код, за да можете да правите промени в кода си и да допринасяте към проект, без да инсталирате нищо на компютъра си.
Цели на обучението
В този урок ще научите как да:
- Използвате редактор за код в проект с код
- Следите промените с контрол на версиите
- Персонализирате редактора за разработка
Предпоставки
Преди да започнете, ще трябва да създадете акаунт в GitHub. Отидете на GitHub и създайте акаунт, ако все още нямате такъв.
Въведение
Редакторът за код е основен инструмент за писане на програми и сътрудничество по съществуващи проекти с код. След като разберете основите на редактора и как да използвате неговите функции, ще можете да ги прилагате при писане на код.
Започване с VSCode.dev
VSCode.dev е редактор за код в уеб. Не е необходимо да инсталирате нищо, за да го използвате – просто го отворете като всеки друг уебсайт. За да започнете с редактора, отворете следния линк: https://vscode.dev. Ако не сте влезли в GitHub, следвайте указанията, за да влезете или да създадете нов акаунт и след това да влезете.
След като се зареди, трябва да изглежда подобно на този образ:
Има три основни секции, започвайки от най-ляво и преминавайки надясно:
- Лентата за активност, която включва някои икони, като лупа 🔎, зъбно колело ⚙️ и няколко други.
- Разширената лента за активност, която по подразбиране е Explorer, наречена странична лента.
- И накрая, зоната за код вдясно.
Кликнете върху всяка от иконите, за да покажете различно меню. След като приключите, кликнете върху Explorer, за да се върнете там, откъдето сте започнали.
Когато започнете да създавате код или да модифицирате съществуващ код, това ще се случи в най-голямата зона вдясно. Ще използвате тази зона и за визуализиране на съществуващ код, което ще направите следващо.
Отваряне на 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 в разширената лента за активност. Това ще отвори 'Работно дърво', за да визуализирате промените, които сте направили във файла. Червеното показва премахване от проекта, докато зеленото означава добавяне.
Ако сте доволни от промените, които сте направили, задръжте курсора върху папката Changes и кликнете върху бутона +, за да подготвите промените. Подготовката означава просто да подготвите промените си за комитване към GitHub.
Ако обаче не сте доволни от някои промени и искате да ги отмените, задръжте курсора върху папката Changes и изберете иконата undo.
След това напишете commit message (Описание на промяната, която сте направили в проекта), кликнете върху иконата check, за да комитнете и изпратите промените си.
След като приключите с работата по проекта си, изберете иконата hamburger menu в горния ляв ъгъл, за да се върнете към хранилището на github.com.
Използване на разширения
Инсталирането на разширения в VSCode ви позволява да добавяте нови функции и опции за персонализирана среда за разработка в редактора си, за да подобрите работния си процес. Тези разширения също ви помагат да добавите поддръжка за множество програмни езици и често са или общи разширения, или базирани на език.
За да разгледате списъка с всички налични разширения, кликнете върху иконата Extensions на лентата за активност и започнете да пишете името на разширението в текстовото поле, обозначено 'Search Extensions in Marketplace'.
Ще видите списък с разширения, всяко от които съдържа името на разширението, името на издателя, едно изречение описание, броя на изтеглянията и оценка със звезди.
Можете също да видите всички предварително инсталирани разширения, като разширите папката Installed, популярни разширения, използвани от повечето разработчици, в папката Popular и препоръчани разширения за вас, или от потребители в същото работно пространство, или въз основа на наскоро отворените ви файлове, в папката Recommended.
1. Инсталиране на разширения
За да инсталирате разширение, напишете името на разширението в полето за търсене и кликнете върху него, за да видите допълнителна информация за разширението в зоната за код, след като се появи в разширената лента за активност.
Можете или да кликнете върху синия бутон за инсталиране в разширената лента за активност, за да го инсталирате, или да използвате бутона за инсталиране, който се появява в зоната за код, след като изберете разширението, за да заредите допълнителна информация.
2. Персонализиране на разширения
След като инсталирате разширението, може да се наложи да модифицирате неговото поведение и да го персонализирате според вашите предпочитания. За да направите това, изберете иконата Extensions, и този път вашето разширение ще се появи в папката Installed, кликнете върху Gear icon и навигирайте до Extensions Setting.
3. Управление на разширения
След като инсталирате и използвате разширението си, vscode.dev предлага опции за управление на разширението според различни нужди. Например, можете да изберете да:
-
Деактивирате: (Можете временно да деактивирате разширение, когато вече не ви е необходимо, но не искате да го деинсталирате напълно)
Изберете инсталираното разширение в разширената лента за активност > кликнете върху иконата Gear > изберете 'Disable' или 'Disable (Workspace)' ИЛИ Отворете разширението в зоната за код и кликнете върху синия бутон Disable.
-
Деинсталирате: Изберете инсталираното разширение в разширената лента за активност > кликнете върху иконата Gear > изберете 'Uninstall' ИЛИ Отворете разширението в зоната за код и кликнете върху синия бутон Uninstall.
Задача
Създайте уебсайт за автобиография, използвайки vscode.dev
Преглед и самостоятелно обучение
Прочетете повече за VSCode.dev и някои от неговите други функции.
Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.