Как писать код и сразу видеть результат

Запуск системы Visual Studio 2013

При запуске на экране появится заставка Microsoft Visual Studio 2013. Как и большинство заставок, она содержит информацию о версии продукта и обладателе лицензии.


При первом запуске системы Visual Studio 2013 заставка будет отображаться в течение нескольких секунд, а затем будет открыто с окно с предложением войти в систему, используя учетную запись Microsoft:

После этого вы получите приглашение выбрать установки среды по умолчанию. На первый взгляд, довольно странно спрашивать людей, которые еще не использовали продукт, как они собираются с ним работать. Тем не менее, поскольку компания Microsoft объединила большое количество языков и технологий в единой среде разработке, эта среда должна учитывать незначительные (а иногда и заметные) различия между разработчиками.

Если вы остановите свое внимание на разных опциях, перечисленных в этом списке, то увидите, что параметры среды, которые можно изменить, включают в себя положение и внешний вид разных окон, меню, панелей инструментов и даже «горячие» клавиши. Например, если в качестве установки по умолчанию вы выберете опцию General, то на экране будут описаны изменения, которые произойдут в этом случае

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

Если вы ранее разрабатывали программы на языке Visual Basic .NET и теперь переходите на новую версию системы Visual Studio, то не используйте опцию Visual Basic. Эта опция предназначена для разработчиков, использующих среду VB6, и просто приведет в ярость разработчиков, использующих язык Visual Basic .NET, поскольку они будут использовать разные «горячие» клавиши. Мы рекомендуем использовать общие настройки (General), так как они будут влиять на стандартные раскладки клавиатур без связи с другими языками программирования.

Вы также можете выбрать на этом экране цветовую тему для Visual Studio.

Иконочная тема

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

Из коробки доступны 2 темы, из которых можно выбрать. Но здесь я советую поставить тему с маркетплейса vscode-icons.

Это одна из самых популярных загрузок среди всех товаров торговой площадки в принципе (на данный момент ~10M скачиваний), и такая популярность оправдана. Порой кажется, что у этой темы есть своя иконка просто для всего, настолько их там много.

Также эту тему от дефолтных выгодно выделяет наличие иконок для директорий. Т.е. определены иконки для ряда типовых наименований директорий. Например, у меня на верхнем уровне это src, dist, public, config, node_modules. Внутри src идут scripts, styles, templates, images, fonts, ну и так далее. Кроме того у всех этих иконок есть вариации для открытой и закрытой папки, что ещё придаёт наглядности.

Настраиваем расширения

Ниже приведен список расширений, которые нам понадобятся для правильной настройки VS Code. Откройте VS Code и перейдите на панель расширений (Ctrl + Shift + X), которая находится на левой панели инструментов, и начните загружать друг за другом следующие расширения:

C / C++ от Microsoft —  Для корректной работы этого расширения нам понадобится установленный и добавленный в PATH компилятор MinGW. Если у вас его нет, следуйте этому руководству.

C++ Intellisense от austin.

Python от Microsoft — вам нужно будет настроить Python для работы этого расширения

Загрузите и установите последнюю версию отсюда.

Java Extension Pack от Microsoft —  Перед установкой убедитесь, что в вашей системе настроены Java 8 JDK и JRE и указаны все необходимые переменные среды для Java. Если нет, посмотрите это видео о том, как настроить Java на вашем компьютере.

Code Runner от Jun Han — мы будем использовать это расширение для запуска всех наших программ. Для этого необходимо выполнить некоторые шаги по настройке. Мы увидим эти шаги в следующих разделах.

Расширения, перечисленные ниже, необязательны для дальнейшей настройки, но я рекомендую вам обратить на них внимание, посмотреть, заинтересуют ли они вас, и если нет, то перейти к следующему разделу. (Необязательно)Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем

Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений

(Необязательно)Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем. Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

Чтобы выбрать тему, нажмите Ctrl + Shift + P. Откроется палитра команд. Осуществите поиск по слову “theme” и выберите опцию Color Theme. Чтобы настроить иконки, можете выбрать опцию File Icon Theme.

Расширения для тех, кто интересуется FrontEnd-фреймворками для веб-разработки, такими как Angular и React:

  • (Необязательно) Angular Language Service от Angular.
  • (Необязательно) Angular Snippets от John Papa.
  • (Необязательно) ES7 React / Redux / GraphQL / React-Native snippets от dsznajder.
  • (Необязательно) React Native Tools от Microsoft.
  • (Необязательно) Live Server от Ritwick Dey.

Комментарии

Как и все уважающие себя редакторы, VSCode позволяет закомментировать выделенные строки через горячую клавишу:

Тип комментариев подбирается на основании языка. Для js будет применён , для css , для html , для hbs и т.д

Для написания стилей я пользуюсь PostCSS, и здесь важно, что для при этом комментарии определяются верно. В Sublime Text я ставил ассоциацию .pcss файлов c SCSS, в результате чего подсветка синтаксиса была примерно корректная, но комментарий вставлялся, как в SASS одинарный, что для PostCSS вызывало ошибку, т.к

в CSS должны быть блочные комментарии.

Лично я придерживаюсь такого стиля написания комментариев в скриптах, что выделение участка кода, который временно отключён, идёт через , временные пометки в конце строк также идут через , но пояснения пишутся через блочные комментарии на отдельных строках. Так можно визуально отделить “work in progress” участки кода, которые потом можно будет удалить, от вшитых сопровождающих пояснений работы блока, да и смотрятся блочные комментарии более аккуратно. Для вставки блочного комментария в VSCode предназначен шорткат:

Расширения VS Code для повышения продуктивности

1. WakaTime

Это одно из моих любимых расширений. Оно было бы еще лучше, если бы авторы сделали его полностью бесплатным, но и без этого расширение просто потрясающее.

Говоря простым языком, WakaTime отслеживает всю вашу активность, связанную с кодингом. Сколько времени вы проводите за написанием кода, над какими проектами работаете, какие языки программирования используете и насколько хорошо вам это удается.

Всю собранную статистику можно просматривать на красивых диаграммах.

2. Visual Studio IntelliCode

Представьте технологию Intellisense с поддержкой ИИ, который может посоветовать, какой код писать. Представленная вами картинка практически воплощена в реальность!

Расширение Visual Studio IntelliCode предоставляет функционал разработки с применением ИИ для Python, TypeScript/JavaScript и Java. Расширение распознает контекст вашего кода при помощи машинного обучения.

Вот, как это работает:

3. Terminal Here

Если вы не пользуетесь IDE и предпочитаете писать код в текстовом редакторе, обратите внимание на это расширение: оно вам точно понравится!

Примечание автора: лично я не люблю кодить в IDE и отдаю предпочтение текстовому редактору VS Code. В основном я пишу на Java, при этом мне нравится поддерживать определенную структуру файлов (по одной папке на один вопрос). Как вы, вероятно, догадались, чтобы запускать выполнение файлов, мне приходилось каждый раз менять директории. Этот плагин — просто спасение!

Это расширение открывает в терминале VS Code текущую директорию. Разве не потрясающе?

4. Live Server

Как бы объяснить всю важность этого плагина?.. Вы открываете свои страницы при помощи Live Server, и вам больше не приходится каждый раз при внесении изменений перезагружать их!


Вы открываете свои страницы при помощи Live Server, и вам больше не приходится каждый раз при внесении изменений перезагружать их!

5. ReactJS Code Snippets

Если вы React-разработчик и не пользуетесь этим плагином, вы теряете зря кучу времени! ReactJS Code Snippets позволяет создавать компоненты, используя готовые сниппеты кода.

Еще пример:

6. Python

Вероятно, мне все равно не удастся описать весь функционал этого расширения в рамках одного поста, так что скажу кратко: оно позаботится обо всех ваших нуждах, связанных с написанием кода на Python!

Выбор интерпретатора Python в строке состояния в один клик:

Настройка дебаггера через Debug Activity Bar:

Конфигурация тестов путем запуска команды Configure Tests:

Быстрый запуск Jupiter notebook:

7. Path Intellisense

Очень полезный функционал для разработчиков. Будь то импорт зависимостей, включение изображений в HTML-документ, добавление JS-скриптов или подключение CSS-документов в HTML-файл — нам постоянно нужно указывать пути к файлам.

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

9. Markdownlint

Откройте наугад несколько open-source проектов на GitHub, и вы увидите, что у них есть нечто общее, а именно — стиль README.md.

Язык разметки Markdown создавался с тем расчетом, чтобы документы на нем было легко читать, писать и понимать. Цель была достигнута, но гибкость языка стала и его преимуществом, и его недостатком. В этом языке допустимо использование многих стилей, из-за чего форматирование может стать непоследовательным. К тому же, некоторые конструкции не во всех парсерах хорошо работают, и из-за этого их следует избегать.

Markdownlint это расширение Visual Studio Code, включающее библиотеку правил для Markdown-файлов, благодаря которым повышается стандартизация и последовательность форматирования.

Не ленитесь: установите себе этот плагин и поисправляйте свою markdown-разметку:)

10. Markdown Preview Enhanced

Возможно, вы, как и я, давно забросили MSWord и прочее ПО для текстовых документов, переключившись на использование markdown? Установите себе этот плагин, и вы сможете следить за тем, как выглядит ваш документ.

11. Auto Close Tag

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

12. Auto Rename Tag

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

Первая программа в Visual Studio

Последнее обновление: 28.08.2017

Для создания программы на C++ нам нужны, как минимум, две вещи: текстовый редактор для набора кода и компилятор для превращения этого кода в приложение. При этом для компиляции необходимо запускать консоль или терминал. Однако есть и более удобный способ — использование различных сред разработки или IDE. Они, как правило, содержит встроенный текстовый редактор, компилятор и позволяют скомпилировать и запустить программу по одному клику мыши, а также имеют еще множество разных вспомогательных возможностей.

После загрузки и запуска установщика Visual Studio в нем необходимо отметить пункт «Разработка классических приложений на C++»:

Выбрав все необходимые пункты, нажмем ОК для запуска установки. После установки Visual Studio создадим первый проект. Для этого перейдем в меню File (Файл) -> New (Создать) -> Project… (Проект), и нам откроется окно создания нового проекта. В нем перейдем в левой части окна к языку С++ и выберем его подсекцию General:

В центральной части окна в качестве типа проекта выберем Empty Project, а внизу окна в поле для имени проекта дадим проекту имя HelloApp и нажмем на ОК для создания проекта.

После этого Visual Studio создаст пустой проект. Добавим в него текстовый файл для набора исходного кода. Для этого в окне Solution Explorer (Обозреватель решений) нажмем правой кнопкой мыши на узел Source Files и в контекстом меню выберем Add -> New Item…:

Затем нам откроется окно для добавления нового элемента:

Здесь нам надо выбрать пункт C++ File(.cpp), а внизу окна укажем для файла имя Hello.cpp. Как правило, исходные файлы на C++ имеют расширение .сpp.

После добавления файла изменим опции проекта. Для этого перейдем к пункту меню Project -> Properties:

И в открывшемся окне свойств проекта в левой части перейдем к секции Linker ->System и далее для поля SubSystem установим значение Console(/SUBSYSTEM:CONSOLE), выбрав нужный элемент в списке:

Тем самым мы указываем, что мы хотим создать консольное приложение. После установки этого значения нажмем на кнопку «Применить», чтобы новые настройки конфигурации вступили в силу.

После добавления файла проект будет иметь следующую структуру:

Вкратце пробежимся по этой структуре. Окно Solution Explorer содержит в решение. В данном случае оно называется HelloApp. Решение может содержать несколько проектов. По умолчанию у нас один проект, который имеет то же имя — HelloApp. В проекте есть ряд узлов:

  • External Dependencies: отображает файлы, которые используются в файлах исходного кода, но не являются частью проекта

  • Header Files: предназначена для хранения заголовочных файлов с расширением .h

  • Resource Files: предназначена для хранения файлов ресурсов, например, изображений

  • Source Files: хранит файлы с исходным кодом

Теперь собственно создадим первую программу и определим в файле Hello.cpp простейший код, который будет выводить строку на консоль:

#include <iostream>        		// подключаем заголовочный файл iostream

int main()							// определяем функцию main
{									// начало функции
	std::cout << "Hello World!";	// выводим строку на консоль
	return 0;						// выходим из функции
}

Здесь использован весь тот код, который был рассмотрен в предыдущих темах про компиляцию с помощью g++.


Теперь запустим программу. Для этого в Visual Studio нажмем на сочетание клавиш Ctrl+F5 или выберем пункт меню Debug -> Start Without Debugging:

И в итоге Visual Studio передаст исходный код компилятору, который скомпилирует из кода исполняемый файл exe, который потом будет запущен на выполнение. И мы увидим на запущенной консоли наше сообщение:

После этого на жестком диске в проекте в папке Debug можно увидеть скомпилированный файл exe, который мы можем запускать независимо от Visual Studio:

В данном случае файл HelloApp.exe как раз и представляет скомпилированный исполняемый файл. И, кроме того, в той же папке автоматически генерируются два вспомогательных файла:

  • HelloApp.ilk: файл «incremental linker», который используется компоновщиком для ускорения компоновки

  • HelloApp.pdb: файл, который содержит отладочную информацию

НазадВперед

Встроенные возможности

VSCode предоставляет интерфейс для работы с системой контроля версий. Этот функционал представлен на вкладке Source Control панели управления и частично в статус баре. На вкладке Source Control выводится список изменённых файлов и имеется поле ввода заголовка коммита. В статус баре указывается текущая ветка и количество несинхронизированных коммитов.

До перехода на VSCode я всегда работал с Git через терминал, но теперь перешёл к управлению через интерфейс, т.к. при таком подходе удаётся тратить на это меньше времени, да и если редактор предоставляет такие возможности, то почему бы ими не пользоваться. Я пользуюсь самыми базовыми командами — рассмотрим их реализации в рамках интерфейса по порядку.

  1. git status. Для отслеживания статуса достаточно посмотреть на представление файлов на вкладке Source Control. Все файлы, в которых были произведены изменения, разбиты по группам Changes, Staged Changes и Merged Changes.
  2. git add. Кнопка “Stage Changes” рядом с именем файла (иконка “+”) добавляет указанный файл. Также можно добавить все файлы разом, если навестись на заголовок “Changes” — появится кнопка “Stage All Changes”.
  3. git checkout. Убирается файл аналогично, через кнопку “Discard Changes” (иконка со стрелкой). Функция “Discard All Changes” также присутствует.
  4. git commit. Коммит производится также на вкладке Source Control. Нужно прописать его заголовок в верхнем поле и нажать Ctrl + Enter (Обычное нажатие Enter переводит строку). Если при осуществлении коммита VSCode не найдёт ни одного индексируемого файла, то предложит добавить все. Этот алерт можно отключить, если хотите выполнять такое действие по умолчанию, но я для надёжности оставил.
  5. git pull / git push. В статус баре выводится количество несинхронизированных коммитов. Нажатие по этой кнопке выполняет синхронизацию, т.е. как раз pull и push. По умолчанию при этом выводится алерт подтверждения, но я его отключил:
  6. git fetch. Чтобы подтянуть свежую информацию по веткам, можно прожать кнопку “Refresh” (иконка с галочкой) вверху панели Source Control. Но я рекомендую подобную синхронизацию автоматизировать. Для этого включаем функцию autofetch, которая будет периодически делать fetch за вас:
  7. git checkout. Манипуляция ветками выполняется через кнопку в статус баре. Имя текущей ветки на ней уже написано, после нажатия появится список всех доступных веток. Здесь можно выбрать ветку для перехода или создать новую (checkout -b).

Собственно, это все команды, которые я ранее вводил вручную. Как можно видеть для всех них есть более удобные альтернативы, сводящие работу с Гитом к паре кликов. Расширенный набор команд доступен по кнопке “More Actions…” (иконка “…”) наверху вкладки Source Control, ну и для уникальных сложных случаев всегда доступен терминал.

Кстати, если интересно, какие команды VSCode исполняет под капотом, то их можно увидеть на панели Output, выбрав в качестве источника Git.

Что касается мержа, файлы с конфликтующими изменениями отображаются в группе “Merged Changes”. По этим файлам можно пройтись и решить конфликты через встроенный в код линзы (Code Lens). Они предоставлены в виде кнопок, которые позволяют принять отдельные изменения, либо объединить все. При выборе изменённых файлов в панели Source Control открывается diff, показывающий файл из последнего коммита и текущий файл слева и справа соответственно.

Также отмечу, что VSCode из коробки предоставляет индикаторы на полях, символизирующие изменения по сравнению с последним коммитом (зелёный — новый, синий — изменённый, красный — удалённый). В Sublime Text этот функционал приходилось добавлять через специальный плагин.

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

Цветовая тема

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

Быстрый просмотр тем можно осуществить через командную строку: Preferences: Color Theme или через кнопку настроек в нижнем левом углу. Вызов этой команды открывает список установленных тем, по которым можно пройтись через стрелки клавиатуры, сразу увидев их превью.

Лично я, потратив некоторое время на поиски, остался на стандартной теме Dark+. По мне так, идеальная тёмная тема, приятная глазу.

Focusing

Occasionally you may want everyone in a collaboration session to come and take a look at something you are doing. Live Share lets you ask that everyone «focus» their attention on you with a notification that makes it easy for them to follow you back.

Open the Live Share custom tab in the VS Code activity bar or the Live Share Explorer view, and select the «Focus participants» icon.

Once you run the command, everyone in the collaboration session will then get a notification that you’ve requested their attention.

They can then just click «Follow» right from the notification when they’re ready to put their focus on you.

Sublime Text 3

Бес­плат­ный редак­тор, кото­рый назой­ли­во пред­ла­га­ет зане­сти денег раз­ра­бот­чи­кам. Про Sublime Text у нас есть отдель­ная и более подроб­ная ста­тья — почи­тай­те, там тоже инте­рес­но.

Sublime Text — потря­са­ю­ще мощ­ный тек­сто­вый редак­тор. Его сила — в ско­ро­сти рабо­ты, он оди­на­ко­во быст­ро обра­бо­та­ет про­стую веб-страничку или про­грам­му на сто тысяч строк кода. Под­свет­ка син­так­си­са всех воз­мож­ных язы­ков про­грам­ми­ро­ва­ния, авто­под­ста­нов­ка, умное закры­тие тегов — всё это доступ­но сра­зу после уста­нов­ки.

Вот что ещё уме­ет про­грам­ма сра­зу после уста­нов­ки:

  • пока­зы­вать раз­ны­ми цве­та­ми коман­ды и пере­мен­ные в попу­ляр­ных язы­ках про­грам­ми­ро­ва­ния;
  • авто­ма­ти­че­ски завер­шать коман­ды;
  • выде­лять сра­зу все оди­на­ко­вые сло­ва;
  • сво­ра­чи­вать код для удоб­ства чте­ния;
  • исполь­зо­вать любые горя­чие кла­ви­ши, какие толь­ко пона­до­бят­ся;
  • раз­де­лять рабо­чую область на несколь­ко окон, в каж­дой из кото­рых мож­но редак­ти­ро­вать свой код.

Вто­рая супер­спо­соб­ность, кото­рая пре­вра­ща­ет Sublime Text из про­сто­го тек­сто­во­го редак­то­ра в уни­вер­саль­ное реше­ние, — пла­ги­ны. По прин­ци­пу дей­ствия они такие же, как и в дру­гих про­грам­мах из обзо­ра, но они совер­шен­но не вли­я­ют на ско­рость рабо­ты. Когда начи­на­ешь плот­но рабо­тать с Sublime Text, может пока­зать­ся, что у него есть пла­ги­ны для все­го. Нуж­но редак­ти­ро­вать одно­вре­мен­но один и тот же код, но в раз­ных пане­лях — пожа­луй­ста, напи­сать быст­ро HTML-код — само собой, про­ве­рить код на ошиб­ки и недо­чё­ты — без про­блем.

Emmet сокра­ща­ет вре­мя на напи­са­ние кода, под­став­ляя вме­сто стан­дарт­ных команд целые кус­ки гото­во­го кода

JavaScript & NodeJS Snippets упро­ща­ет напи­са­ние кода на JavaScript и рабо­та­ет по тому же прин­ци­пу, что и Emmet


SublimeCodeIntel помо­га­ет быст­ро разо­брать­ся в коде со мно­же­ством функ­ций. Если щёлк­нуть на назва­ние любой функ­ции, пла­гин сра­зу пока­жет вам её опи­са­ние.

Так как эта ста­тья — для начи­на­ю­щих про­грам­ми­стов, кото­рым важ­но сра­зу видеть изме­не­ния в коде, то посмот­рим, как это дела­ет Sublime Text.

Сра­зу после уста­нов­ки он это­го делать не уме­ет, но нам помо­жет пла­гин LiveReload. Он пока­зы­ва­ет все изме­не­ния в бра­у­зе­ре, как толь­ко мы сохра­ня­ем рабо­чий файл с кодом. Это не так изящ­но, как в VS Code, но в слу­чае с Sublime Text про­сти­тель­но. Дело в том, что при­вык­нув одна­жды писать в нём код, слож­но пере­сесть на что-то дру­гое, что рабо­та­ет с той же ско­ро­стью. Уста­нов­ка LiveReload состо­ит из двух ком­по­нен­тов — пла­гин для Sublime Text и рас­ши­ре­ние для бра­у­зе­ра.

После уста­нов­ки давай­те посмот­рим, что у нас полу­чи­лось. Созда­дим файл tested.html в Sublime Text, раз­ме­тим его внут­ри стан­дарт­ным шаб­ло­ном как HTML-документ, а рядом откро­ем окно бра­у­зе­ра.

В реаль­ном вре­ме­ни мы не уви­дим на стра­ни­це те изме­не­ния, кото­рые вно­сим в код, как это было в VS Code. Но если нажать Ctrl+S, что­бы сохра­нить все дан­ные, то бра­у­зер момен­таль­но пока­зы­ва­ет то, что мы сде­ла­ли.

Если вы серьёз­но настро­е­ны про­грам­ми­ро­вать, при­смот­ри­тесь к Visual Studio Code. Почти со всем он справ­ля­ет­ся сам или с пла­ги­на­ми, не нуж­но под­клю­чать допол­ни­тель­но бра­у­зе­ры или сто­рон­ний софт.

Люби­те, что­бы после уста­нов­ки были доступ­ны почти все нуж­ные функ­ции? Попро­буй­те WebStorm — плат­ную, но мощ­ную сре­ду раз­ра­бот­ки.

Если вам важ­на ско­рость рабо­ты в любых ситу­а­ци­ях, то Sublime Text — луч­ший выбор. Он очень быст­рый, и для него есть пла­ги­ны почти на все слу­чаи жиз­ни.

Co-debugging

Visual Studio Live Share’s collaborative debugging feature is a powerful and unique way to debug an issue. Beyond enabling a collaborative experience to troubleshoot problems, it also gives you and other participants in your session the ability to investigate issues that may be environment specific by providing a shared debugging session on the host’s machine.

Using it is simple.

  1. Be sure both the host and all guests have the appropriate debugging extension installed. (Technically this is not always necessary, but it is generally a good idea.)

  2. As the host, if not already set up for the project, you should to debug the application from VS Code as you would normally. No special setup is required.

  3. Next, the host can start debugging using the button in the debug tab as normal.

    Tip

    You can also participate in Visual Studio debugging sessions from VS Code and vice versa! Check out the on co-debugging for more information.

Once the debugger attaches on the host’s side, all guests are also automatically attached. While there is one debugging «session» running on the host’s machine, all participants are connected to it and have their own view.

Anyone can step through the debugging process which enables seamless switching between collaborators without having to negotiate control.

Note

See platform support for the state of debugging features by language or platform.

Each collaborator can investigate different variables, jump to different files in the call stack, inspect variables, and even add or remove breakpoints. Co-editing features then allow each participant orator to track where the others are located to provide the unique ability to seamlessly switch between concurrently investigating different aspects of the problem and collaboratively debugging.

Note

While in a read-only collaboration session, a guest will not be able to step through the debugging process. They can however, still add or remove breakpoints, and inspect variables.

Change when VS Code joins debugging sessions

By default, as a guest, you’ll be automatically attached to debugging sessions when they are shared by the host. However, in some cases, you may find this behavior disruptive. Fortunately, you can change it as follows:

Simply edit settings.json (File > Preferences > Settings), add one of the following lines, and then restart VS Code:

Setting Behavior
The default. As a guest, you’ll automatically join any shared debugging session the host starts.
As a guest, you are prompted as to whether you want to join a shared debugging session when it is started by the host.
As a guest, you’ll need to manually join any debugging sessions. See .

Detaching and reattaching

As a guest, you may wish to stop debugging temporarily. Fortunately, you can simply click the «stop» icon in the debug toolbar to detach the debugger without affecting the host or other guests.

If you’ve updated settings so you no longer auto-attach or if you simply want to reattach later, you can do so by pressing Ctrl+Shift+P / Cmd+Shift+P or clicking on the session state status bar item and selecting «Attach to a Shared Debugging Session».

Sharing the running application in a browser

Visual Studio Code does not have the concept of a known «web application port» like Visual Studio for project types such as ASP.NET. However, if you are joining a collaboration session from a Visual Studio host, you may automatically see your default browser appear when debugging starts that is then automatically connected to the host’s running applications. See for more details.

As a host, you can achieve something similar by manually sharing the application or other endpoints like RESTful services using the «Share Local Server» feature. Visual Studio and VS Code guests can then open a browser on the same localhost port to see the running application. See for more details.


С этим читают