Назад Вперед

Часть 3. Настройка редактора кода VSCode

Начало статьи.

В прошлой статье закончил на том, что открыл папку нового проекта в редакторе кода. Сейчас опишу некоторые инструменты, которые пригодятся в разработке игр. Напомню, что программировать буду на языке JavaScript используя библиотеку Phaser3, кроме того коснусь темы языка разметки HTML5 и CSS3.

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

Структура нового проекта

Немного выше показаны открытые для редактирования файлы. Они же отображаются на экране справа. На данный момент открыт стандартный файл редактора Welcome. Его можно спокойно закрывать. Сам редактор поддерживает большое количество полезных горячих клавиш, часть которых отображается в верхнем меню редактора. Поэтому на данный момент всех их запоминать нету смысла. Рассматривать буду только самые необходимые по ходу дела.

При наведении курсора на окно структуры проекта, появляются специальные значки, которые мы будем использовать чаще всего. Первый — это создать новый файл (New File), второй — создать папку (New Folder). Эти же функции доступны в меню File и при вызове контекстного меню в этом окне. Внимательно нужно следить, какая папка выделена и где будет создан новый файл, чтобы потом лишний раз не перекидывать куда нужно.

Создание нового файла

Итак, создам первый файл в новом проекте. Нажимаю на специальный значок New File. Теперь нужно указать имя нового файла, прописываю index.html в строке и нажимаю Enter. Файл создан, он откроется сразу же в окне редактирования. Index — это имя файла (стандартное имя для главной страницы при создании сайтов), оно может быть другим, главное, чтобы соответствовало стандартам написания имен файлов. После точки идет .html -разрешение файла, с помощью которого редактор «понимает», что именно вы будете писать в этом файле и даже иконку файла делает специальную под разные разрешения.

Новый файл index.html

В этой теме пока не будем касаться языка разметки HTML, что обозначают каждые теги и для чего они нужны, а сделаю стандартную страницу, которую автоматически создает сам редактор. В строке номер 1 в окне редактирования файла ставлю знак ! и нажимаю Enter. Шаблон страницы сайта готов!

Шаблон страницы сайта

Мне не интересно открывать пустую страницу, поэтому нахожу тег <body> </body> и между ними напишу любой текст.


    <body>
        Привет! Меня зовут Иван. Я хочу стать программистом!
    </body>
 

И сейчас использую горячие клавиши, который запомнить обязательно нужно. Ctrl+S — сохранение изменений в файле. После сохранения мой первый файл готов. На самом деле, его уже можно открывать в браузере, но такой вариант мне не подходит, так как каждый раз открывать файл, вносить изменения, сохранять, открывать браузер, смотреть, подходит ли изменение и так по кругу много много раз. А еще, забегая немного вперед, мне нужно будет использовать локальный сервер, для фреймворка Phaser3. Поэтому нужно немного «апгрейдить» мой редактор и установить один очень полезный плагин.

Установка плагина для редактора

В специальном окне для установки плагинов в поиске вбиваю Live Server. Плагин позволит видеть результат изменений в коде сразу же после сохранения файла, без перезапуска локального сервера, что мне было жизненно необходимо. Из списка выбираю нужный по имени плагин и нажимаю Install. Жду окончания установки. В окне редактирования файлов откроется файл с описанием плагина, здесь же его можно отключить, включить или удалить по необходимости.

Плагин Live Server

Нажимаю кнопку Reload to Activate, которая перезапустит редактор и сам проект. После этого можно вернуться к проекту. Если все прошло успешно, то в самом низу редактора появится специальная кнопка Go live, которая запускает локальный сервер и открывает проект в браузере. Если кнопки по какой-то причине нету, то нужно пробовать перезапустить редактор и проверить, активен ли плагин.

Запуск плагина

Нажимаю на кнопку, плагин использует по умолчанию Port 5500. И сразу же открывается браузер с моей созданной страницей, запущенной на локальном сервере. По умолчанию страница откроется в браузере Google Chrome.

Новая страница

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

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

Спасибо за внимание!

Назад Вперед