Установка Visual Studio Code
Скачать : Download Visual Studio Code
Установить (да там всё просто - некст, некст, ...)
Создание первого проекта и первый запуск
Находим удобное место для хранения проектов, желательно на быстром диске, создаём папку "Projects" :
Заходим в созданную папку и создаем папку первого проекта :
Выбираем папку и нажимаем правую кнопку мыши, выбираем в контекстном меню "Открыть с помощью Code" :
Откроется Visual Studio Code :
Настройка автосохранения
В открывшейся Visual Studio Code давайте произведем небольшую начальную настройку :
File -> Preferences -> Settings (Ctrl + ,) - > Files: Auto Save -> onFocusCHange
Создание первого файла (index.html) в проекте VS Code
В Visual Studio Code находим :
Explorer (Ctrl + Shift + E) -> New File -> "index.html"
Переключаемся на редактор кода :
В первой строке вводим символ "!" и нажимаем на клавишу "Tab"
VS производит автоматическое дополнение набранного текста, и мы получаем почти готовый к первому использованию "index.html". Переходим на строку внутри тега <body> :
Набираем "h1" и также нажимаем на клавишу "Tab", снова срабатывает автодополнение текста :
Пишем что-то типа "Это мой первый проект в VS Code, привет, мир !" :
<h1>Here is my first VS Code Project ! Hello World !</h1>
Я пишу на английском, чтобы лишний раз не переключаться.
Разбираемся с отладкой (debug)
Пробуем запустить отладку :
Run -> Start Debugging (F5)
Из предлагаемых вариантов выбираем "Chrome" (он должен быть предварительно установлен в системе) :
Наблюдаем, как запускается Crome и в нем открывается наш первый файл :
Теперь добавим к проекту папку "js" и первый файл JavaScript "01.js"
Закрываем Chrome, переходим в Visual Studio Code :
Explorer (Ctrl + Shift + E) -> New Folder -> "js" :
Правый клик на новой папке -> New File - > "01.js" :
Переключаемся на редактор кода, в файле "01.js" :
- объявим новую переменную "somevar"
- присвоим новой переменной значение 5
- выведем в консоль "01.js - Here we are"
var somevar = 5;
console.log('01.js - Here we are !');
Теперь, для того, чтобы наш новый файл "01.js" выполнялся при запуске, добавим кое-что в нашем "index.html" :
Добавляем строчку после нашего h1, начинаем писать "script" и нажимаем клавишу "Tab", получаем :
добавляем "src=" чтобы получилось "<script src=></script>", после знака "равно" вводим символ кавычки и видим, что VS предлагает нам выбрать каталог или файл :
Выбираем сначала нашу папку "js", затем наш новый файл "01.js" :
Результат должен быть примерно такой :
<script src="js/01.js"></script>
Снова пробуем запустить отладку - нажимаем на функциональную клавишу "F5" или выбираем в меню "Run -> Start Debugging (F5)"
Далее снова выбираем вариант "Chrome", открывается наш файл в точности, как и раньше :
Откроем "Инструменты разработчика" в Chrome - для этого можно воспользоваться одним из способов :
- Нажать функциональную клавишу F12
- Нажать комбинацию клавиш "Ctrl + Shift + I"
- Выбрать в меню "Дополнительные инструменты -> Инструменты разработчика" :
В инструментах разработчика переключимся а вкладку "Console"
Если мы всё сделали правильно, то должны увидеть в консоли наш вывод из "01.js" :
На этом пока всё, далее подробно рассмотрим процесс отладки в Chrome и отладку в VS Code с расширением "Live Server".