Главная » Техника

Настроить github visual studio code

Содержание
  1. Интеграция Git с Visual Studio Code
  2. Требования
  3. 1: Вкладка Source Control
  4. , и сохраните его.
  5. 2: Интерпретация индикаторов gutter
  6. . После этого вы увидите синюю вертикальную метку в желобе напротив измененной строки. Вертикальная синяя метка означает, что соответствующая строка кода была отредактирована.
  7. 3: Определение отличий между версиями файла
  8. 4: Работа с ветками
  9. 5: Работа с удаленными репозиториями
  10. 6: Установка расширений
  11. Git Blame
  12. Git History
  13. Git Lens
  14. Заключение
  15. Git, GitHub и Visual Studio. В помощь новичкам
  16. О чем:
  17. Внимание:
  18. Для кого:
  19. О тексте:
  20. Инструкция:
  21. Дополнительно:
  22. Working with GitHub in VS Code
  23. Getting started with GitHub Pull Requests and Issues
  24. Setting up a repository
  25. Cloning a repository
  26. Authenticating with an existing repository
  27. Editor integration
  28. Hovers
  29. Suggestions
  30. Pull requests
  31. Creating Pull Requests
  32. Reviewing
  33. Issues
  34. Creating issues
  35. Working on issues
  36. GitHub Repositories extension
  37. Opening a repository
  38. Switching branches
  39. Remote Explorer
  40. Create Pull Requests
  41. Virtual file system
  42. Continue Working on.

Интеграция Git с Visual Studio Code

Интеграция Git с Visual Studio Code

В веб-разработке Visual Studio Code (VS Code) стал одним из самых популярных редакторов. Он приобрел такую популярность благодаря множеству встроенных функций, среди которых есть и интеграция системы управления версиями Git. Использование Git через VS Code может сделать ваш рабочий процесс более эффективным и надежным.

В этом мануале мы расскажем, как использовать интеграцию системы управления версиями Git в VS Code.

Требования

  • Установка Git (инструкции вы найдете в мануале Разработка проектов с открытым исходным кодом: начало работы с Git).
  • Последняя версия Visual Studio Code.

1: Вкладка Source Control

Первое, что вам нужно сделать, чтобы ознакомиться с преимуществами интеграции системы управления версиями, – это инициализировать проект как репозиторий Git.

Читайте также:  Как настроить grandstream dp750 ростелеком

Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его с помощью сочетания клавиш CTRL+` (в Linux, macOS или Windows).

В терминале создайте каталог для нового проекта и перейдите в него:

Затем создайте репозиторий Git:

Есть и другой способ сделать это в Visual Studio Code: в левой панели нужно открыть вкладку Source Control (значок выглядит как развилка). Затем выберите Open Folder – и в текущем каталоге откроется файловый менеджер. Выберите нужный каталог проекта и нажмите Open.

Затем выберите Initialize Repository.

После этого проверьте свою файловую систему, и вы увидите, что она включает каталог .git. Чтобы убедиться в этом, с помощью терминала перейдите в каталог проекта и запросите все его содержимое:

Вы увидите созданный каталог .git:

После инициализации репозитория создайте файл index.html.

После этого в панели Source Control вы увидите новый файл с буквой U рядом с ним. Символ U означает, что файл неотслеживаемый (untracked) – этот новый или отредактированный файл еще не добавлен в репозиторий.

Теперь вы можете нажать кнопку с плюсом (+) рядом с файлом index.html, чтобы отслеживать файл по репозиторию.

После добавления файла в репозиторий буква U рядом с файлом изменится на A. Символ A (added) представляет новый файл, который был добавлен в репозиторий.

Чтобы зафиксировать изменения, введите сообщение о коммите в поле ввода в верхней части панели Source Control. Затем кликните значок check, чтобы отправить коммит.

После этого вы увидите, что у вас нет изменений, ожидающих проверки и сохранения.

Затем добавьте немного кода в файл index.html.

Для создания скелета HTML5 в VS Code можно использовать плагин Emmet, нажав клавиши !+Tab. Добавьте что-нибудь в , например, заголовок

, и сохраните его.

В панели Source Control вы увидите, что ваш файл изменился. Рядом с ним будет отображаться буква M (modified), которая указывает на отредактированный файл

Это изменение можно также сохранить через коммит.

Теперь, когда вы знакомы с панелью Source Control, мы можем переходить к индикаторам gutter.

2: Интерпретация индикаторов gutter

На этом этапе мы рассмотрим индикаторы gutter, или индикаторы желоба. Желоб – это узкая область, которая находится между индикатором строк и кодом.

Если ранее вы использовали сворачивание кода, то знаете, что значки разворачивания и сворачивания кода расположены именно в области желоба.

Начнем с внесения небольших изменений в файл index.html – можно, например, изменить контент в теге

. После этого вы увидите синюю вертикальную метку в желобе напротив измененной строки. Вертикальная синяя метка означает, что соответствующая строка кода была отредактирована.

Теперь попробуйте удалить одну из строк в разделе вашего файла index.html. Обратите внимание на красный треугольник в желобе. Красный треугольник указывает на строку или группу строк, которые были удалены.

Теперь перейдите к нижней части раздела и добавьте туда новую строку кода. Обратите внимание на вертикальную зеленую полосу – она указывает на добавленную строку кода.

3: Определение отличий между версиями файла

VS Code также может сравнивать версии кода. Как правило, для этого нужно загружать специальный инструмент, но в VS Code есть встроенная функция, и она поможет вам работать более эффективно.

Чтобы просмотреть отличия между версиями файла, откройте панель управления исходным кодом Source Control и дважды кликните на измененный файл. В нашем случае нужно дважды кликнуть на файл index.html. На экране появится сравнение текущей версии файла (слева) и его предыдущей версии (справа).

4: Работа с ветками

В нижней панели вы можете создавать и переключать ветки. Если вы посмотрите в самый нижний левый угол редактора, вы увидите значок управления версиями (он выглядит как развилка), рядом с которым будет указано имя текущей рабочей ветки (например, master).

Чтобы создать нову ветку, кликните на имя текущей ветки. На экране должно появиться меню, дающее вам возможность создать новую ветку.

Для примера создайте новую ветку под названием test.

Теперь внесите изменения в свой файл index.html, чтобы обозначить, что вы находитесь в новой ветке: например добавьте текст «this is the new test branch».

Сохраните эти изменения в ветке test с помощью коммита. Затем снова кликните на имя ветки в левом нижнем углу, чтобы вернуться к ветке master.

После переключения на ветку master вы заметите, что текст «this is the new test branch», сохраненный в ветке test, не присутствует в вашем файле.

5: Работа с удаленными репозиториями

В этом руководстве мы не будем подробно останавливаться на удаленных репозиториях.

С помощью панели управления Source Control у вас есть доступ к удаленным репозиториям. Если вы работали с такими репозиториями ранее, вы найдете здесь знакомые команды, такие как pull, sync, publish, stash и т.п.

6: Установка расширений

VS Code не только предоставляет множество встроенных функций для Git, но также позволяет установить несколько очень популярных расширений для расширения набора функций.

Git Blame

Расширение Git Blame предоставляет возможность просматривать информацию состояния для текущей выбранной строки.

Название этого расширения может прозвучать пугающе, но Git Blame не предполагает, что вы будете буквально винить или стыдить кого-то в изменении кода: практичность расширения заключается в том, что оно позволяет выяснить, кому можно задать вопросы по определенным фрагментам кода.

Это расширение выводит в нижней панели инструментов небольшое сообщение, относящееся к текущей строке кода, из которого вы можете узнать, кто и когда внес изменение.

Git History

Просматривать текущие изменения, отслеживать разницу между версиями и управлять ветками можно и с помощью встроенных функций VS Code, однако они не предоставляют подробной истории Git. Расширение Git History решает эту проблему.

Это расширение позволяет тщательно изучить историю файла, автора, ветки. Чтобы активировать окно Git History, нужно кликнуть на файл правой кнопкой мыши и выбрать Git: View File History.

Кроме того, вы можете сравнивать ветки и коммиты, создавать ветки из коммитов и многое другое.

Git Lens

Git Lens расширяет возможности Git, встроенные в Visual Studio Code. Этот плагин помогает с первого взгляда определить авторство кода с помощью аннотаций Git blame и линзы кода, перемещаться по репозиториям Git и исследовать их, получать ценную информацию с помощью команд сравнения и многое другое.

Расширение Git Lens – одно из самых популярных и мощных. В большинстве случаев его функциональность может заменить каждое из двух предыдущих расширений.

Получить информацию, как в Git Blame, можно справа от строки, над которой вы сейчас работаете: над ней появляется небольшое сообщение, из которого становится известно, кто и когда внес изменение и отправил коммит. При наведении курсора на это сообщение появляется дополнительная информация: изменение кода, временная метка времени и т.п.

Это расширение предоставляет множество функций, позволяющих получить историю Git, в том числе легкий доступ к множеству опций (отображение истории файлов, просмотр различий между версиями и многое другое). Чтобы открыть эти параметры, вы можете кликнуть на текст в строке состояния (он содержит информацию об авторе, который редактировал строку кода, и о времени последней редакции).

Это расширение обладает множеством функций, и вам, вероятно, потребуется время, чтобы разобраться со всеми ними.

Заключение

В этом мануале вы узнали, как использовать интеграцию системы управления версиями Git с VS Code.

VS Code «из коробки» предлагает многие функции, для которых ранее требовалась загрузка отдельного инструмента.

Источник

Git, GitHub и Visual Studio. В помощь новичкам

О чем:

В ней будет коротко рассмотрено что это за вещи, зачем нужны, и простой способ работы – из среды Visual Studio. То есть Bash или GitHub клиент использоваться не будут.

Внимание:

На Хабре уже есть похожая статья – [вот она]. В своей публикации я дополню слова Алексея и расскажу метод проще.

Для кого:

Статья направлена в помощь людям которые не работали с Git, GitHub, и хотят освоить в общих чертах как можно быстрее и без сложностей начать работу с ними.

О тексте:

Старался писать проще и с большим количеством скриншотов и пояснений. Ведь лучше, когда они есть чем, когда их нет и о чем-то приходится догадываться.

Итак, немного теории чтоб понять, что делать дальше:

  1. Git и GitHub – связаны, но они не одно и то же.
    Git – распределенная система контроля версий. Можете представить, как механизм резервного копирования, сохранения в играх. То есть в любой момент вы можете вернуться к предыдущему состоянию и попробовать сделать что-то иначе.
    Распределенная значит что все данные хранятся не только у вас, но и на сервере (GitHub), у других участников команды (если таковая имеется).
    Если непонятно, можете посмотреть — www.youtube.com/watch?v=w3jLJU7DT5E
  2. Терминология тоже имеется на ней внимание не заостряю, не о том сейчас.

Что нужно:

  • Visual Studio 2015 года или новее
  • Подключение к интернету
  • Несколько гигабайт памяти на жестком диске

Инструкция:

    Переходим в меню Tools → Extensions and Updates → откроется вкладка Installed → если в расширениях отсутствует «GitHub Extension for Visual Studio» идем дальше, иначе перейдите к пункту следующему пункту инструкции → вкладка Online → ищем в поиске наше расширение → скачиваем и устанавливаем.



На аккаунте GitHub создаем новый репозиторий. Смотрим:


После, с GitHub копируем ссылку:

  • Открываем Visual Studio → меню View → Team Explorer → в подпункте GitHub нажимаем Connect → вводим учетные данные → Sign in. Скриншоты:

  • Создаем какое-то решение или заходим в существующее и добавляем в систему контроля версий. Для этого нажимаем правой кнопкой мыши на решении (на проекте такого пункта нет) и выбираем “Add Solution to Source Control”:



    Нажимаем на стрелку внизу, и мы попадем в меню. В нем вставляем ссылку на репозиторий созданий ранее:



    Если репозиторий пустой все пройдет как надо. В моем случае там уже лежит один проект созданий специально чтоб вызвать ошибку. Он не имеет с этим ничего общего, даже файлы разные.
    Выходов из ситуации несколько, я рассмотрю только один из них — создание новой ветки [другой путь разработки, тестовый полигон. По умолчанию установлена ветка “master”] в репозитории для этого делаем следующее:

      Может возникнуть вопрос – Что значат другие иконки?
      Ответ:
      Карандаш для того чтоб фиксировать изменения локально (commit). Используйте когда есть что сохранить, то есть код или файлы изменились.

    Все остальные тоже играют важную роль:

  • Применение их мы уже рассмотрели, но для лучшей наглядности еще раз(коротко):
    Создали решение с каким-то проектом→добавили в git→зафиксировали изменение (commit – иконка карандаша)→если есть проблемы поправляем по ситуации(код изменили[статья Алексея] либо новую ветвь создали[смотри пред. пункт], назад по истории сохранений (коммитов) вернулись[след. пункт], либо спросить на toster.ru или stackoverflow.com)→проект на GitHub;
  • Об списке коммитов (истории сохранений)

    Дополнительно:

    Чтоб GitHub верно отображал русские комментарии (если есть) при просмотре кода через сайт нужно сделать следующее:

    Cоветую всё-таки изучить Git Bash.

    Я старался писать как можно понятнее, если что-то не так, то поправьте в комментариях!
    На этом все. Спасибо за внимание!

    Источник

    Working with GitHub in VS Code

    Using GitHub with Visual Studio Code lets you share your source code and collaborate with others. GitHub integration is provided through the GitHub Pull Requests and Issues extension.

    To get started with the GitHub in VS Code, you’ll need to create an account and install the GitHub Pull Requests and Issues extension. In this topic, we’ll demonstrate how you can use some of your favorite parts of GitHub without leaving VS Code.

    If you’re new to source control and want to start there, you can learn about VS Code’s source control integration.

    Getting started with GitHub Pull Requests and Issues

    Once you’ve installed the GitHub Pull Requests and Issues extension, you’ll need to sign in. Follow the prompts to authenticate with GitHub in the browser and return to VS Code.

    If you are not redirected to VS Code, you can add your authorization token manually. In the browser window, you will receive your authorization token. Copy the token, and switch back to VS Code. Select Signing in to github.com. in the Status bar, paste the token, and hit Enter .

    Setting up a repository

    Cloning a repository

    You can search for and clone a repository from GitHub using the Git: Clone command in the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) or by using the Clone Repository button in the Source Control view (available when you have no folder open).

    Authenticating with an existing repository

    Enabling authentication through GitHub happens when you run any Git action in VS Code that requires GitHub authentication, such as pushing to a repository that you’re a member of or cloning a private repository. You don’t need to have any special extensions installed for authentication; it is built into VS Code so that you can efficiently manage your repository.

    When you do something that requires GitHub authentication, you’ll see a prompt to sign in:

    Follow the steps to sign into GitHub and return to VS Code. If authenticating with an existing repository doesn’t work automatically, you may need to manually provide a personal access token. See Personal Access Token authentication for more information.

    Note that there are several ways to authenticate to GitHub, including using your username and password with two-factor authentication (2FA), a personal access token, or an SSH key. See About authentication to GitHub for more information and details about each option.

    Note: If you’d like to work on a repository without cloning the contents to your local machine, you can install the GitHub Repositories extension to browse and edit directly on GitHub. You can learn more below in the GitHub Repositories extension section.

    Editor integration

    Hovers

    When you have a repository open and a user is @-mentioned, you can hover over that username and see a GitHub-style hover.

    There is a similar hover for #-mentioned issue numbers, full GitHub issue URLs, and repository specified issues.

    Suggestions

    User suggestions are triggered by the «@» character and issue suggestions are triggered by the «#» character. Suggestions are available in the editor and in the Source Control view’s input box.

    The issues that appear in the suggestion can be configured with the GitHub Issues: Queries ( githubIssues.queries ) setting. The queries use the GitHub search syntax.

    You can also configure which files show these suggestions using the settings GitHub Issues: Ignore Completion Trigger ( githubIssues.ignoreCompletionTrigger ) and GitHub Issues: Ignore User Completion Trigger ( githubIssues.ignoreUserCompletionTrigger ). These settings take an array of language identifiers to specify the file types.

    Pull requests

    From the Pull Requests view you can view, manage, and create pull requests.

    The queries used to display pull requests can be configured with the GitHub Pull Requests: Queries ( githubPullRequests.queries ) setting and use the GitHub search syntax.

    Creating Pull Requests

    You can use the GitHub Pull Requests: Create Pull Request command or use the + button in the Pull Requests view to create a pull request. If you have not already pushed your branch to a remote, the extension will do this for you. You can use the last commit message, the branch name, or write a custom title for the pull request. If your repository has a pull request template, this will automatically be used for the description.

    Reviewing

    Pull requests can be reviewed from the Pull Requests view. You can assign reviewers and labels, add comments, approve, close, and merge all from the pull request description.

    From the description page, you can also easily checkout the pull request locally using the Checkout button. This will add a new Changes in Pull Request view from which you can view diffs of the current changes as well as all commits and the changes within these commits. Files that have been commented on are decorated with a diamond icon. To view the file on disk, you can use the Open File inline action.

    The diff editors from this view use the local file, so file navigation, IntelliSense, and editing work as normal. You can add comments within the editor on these diffs. Both adding single comments and creating a whole review is supported.

    Issues

    Creating issues

    Issues can be created from the + button in the Issues view and by using the GitHub Issues: Create Issue from Selection and GitHub Issues: Create Issue from Clipboard commands. They can also be created using a Code Action for «TODO» comments.

    You can configure the trigger for the Code Action using the GitHub Issues: Create Issue Triggers ( githubIssues.createIssueTriggers ) setting.

    The default issue triggers are:

    Working on issues

    From the Issues view, you can see your issues and work on them. By default, when you start working on an issue, a branch will be created for you. You can configure the name of the branch using the GitHub Issues: Working Issue Branch ( githubIssues.workingIssueBranch ) setting. The commit message input box in the Source Control view will be populated with a commit message, which can be configured with GitHub Issues: Working Issue Format SCM ( githubIssues.workingIssueFormatScm ).

    If your workflow doesn’t involve creating a branch, or if you want to be prompted to enter a branch name every time, you can skip that step by turning off the GitHub Issues: Use Branch For Issues ( githubIssues.useBranchForIssues ) setting.

    GitHub Repositories extension

    The GitHub Repositories extension lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within Visual Studio Code, without needing to clone the repository locally. This can be fast and convenient for many scenarios, where you just need to review source code or make a small change to a file or asset.

    Opening a repository

    Once you have installed the GitHub Repositories extension, you can open a repository with the GitHub Repositories: Open Repository. command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) or by clicking the Remote indicator in the lower left of the Status bar.

    When you run the Open Repository command, you then choose whether to open a repository from GitHub, open a Pull Request from GitHub, or reopen a repository that you had previously connected to.

    If you haven’t logged into GitHub from VS Code before, you’ll be prompted to authenticate with your GitHub account.

    You can provide the repository URL directly or search GitHub for the repository you want by typing in the text box.

    Once you have selected a repository or Pull Request, the VS Code window will reload and you will see the repository contents in the File Explorer. You can then open files (with full syntax highlighting and bracket matching), make edits, and commit changes, just like you would working on a local clone of a repository.

    One difference from working with a local repository is that when you commit a change with the GitHub Repository extension, the changes are pushed directly to the remote repository, similar to if you were working in the GitHub web interface.

    Another feature of the GitHub Repositories extension is that every time you open a repository or branch, you get the up-to-date sources available from GitHub. You don’t need to remember to pull to refresh as you would with a local repository.

    Switching branches

    You can easily switch between branches by clicking on the branch indicator in the Status bar. One great feature of the GitHub Repositories extension is that you can switch branches without needing to stash uncommitted changes. The extension remembers your changes and reapplies them when you switch branches.

    Remote Explorer

    You can quickly reopen remote repositories with the Remote Explorer available on the Activity bar. This view shows you the previously opened repositories and branches.

    Create Pull Requests

    If your workflow uses Pull Requests, rather than direct commits to a repository, you can create a new PR from the Source Control view. You’ll be prompted to provide a title and create a new branch.

    Once you have created a Pull Request, you can use the GitHub Pull Request and Issues extension to review, edit, and merge your PR as described earlier in this topic.

    Virtual file system

    Without a repository’s files on your local machine, the GitHub Repositories extension creates a virtual file system in memory so you can view file contents and make edits. Using a virtual file system means that some operations and extensions which assume local files are not enabled or have limited functionality. Features such as tasks, debugging, and integrated terminals are not enabled and you can learn about the level of support for the virtual file system via the features are not available link in the Remote indicator hover.

    Extension authors can learn more about running in a virtual file system and workspace in the Virtual Workspaces extension author’s guide.

    Continue Working on.

    Sometimes you’ll want to switch to working on a repository in a development environment with support for a local file system and full language and development tooling. The GitHub Repositories extension makes it easy for you to clone the repository locally or into a Docker container (if you have Docker and the Microsoft Docker extension installed) with the GitHub Repositories: Continue Working on. command available from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) or by clicking on the the Remote indicator in the Status bar.

    If you are using the browser-based editor, the «Continue Working On. « command has the options to open the repository locally or within a cloud-hosted environment in GitHub Codespaces.

    Источник

    • Оцените статью
    © 2024 Настройка и ремонт техники