Назад Вперед

Как быстро создать проект. Работа с инструментом Terminal в VSCode.

В редактор кода VSCode встроен очень полезный инструмент Terminal. Который представляет собой ту же Командную строку в Windows, только открытую в редакторе и сразу в каталоге проекта. С его помощью и помощью менеджера пакетов npm платформы Node.js можно быстро создавать структуру проекта и подключать фреймворк к нему.

Для примера создам шаблон простого проекта. Создаю папку в любому месте и с помощью контекстного меню, которое открывается правой кнопкой мыши, нажимаю Open with Code. Папка откроется в редакторе кода.

Открыть проект с помощью редактора

На данный момент проект пустой. Открыта лишь стартовая страница Welcom. Ее могу спокойно закрывать.

Новый проект

Для начала нужно создать главный html-документ — index.html. В меню структуры проекта нажимаю кнопку New File и ввожу имя документа вместе с разрешением. Пока его заполнять не буду.

Новый html-документ

Перехожу к работе с самим Терминалом. В верхнем меню есть пункт Terminal. Нажимаю и открывается меню, в котором нажимаю пункт New Terminal. Там же указаны горячие клавиши для быстрого открытия терминала.

Открыть терминал

Внизу редактора открывается командная строка. Для начала проверю, установлен ли Node.js и менеджер пакетов npm.

Проверка версии менеджера пакетов

Теперь можно приступать к созданию самого проекта. Для этот в терминале прописываю команду для менеджера: npm init -y.

Создание проекта

Таким образом быстро создается файл package.json, в котором можно указывать имя проекта, его версию, описание, главный файл, ключевые слова, автора и много чего другого, что пока не особо нужно.

Сейчас перехожу к привязке фреймворка Phaser к проекту с помощью терминала. Опять же прописываю команду для менеджера пакетов: npm install --save phaser. Команда устанавливает полную версию фреймворка в проекте.

Установка фреймворка

После установки вижу, что в файл package.json добавилась зависимость (dependencies), где указан какой фреймворк и его версия. Так же создан новый файл package-lock.json, где более подробные настройки описаны для фреймворка.

Установка фреймворка

Появилась новая папка node_modules для хранения установленных пакетов. В ней находиться сам фреймворк в папке phaser и всего его файлы.

На этом установка фреймворка закончена. Сам терминал можно закрывать. Перехожу к работе с html-документом. Чтобы быстро создать шаблон страницы использую уже описанный ранее в статьях способ. Нажимаю ! и Enter.

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

Сейчас осталось только добавить тег с id для хранения самой игры и прописать скрипты для фреймворка и главного js файла. С автозаполнением это делается быстро.

Подлкючение скриптов

В каталоге проекта можно добавить еще две папки для хранения созданных файлов (src) и подгружаемых ресурсов (assets).

Шаблон проекта

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

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

Назад Вперед