12 KiB
Използване на редактор за код: Овладяване на VSCode.dev
Добре дошли!
Този урок ще ви преведе от основите до напредналото използване на VSCode.dev—мощният, уеб-базиран редактор за код. Ще научите как уверено да редактирате код, да управлявате проекти, да следите промените, да инсталирате разширения и да си сътрудничите като професионалист—всичко това директно от браузъра, без нужда от инсталация.
Цели на обучението
До края на този урок ще можете:
- Ефективно да използвате редактор за код за всеки проект, навсякъде
- Безпроблемно да следите работата си с вграден контрол на версиите
- Да персонализирате и подобрите работния си процес с настройки и разширения на редактора
Предпоставки
За да започнете, регистрирайте се за безплатен GitHub акаунт, който ви позволява да управлявате хранилища за код и да си сътрудничите с хора от цял свят. Ако все още нямате акаунт, създайте го тук.
Защо да използвате уеб-базиран редактор за код?
Редакторът за код като VSCode.dev е вашият команден център за писане, редактиране и управление на код. С интуитивен интерфейс, множество функции и незабавен достъп през браузъра, можете:
- Да редактирате проекти на всяко устройство
- Да избегнете неудобството от инсталации
- Да си сътрудничите и допринасяте незабавно
След като се почувствате комфортно с VSCode.dev, ще сте готови да се справите с задачи за кодиране от всяко място, по всяко време.
Започване с VSCode.dev
Отидете на VSCode.dev—без инсталация, без изтегляния. Влизането с GitHub отключва пълен достъп, включително синхронизиране на вашите настройки, разширения и хранилища. Ако бъдете подканени, свържете вашия GitHub акаунт.
След зареждане, вашето работно пространство ще изглежда така:
, ⚙️ (Настройки), файлове, контрол на източника и др.
- Странична лента: Променя контекста си според избраната икона от лентата за активност (по подразбиране е Explorer, за да показва файлове).
- Област за редактиране/код: Най-голямата секция вдясно—там, където всъщност редактирате и преглеждате кода.
Кликнете върху иконите, за да разгледате функциите, но се върнете към Explorer, за да запазите мястото си.
Отваряне на GitHub хранилище
Метод 1: От редактора
-
Отидете на VSCode.dev. Кликнете върху "Open Remote Repository."
.
 и натиснете Enter.
Ако е успешно, ще видите целия проект зареден и готов за редактиране!
Метод 2: Моментално чрез URL
Преобразувайте всеки URL адрес на GitHub хранилище, за да го отворите директно в VSCode.dev, като замените github.com с vscode.dev/github.
Пример:
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
Тази функция значително ускорява достъпа до ВСЕКИ проект.
Редактиране на файлове във вашия проект
След като хранилището ви е отворено, можете:
1. Създаване на нов файл
- В страничната лента Explorer, навигирайте до желаната папка или използвайте корена.
- Кликнете върху иконата ‘New file ...’.
- Назовете файла, натиснете Enter, и файлът ви ще се появи незабавно.
 и изтривания (червено).
![View changes](../images/working-tree.png промените, като кликнете върху+до файловете, за да ги подготвите за запис. - Отхвърляне на нежелани промени, като кликнете върху иконата за отмяна.
- Напишете ясен коментар за записа, след това кликнете върху отметката, за да запишете и изпратите.
За да се върнете към вашето хранилище в GitHub, изберете менюто с три линии в горния ляв ъгъл.
![Stage & commit changes](../images/edit-vscode.dev с разширения
Разширенията ви позволяват да добавяте езици, теми, дебъгери и инструменти за продуктивност към VSCode.dev—правейки живота ви като програмист по-лесен и по-забавен.
Преглед и управление на разширения
-
Кликнете върху иконата за разширения в лентата за активност.
-
Потърсете разширение в полето 'Search Extensions in Marketplace'.
![Extension details](../images/extension-details:
- Installed: Всички разширения, които сте добавили
- Popular: Любими в индустрията
- Recommended: Препоръчани за вашия работен процес
![View extensions](
1. Инсталиране на разширения
-
Въведете името на разширението в търсачката, кликнете върху него и прегледайте детайлите в редактора.
-
Натиснете синия бутон Install в страничната лента или в основната област за код.
![Install extensions](../images/install-extension 2. Персонализиране на разширения
-
Намерете инсталираното разширение.
-
Кликнете върху иконата на зъбно колело → изберете Extension Settings, за да настроите поведението според вашите предпочитания.
![Modify extension settings](../images/extension-settings 3. Управление на разширения Можете:
-
Disable: Временно да изключите разширение, като го запазите инсталирано
-
Uninstall: Да го премахнете окончателно, ако вече не ви е необходимо
Намерете разширението, натиснете иконата на зъбно колело и изберете ‘Disable’ или ‘Uninstall,’ или използвайте сините бутони в областта за код.
Задача
Тествайте уменията си: Създайте уебсайт за резюме, използвайки vscode.dev
Допълнително проучване и самостоятелно обучение
- Разгледайте подробно официалната документация за VSCode Web.
- Изследвайте напреднали функции на работното пространство, клавишни комбинации и настройки.
Сега сте готови да пишете код, да създавате и да си сътрудничите—от всяко място, на всяко устройство, използвайки VSCode.dev!
Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.