Найти в Дзене
Инженер

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

В этой статье мы поговорим об одном из самых распространенных редакторов кода - Visual Studio code. Этот редактор абсолютно бесплатен и подходит для написания кода на различных языках программирования, в том числе на JavaScript.

Для скачивания установочного файла необходимо зайти на официальный сайт компании разработчика. Для этого достаточно в поисковой строке вашего браузера вбить Visual Studio code и зайти по первой ссылке

-2

Далее необходимо скачать установочный файл исходя из типа вашей ОС

-3

После скачивания файла устанавливаем программу VS code на ваше устройство и запускаем. Вы увидите так называемое стартовое или приветственное окно программы.

-4

Установка программы завершена. Теперь вы можете создавать папки и фалы в них на различных языках программирования, по необходимости редактировать их и запускать на выполнение (тестить). Так как мы хотим научиться создавать сайты, нас интересуют возможности этого редактора в плане работы с языками html, css и javascript.

-5

Здесь же необходимо дополнить что для корректной работы с этой программой, да и вообще для упрощения написания кода необходимо установить дополнительные расширения (плагины) к VS code. Для их установки необходимо нажать на значок Extensions (расширения, дополнения).

-6

И в поисковой строке необходимо ввести название необходимого плагина. Например code runner - это плагин, который нужен для того чтобы вы могли запускать ваш код прямо в VS code, а не только писать и редактировать код, а запускать его в браузере или других программах.

-7

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

-8

Это кнопка запуска вашего кода.

Теперь давайте создадим файл. Для этого нажмите на кнопку Explorer

-9

Далее необходимо нажать правой кнопкой мыши и выбрать New File

-10

Тут же сохраните ваш файл, задайте ему имя main и расширение js, т.е. main.js. Сохранение осуществляется с помощью пунктов меню File - Save

-11

или комбинации клавиш Ctrl + S. Тем самым вы даете понять редактору что планируете работать в этом файле с языком JavaScript. Далее давайте введем какие-нибудь выражения

-12

После внесения любых изменений мы видим что здесь появилась белая точечка

-13

Это говорит о том что внесенные изменения не сохранены и перед запуском написанного кода файл необходимо пересохранить файл. Делается это с помощью ранее упомянутой комбинации клавиш Ctrl + S.

Теперь запускаем наш код на выполнение. Для этого нажимаем либо ПКМ, далее Run code

-14

либо комбинация клавиш Ctrl + Alt + N, либо ранее упомянутая кнопка

-15

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

-16

Ошибка сообщает нам, что данное значение не определено. Давайте удалим пятую строчку кода или заключим строку Dmitry в одинарные или двойные кавычки и запусти программу на выполнение еще раз.

-17

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

-18

Теперь мы можем наглядно видеть результат работы программы.