Знакомство с редактором кода Visual Studio - Популярный проект

Знакомство с редактором кода Visual Studio

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

Статья открывает мою новую рубрику о первых шагах программирования для новичков. Я сама еще недавно не знала даже основных понятий и терминов. Это для меня был тёмный лес…

Установка и настройка

Перейдем по ссылке на основной сайт программы VSCode . И сразу попадаем на страницу скачивания.

На экране нам будет предложены три варианта для различных систем. Выбираем свою, это чаще всего Windows 7, 8, 10 и жмем на нужную вкладку.

редактором кода Visual Studio

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

Знакомство с редактором кода Visual Studio

Начнется стандартная процедура установки программы на компьютер.

редактором кода Visual Studio
Редактор кода

После установки программы откроется главная страница редактора с приветствием.

редактором кода Visual Studio

Теперь займемся настройками. Сначала переключимся с английского языка на русский. В правом нижнем углу на главной странице программы появится окно с предложением перейти на русский язык.

Нажимаем «Установить и перезагрузить». После презагрузки мы видим, что основные надписи теперь на русском языке.

Знакомство с редактором кода Visual Studio

Затем можно изменить масштаб, чтобы было удобнее работать с редактором. Для этого зажимаем клавишу Ctrl и знаком + или — увеличиваем масштаб до нужных нам размеров.
Сочетание клавиш Ctrl и 0 вернёт размер в исходное состояние.

Автосохранение и автообновление страницы в браузере

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

редактором кода Visual Studio

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

Для этого устанавливаем дополнительный плагин.

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

Знакомство с редактором кода Visual Studio

В поиске вводим название плагина «live server»

Выбираем самый верхний из предложенных.

редактором кода Visual Studio

Устанавливаем, нажав на кнопку «Установить».

Знакомство с редактором кода Visual Studio

Когда плагин будет установлен, на нижней панели справа появится надпись «go live». Чтобы плагин стал активным нужно кликнуть по этой надписи.

редактором кода Visual Studio

И сразу можно увидеть разницу в браузере. Без плагина в адресной строке указан весь путь к файлу.

Знакомство с редактором кода Visual Studio

С Live server вместо адреса набор цифр.

Редактор кода

Если на нижней панели не отображается плагин, а иногда это бывает, нужно сделать следующее:

На странице с index.html правой кнопкой мыши вызвать меню и кликнуть по вкладке «Ohen with live server».

редактором кода Visual Studio

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

Примечание:

Плагин Live server срабатывает только тогда, когда на странице есть все основные теги или базовый шаблон.

Создание проекта и написание тегов с редактором кода Visual Studio

На рабочем столе создаем папку project (проект). В этой папке будет храниться сайт, который мы создадим.

Редактор кода.

Сначала эту папку нужно переместить в окно редактора. Именно при помощи этой программы мы будем работать с проектом и создавать нужные файлы.

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

редактором кода Visual Studio

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

Редактор кода.

Нужно просто убрать галочку и лишние вкладки не будут мозолить глаза.

Вернемся к проекту

В опустевшее окно перетаскиваем только что созданную папку.

редактором кода Visual Studio

И теперь мы видим, что название папки появилось в верхней панели редактора. Значит мы всё сделали правильно.

Редактор кода.

Создание файла «Index.HTML» с редактором кода Visual Studio

Теперь создаем наш первый файл. Название файла нужно печатать только английскими буквами. Имя первой страницы всегда INDEX (по умолчанию)

Жмём «Создать файл».

редактором кода Visual Studio

И рисуем латиницей название в поле ввода. После слова «index» всегда ставится точка, потом название расширения без пробела «html».

Редактор кода.

Вот здесь уже и начинается написание html кода и тегов, которые мы впоследствии увидим в браузере!

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

Базовая разметка

Базовая разметка представляет собой шаблон или стартовую страницу, состоящих из основных тегов. Редактор создаст такую страницу автоматически.

В программе VSCode установлен специальный плагин Emmet, который срабатывает автоматически после команды «!+клавиша Tab», в другие редакторы такой плагин нужно устанавливать.

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

Итак, даем команду установить базовый шаблон.

Для этого пишем восклицательный знак в поле ввода и вслед за этим действием нажимаем клавишу «TAB». И вот что у нас получается…

редактором кода Visual Studio


Это и есть основная базовая разметка.

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

Редактор кода.

Ну и проверим заодно, все ли у нас работает.

Между тегами пишем фразу «Привет мир». Первый, это открывающий тег, обозначающий «заголовок 1» а второй с черточкой(слэшем) — закрывающий тег.

редактором кода Visual Studio

И опа! В браузере у нас появилась надпись: ПРИВЕТ МИР. Этот пример наглядно показывает как работают теги. На этом заканчиваю, в следующей статье хочу подробнее разобрать базовую разметку и основные теги.

Всего доброго, удачи!

Другие статьи по теме:


Знакомство с редактором кода Visual Studio

Добавить комментарий

Ваш адрес email не будет опубликован.

Top