Skip to content

README.md

Latest commit

 

History

History
175 lines (107 loc) · 12 KB

README.md

File metadata and controls

175 lines (107 loc) · 12 KB
Raw

Използване на редактор за код: Овладяване на VSCode.dev

Добре дошли!
Този урок ще ви преведе от основите до напредналото използване на VSCode.dev—мощният, уеб-базиран редактор за код. Ще научите как уверено да редактирате код, да управлявате проекти, да следите промените, да инсталирате разширения и да си сътрудничите като професионалист—всичко това директно от браузъра, без нужда от инсталация.

Цели на обучението

До края на този урок ще можете:

  • Ефективно да използвате редактор за код за всеки проект, навсякъде
  • Безпроблемно да следите работата си с вграден контрол на версиите
  • Да персонализирате и подобрите работния си процес с настройки и разширения на редактора

Предпоставки

За да започнете, регистрирайте се за безплатен GitHub акаунт, който ви позволява да управлявате хранилища за код и да си сътрудничите с хора от цял свят. Ако все още нямате акаунт, създайте го тук.

Защо да използвате уеб-базиран редактор за код?

Редакторът за код като VSCode.dev е вашият команден център за писане, редактиране и управление на код. С интуитивен интерфейс, множество функции и незабавен достъп през браузъра, можете:

  • Да редактирате проекти на всяко устройство
  • Да избегнете неудобството от инсталации
  • Да си сътрудничите и допринасяте незабавно

След като се почувствате комфортно с VSCode.dev, ще сте готови да се справите с задачи за кодиране от всяко място, по всяко време.

Започване с VSCode.dev

Отидете на VSCode.dev—без инсталация, без изтегляния. Влизането с GitHub отключва пълен достъп, включително синхронизиране на вашите настройки, разширения и хранилища. Ако бъдете подканени, свържете вашия GitHub акаунт.

След зареждане, вашето работно пространство ще изглежда така:

![Default VSCode.dev](../images/default-vscode-dev има три основни секции отляво надясно:

  • Лента за активност: Иконите като 🔎 (Търсене), ⚙️ (Настройки), файлове, контрол на източника и др.
  • Странична лента: Променя контекста си според избраната икона от лентата за активност (по подразбиране е Explorer, за да показва файлове).
  • Област за редактиране/код: Най-голямата секция вдясно—там, където всъщност редактирате и преглеждате кода.

Кликнете върху иконите, за да разгледате функциите, но се върнете към Explorer, за да запазите мястото си.

Отваряне на GitHub хранилище

Метод 1: От редактора

  1. Отидете на VSCode.dev. Кликнете върху "Open Remote Repository."

    ![Open remote repository](../../../../8-code-editor/images/open-remote-repository използвайте Command Palette (Ctrl-Shift-P или Cmd-Shift-P на Mac).

    ![Palette Menu](../images/palette-menu.pngopen remote repository.”

    • Изберете опцията.
    • Поставете URL адреса на вашето GitHub хранилище (например, https://github.com/microsoft/Web-Dev-For-Beginners) и натиснете 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, и файлът ви ще се появи незабавно.

![Create a new file](../images/create-new-file 2. Редактиране и запазване на файлове

  • Кликнете върху файл в Explorer, за да го отворите в областта за код.
  • Направете необходимите промени.
  • VSCode.dev автоматично запазва вашите промени, но можете да натиснете Ctrl+S за ръчно запазване.

![Edit a file](../images/edit-a-file.png. Следене и записване на промени с контрол на версиите

VSCode.dev има интегриран Git контрол на версиите!

  • Кликнете върху иконата 'Source Control', за да видите всички направени промени.
  • Файловете в папката Changes показват добавки (зелено) и изтривания (червено).
    ![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.dev!

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.