Сегодня пробегая мимо, Саша показал как в Visual Studio Code смотреть что получается в процессе верстки. Я сильно сомневаюсь, что я буду этим заниматься регулярно, а склероз ведь не дремлет, да и вдруг кому еще пригодится. В общем, велком.
Что нам нужно:
1. Сама Visual Studo Code
2. Установленный npm. У меня он установился вместе с node.js.
Поехали. Создаем папку и выбираем ее в Visual Studio Code. Добавляем в нее index.html и все что там нам нужно. У меня это получилось вот так:
Открываем консоль (Ctrl+~) и набираем npm init
и отвечаем на вопросы инициализатора. Я на все вопросы отвечал Enter. Эта команда выполняется один раз, чтобы сгенерировать файл package.json Этот свеже сгенерированный файл нам надо немного поправить. Находим элемент scripts и заменяем в нем имеющуюся строку
"test": "echo \"Error: no test specified\" && exit 1"
На строку запуска нашего приложения. test заменяем на что угодно, это имя будет использоваться для указания при запуске, а вот параметр заменяем на parcel index.html -p 8080. Где parcel - упаковщик (и не только), index.html это то что он будет запускать, -p 8080 - на каком порту будет доступен локальный веб-сервер запущенный parcel-ом. Должно получится вот так:
Осталось буквально два шага. Нам этот самый parcel надо установить. В консоли отдаем команду:
Как гласит девиз с сайта parcel-а: "упаковщик для веб-приложений без настроек".
Все, запускаем. Набираем в консоли npm run <и имя параметра из блока scripts>. У меня это start, поэтому полностью команда будет: npm run start
Все, по адресу http://localhost:8080 доступно то, что у нас получается при запуске нашего html. parcel весьма умный, достаточно внести изменение в html или css и сохранить их, как сразу в браузере обновляется страница:
Остановить веб сервер можно нажатием Ctrl+C.
P.s. Саша, спасибо :)
P.p.s. Опечатку в коде с первого скриншота увидел только после запуска :( Код поправил, скриншот - нет.
Что нам нужно:
1. Сама Visual Studo Code
2. Установленный npm. У меня он установился вместе с node.js.
Поехали. Создаем папку и выбираем ее в Visual Studio Code. Добавляем в нее index.html и все что там нам нужно. У меня это получилось вот так:
Открываем консоль (Ctrl+~) и набираем npm init
"test": "echo \"Error: no test specified\" && exit 1"
На строку запуска нашего приложения. test заменяем на что угодно, это имя будет использоваться для указания при запуске, а вот параметр заменяем на parcel index.html -p 8080. Где parcel - упаковщик (и не только), index.html это то что он будет запускать, -p 8080 - на каком порту будет доступен локальный веб-сервер запущенный parcel-ом. Должно получится вот так:
Как гласит девиз с сайта parcel-а: "упаковщик для веб-приложений без настроек".
Все, запускаем. Набираем в консоли npm run <и имя параметра из блока scripts>. У меня это start, поэтому полностью команда будет: npm run start
Все, по адресу http://localhost:8080 доступно то, что у нас получается при запуске нашего html. parcel весьма умный, достаточно внести изменение в html или css и сохранить их, как сразу в браузере обновляется страница:
P.s. Саша, спасибо :)
P.p.s. Опечатку в коде с первого скриншота увидел только после запуска :( Код поправил, скриншот - нет.
Комментариев нет:
Отправить комментарий