Html in visual studio code

Добавление файлов проекта

Теперь добавьте в проект четыре новых файла.

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

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

1. В Обозревателе решений выберите имя проекта и нажмите клавиши CTRL+SHIFT+A или щелкните правой кнопкой мыши имя проекта и выберите элементы Добавить > Новый элемент.

2. В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку Добавить или ОК.

3. Повторите эти шаги, чтобы добавить файл JavaScript с именем webpack-config.js.

4. Повторите эти шаги, чтобы добавить HTML-файл с именем index.html.

5. Повторите эти шаги, чтобы добавить файл конфигурации TypeScript JSON с именем tsconfig.json.

Фокусировка

Иногда бывает нужно продемонстрировать ваши действия всем пользователям в сеансе совместной работы

Live Share позволяет попросить всех участников обратить внимание на ваши действия с отправкой им уведомления для быстрого запуска отслеживания

Просто нажмите кнопку состояния сеанса/общего доступа в правом верхнем углу и нажмите «Внимание участников»

При этом все участники сеанса совместной работы получат уведомление о том, что вам требуется их внимание

Они смогут переместить фокус на ваши действия, когда будут к этому готовы, просто нажав кнопку «Отслеживать» в этом уведомлении.

Что такое Visual Studio Code

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

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

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

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Горячие клавиши

Горячие клавиши — это помощник программиста и инструмент для быстрого выполнения рутинных задач. Предположим, нам нужно создать новый HTML-файл и написать его структуру. Без горячих клавиш этот процесс выглядит так: 

1. Переходим в меню и открываем вкладку «Файл». 
2. Выбираем команду «Новый файл».
3. Возвращаемся в меню и повторно открываем вкладку «Файл».
4. Находим команду «Сохранить как».    
5. Пишем название файла, выбираем место хранение, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
6. Вручную прописываем скелет HTML-документа или тратим время, чтобы найти и скопировать структуру из интернета. 

Мы превратили простую задачу в многоэтапный процесс, где нужно постоянно отрывать руки от клавиатуры, хвататься за мышку и искать нужные команды в выпадающем списке. Теперь посмотрим, как это же действие можно выполнить с помощью горячих клавиш. Для примера мы используем Mac OS — в других системах горячие клавиши будут немного отличаться, но сути это не меняет: 

1. Command + N — создаём новый файл. 
2. Shift + Command + S — включаем команду «Сохранить как».   
3. Пишем название файла, выбираем место хранения, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
4. ! + tab — создаём структуру HTML-документа и можем работать. 

С горячими клавишами мы сократили количество рутинных действий и быстро выполнили простую задачу — создали HTML-файл и написали структуру. В случае с объёмными проектами горячие клавиши помогают сэкономить часы работы. 

В VS Code под горячие клавиши запрограммированы все команды. За один раз их не выучить, да и не нужно — понаблюдайте за своим рабочим процессом и выберите одну команду, которую вы выполняете чаще остальных. Посмотрите, какие горячие клавиши помогают автоматизировать процесс — выпишите эти клавиши и попробуйте применить. Когда привыкнете — выберите другую команду, и так до тех пор, пока не научитесь выполнять большинство действий без мышки и меню. 

Для просмотра всех горячих клавиш нажмите в боковой панели на шестерёнку и выберите раздел «Сочетания клавиш». Или воспользуйтесь горячими клавишами и нажмите Command + K + Command + S. Перед вами появится длинный список с названием команд и комбинацией кнопок, которые установлены по умолчанию — любую команду можно перепрограммировать или найти с помощью поисковика. 

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

1. Возьмем для примера функцию, отступы в которой выстроены случайным образом.
2. Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
3. Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

Что за Visual Studio Code?

Это популярная бесплатная программа для разработчиков, которая помогает писать код. Например:

• Знает синтаксис разных языков программирования и помогает вам не ошибиться в точке с запятой или скобочке.
• Сама подставляет некоторые распространённые фрагменты кода.
• Помнит названия ваших переменных и подсказывает их, чтобы не было ошибок.
• Умеет загружать ваш код на Гит.
• Помогает отлаживать код.
• Поддерживает плагины, которые превращают её в мегакомбайн для разработчика.

VSCode — один из самых популярных редакторов кода, потому что он бесплатный и открытый, его можно сделать каким угодно под свои задачи. Есть и другие: например, Sublime Text или продукты компании JetBrains. 

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

WebStorm

Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.

Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:

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

Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:

Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:

Войти

Для совместной работы необходимо войти в Visual Studio Live Share, чтобы все коллеги знали, кто вы. Это нужно исключительно для обеспечения безопасности и не предполагает участия в какой-либо маркетинговой или исследовательской деятельности. Вы можете войти с личной учетной записью Майкрософт (например @outlook.com), с предоставляемой Майкрософт рабочей или учебной учетной записью (AAD) либо с учетной записью GitHub. Войти очень просто.

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

Если вы не хотите использовать для входа учетную запись персонализации Visual Studio, перейдите в раздел Инструменты  > Параметры > Live Share > Учетная запись пользователя и настройте другие учетные данные.

Выбрав вариант Внешняя учетная запись, вы сможете указать любую учетную запись, не поддерживаемую функцией персонализации в Visual Studio, например учетную запись GitHub. При первом использовании функции Live Share автоматически откроется окно браузера, где вы можете завершить вход.

Совет

Вы знаете, что выбрав Средства > Параметры > Live Share > Общие, можно просмотреть все параметры по умолчанию для Live Share? Настройте параметры для совместной работы в соответствии со своими требованиями. Попробуйте все новые возможности Live Share. Для этого перейдите к общим параметрам Live Share и выберите Дополнительно > Функции > Участники программы предварительной оценки.

Если возникли проблемы, изучите .

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура после нажатии клавиши Tab создаст следующий код:

<ul>
  <li><span class="item-1"></span></li>
  <li><span class="item-2"></span></li>
  <li><span class="item-3"></span></li>
</ul>

В CSS аббревиатура Emmet как создаст код .

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F.

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

• Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
• Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
• HTMLHint – плагин для статического анализа HTML кода;
• HTML CSS Support — поддержка CSS для документов HTML;
• IntelliSense for CSS class names in HTML — плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
• Autoprefixer — для автоматического добавления CSS свойств с префиксами;
• CSS Peek — позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
• Prettier — Code formatter — для форматирования кода (HTML, CSS, JavaScript и др.);

VS Code имеет возможность, которая позволяет сворачивать области CSS кода заключенные между и :

/*#region*/
...
/*#endregion*/

Предварительные требования

Для работы с этим руководством требуется следующее:

• Visual Studio с установленной рабочей нагрузкой «Разработка Node.js».

  Если вы еще не установили Visual Studio:

  1. Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.

  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.

  Если решение Visual Studio уже установлено, но требуется установить рабочую нагрузку Node.js, сделайте следующее:

  1. В Visual Studio выберите Средства > Получить средства и компоненты.

  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.

• Установленная среда выполнения Node.js:

  Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js. Версия LTS имеет наилучшую совместимость с другими платформами и библиотеками.

  Средства Node.js в рабочей нагрузке Visual Studio Node.js поддерживают как 32-разрядные, так и 64-разрядные версии архитектуры Node.js. Для Visual Studio нужна только одна версия, а установщик Node.js не может работать с двумя версиями сразу.

  Обычно Visual Studio обнаруживает установленную среду выполнения Node.js автоматически. В противном случае настройте свой проект, чтобы он ссылался на установленную среду выполнения. Для этого сделайте следующее:

  1. После создания проекта щелкните правой кнопкой мыши узел проекта и выберите элемент Свойства.

  2. На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.

Это руководство было протестировано с Node.js 14.17.5.

Это руководство было протестировано с Node.js 12.6.2.

Выполнение локального приложения Node.js

Теперь, когда вы познакомились с кодом, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5. При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.

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

Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:

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

Персональная и командная продуктивность

Как мы говорили в блоге о видении Visual Studio 2022, важной областью для нас является предоставление инновационных функций, которые революционизируют разработку. Начиная с Preview 2, вы увидите новые возможности для повышения производительности в Visual Studio

Как разработчики, мы тратим большую часть времени в рамках создания приложений на повторяющиеся изменения и запуск приложения для проверки этих изменений. Этот процесс трудоемкий и утомительный. Внесение простейших изменений может занять несколько минут. Preview 2 предлагает новые возможности Live Preview как для XAML, так и для веб-приложений. Вы сможете вносить эти итеративные изменения в свое приложение в редакторе и видеть разницу в реальном времени. Больше не нужно перекомпилировать и запускать, когда вы просто хотите подтолкнуть что-то на пару пикселей!

Новый Web Live Preview — это следующее поколение веб-дизайнеров для ASP.NET. Web Live Preview добавляет инструменты, которые делают веб-дизайн более доступным. И вы можете видеть изменения, которые вы вносите в среду IDE, даже с помощью элементов управления с привязкой к данным!

Помимо уменьшения сопротивления в цикле редактирования/отладки элементов дизайна с помощью Live Preview, Visual Studio имеет новые возможности, которые помогут вам более эффективно отлаживать код. Познакомьтесь с Force Run, новой командой отладки, которая запускает ваше приложение до определенной точки, игнорируя любую другую точку останова или исключение. Force Run отлично подходит для выхода из циклов с точками останова.

Интерфейс Visual Studio Code

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

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

Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.

Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

Запустить и проверить работоспособность кода мы можем в следующей вкладке:

Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.

Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы

Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом

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

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

Инновации у вас под рукой

Еще одна важная часть нашего видения Visual Studio 2022 — раскрыть ваш потенциал как разработчика с действительно инновационными возможностями. В Preview 1 мы добавили IntelliCode для завершения всей строки. А с Preview 2 мы обновляем Hot Reload, включая поддержку приложений C++! С помощью Hot Reload вы можете редактировать проекты C++ или .NET во время работы вашего приложения. Во многих случаях вы можете применить эти изменения кода без приостановки приложения. Чтобы использовать горячую перезагрузку в работающем приложении, нажмите кнопку «Применить изменения кода» на панели инструментов.

Установка GIT

Если вы планируете работать совместно с другими пользователями или размещать проект на сайте с открытым исходным кодом (например, GitHub), примите во внимание, что VS Code поддерживает. Вкладка системы управления версиями в VS Code отслеживает все изменения и содержит общие команды Git (добавление, фиксация, принудительная отправка, извлечение) прямо в пользовательском интерфейсе

Сначала необходимо установить Git для включения панели управления версиями.

1. Скачайте и установите Git для Windows с веб-сайта git-scm.

2. В комплект входит мастер установки, который задает вам ряд вопросов о параметрах установки Git. Рекомендуется использовать все параметры по умолчанию, если у вас нет конкретной причины изменить какой-либо из них.

3. Если вы никогда не использовали Git, обратитесь к руководствам по GitHub. Они помогут вам приступить к работе.

4. Мы рекомендуем добавлять GITIGNORE-файл в проекты Node. На сайте GitHub вы можете найти GITIGNORE-шаблон по умолчанию для Node.js.

Установка Терминала Windows (необязательно)

новая Терминал Windows включает несколько вкладок (быстро переключаться между дистрибутивами командной строки, PowerShell или несколькими установочными областями Linux), пользовательскими привязками клавиш (создайте собственные сочетания клавиш для открытия и закрытия вкладок, копирования и вставки и т. д.), эмодзи и пользовательских тем (цветовые схемы, стили и размеры шрифтов, фоновое изображение, размытие и прозрачность). дополнительные сведения см. в Терминал Windows документах.

1. Скачайте Терминал Windows из Microsoft Store: При установке через магазин обновления выполняются автоматически.

2. После установки откройте Терминал Windows и щелкните Параметры, чтобы настроить Терминал использовать файл .

Общий доступ к серверу

Время от времени организатору совместного сеанса нужно предоставить гостям доступ к дополнительным локальным серверам или службам. Это могут быть другие конечные точки REST или базы данных и другие серверы. Visual Studio Live Share позволяет указать номер локального порта, при необходимости присвоить ему имя и предоставить общий доступ к нему всем гостям.

Гости в этом случае смогут подключаться к указанному порту сервера, предоставленному в общий доступ, через аналогичные порты на своих локальных компьютерах. Например, если вы предоставили общий доступ к веб-серверу, работающему на порту 3000, гости будут обращаться к тому же веб-серверу на своих компьютерах через порт http://localhost:3000. Для этого создаются защищенные туннели SSH или SSL между компьютерами организатора и гостей с аутентификацией через службу. Таким образом вы можете быть уверены, что доступ получат только участники сеанса совместной работы.

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

1. Нажмите кнопку общего доступа/состояния сеанса в правом верхнем углу и выберите пункт «Управление общими локальными серверами».

2. В появившемся диалоговом окне нажмите кнопку «Добавить» и введите номер порта локально выполняемого сервера, затем введите имя, нажмите клавишу ВВОД и кнопку ОК.

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

Если нужный порт на компьютере гостя уже занят, вместо него автоматически выбирается другой. Гости могут в любой момент просмотреть список предоставленных в общий доступ портов (и их имена, если они указаны), нажав кнопку общего доступа/состояния сеанса в правом верхнем углу и выбрав пункт «Просмотреть общие локальные серверы».

Обратите внимание, что по соображениям безопасности гости не могут управлять тем, какие порты на компьютере организатора предоставлены в общий доступ. Чтобы прекратить общий доступ к локальному серверу, организатору нужно нажать кнопку общего доступа/состояния сеанса в верхнем правом углу, как описано выше, затем нажать «Управление общими локальными серверами», выбрать нужный порт и нажать кнопку «Удалить»

Чтобы прекратить общий доступ к локальному серверу, организатору нужно нажать кнопку общего доступа/состояния сеанса в верхнем правом углу, как описано выше, затем нажать «Управление общими локальными серверами», выбрать нужный порт и нажать кнопку «Удалить».

Настройка

VS Code готов к работе сразу после установки — в него по умолчанию добавлено большинство плагинов для веб-разработки. Можно сразу загрузить проект или начать программировать в новом файле. Нужно только привыкнуть к интерфейсу. 

Если вы раньше пользовались другим редактором и не удалили его с компьютера, то VS Code автоматически предложит перенести сохранённые настройки. Для переноса вам достаточно кликнуть на всплывающую подсказку и перезагрузить VS Code — переносятся плагины, расширения и установленные горячие клавиши. 

Если у вас ещё не было кодового редактора, то ниже мы рассмотрим несколько базовых настроек, которые помогут персонализировать интерфейс VS Code. 

Устанавливаем русский язык. На левой боковой панели нажмите Extensios и в строке поиска напишите Russian Language Pack — это языковой пакет, который адаптирует VS Code под русский язык. Выберите расширения, кликните Install и перезапустите редактор. У вас должен открыться русифицированный интерфейс.

Языковой пакет Russian Language Pack

Если после перезагрузки язык не изменился — на левой боковой панели нажмите значок шестерёнки и выберите раздел Command Palette. Появится строка поиска: напишите Display, выберите команду Configure Display Language и нажмите Enter. Смените язык с английского на русский и повторно перезагрузите редактор. 

Приветственное окно Visual Studio Code после установки языкового пакета

Меняем цветовую тему. В левой боковой панели нажмите на значок шестерёнки, перейдите в раздел «Цветовая тема» и выберите тему, встроенную в редактор. 

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

Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста

Добавляем любимый шрифт. В боковой панели нажмите на шестерёнку, выберите раздел «Параметры» → «Текстовый редактор» → «Шрифт». Перед вами будет вкладка Font Family, в которую нужно вписать название выбранного шрифта — если этот шрифт скачан или сохранён в операционной системе, то он сразу отобразится в редакторе. Здесь же можно изменить размер и жирность шрифта. 

Меняем стандартный шрифт Visual Studio Code на Courier New

Включаем автосохранение. В боковой панели выберите шестерёнку, перейдите в «Параметры» → «Текстовый редактор» → «Файлы». Вы увидите вкладку Auto Save, в которой нужно указать период сохранения файлов. Мы рекомендуем режим afterDelay с задержкой в одну секунду — так вы будете сразу сохранять всё, что запишете. Если вы выберете режим onFocusChange, то изменения в рабочем файле будут сохраняться каждый раз, когда вы будете открывать другие вкладки редактора. В режиме onWindowChange изменения происходят сразу после того, когда вы сворачиваете VS Code и открываете окна других программ.

Включаем режим автосохранения и делаем так, чтобы файлы сохранялись ежесекундно

Установка

Прежде чем начать работу, вам нужно установить Visual Studio 2019 либо Visual Studio 2017 версии 15.6 или более поздней версии на ОС Windows 7, 8.1 или 10. Мы рекомендуем использовать версию не ниже Visual Studio 15.7, так как в ней появилась поддержка локальной отмены и повтора.

Начать работу очень просто.

Для Visual Studio 2019

1. Установите любой выпуск Visual Studio 2019.
2. Установите поддерживаемую рабочую нагрузку. (например, ASP.NET, .NET Core, C++, Python или Node.js)
3. Расширение Visual Studio Live Share устанавливается по умолчанию вместе с этими рабочими нагрузками.

Для Visual Studio 2017

1. Установите любой выпуск Visual Studio 2017 — от 15.6 и выше.
2. Установите поддерживаемую рабочую нагрузку. (например, ASP.NET, .NET Core, C++ или Node.js)
3. Скачайте из Marketplace и установите расширение Visual Studio Live Share.

Скачивая и используя Visual Studio Live Share, вы соглашаетесь с условиями лицензии и заявлением о конфиденциальности. Если у вас возникают проблемы, ознакомьтесь с руководством по устранению неполадок.