Прежде, чем мы перейдем непосредственно к работе с языком JavaScript, необходимо скачать и настроить редактор кода. Можно, конечно, писать код и в «Блокноте», но далеко не всегда ваши программы на JavaScript будут состоять из одной-двух инструкций и, в этом случае, нормальный редактор кода вам будет просто жизненно необходим. Существует достаточно много платных и бесплатных редакторов исходного кода, но здесь и далее мы будем использовать VS Code — бесплатный редактор кода, разработанный в Microsoft.
Visual Studio Code (VS Code) от Microsoft
«По умолчанию» многие из нас относятся к продуктам от Microsoft или негативно или же, как к неизбежному злу, вроде как «и жить с ним невозможно и удалить жалко». Однако, по крайней мере, применительно к продукту от Microsoft VS Code такие нелестные эпитеты вы вряд ли встретите даже у заядлых адептов Linux и Mac OS.
VS Code — это легкий, быстрый, кроссплатформенный редактор кода, имеющий массу расширений и используемый для работы не только с JavaScript и HTML, но и с другими языками программирования, например с Python или C#.
Не стоит путать Visual Studio Code и Visual Studio. Visual Studio — это мощная, платная IDE (интегрированная стреда разработки), используемая, в основном, для разработки приложений на платформе .NET. В свою очередь Visual Studio Code (VS Code) — это бесплатный редактор кода, который развивается как самостоятельный продукт.
Скачать VS Code можно с официального сайта. С установкой приложения проблем возникнуть не должно — устанавливается точно также, как и тысячи других приложений. Мы же перейдем сразу к настройке VS Code для нашей дальнейшей работе с JavaScript.
Настройка VS Code для JavaScript
По мере продвижения в изучении JavaScript мы, возможно, будем устанавливать различные расширения для VS Code. Сейчас же мы установим только основные из них. Итак, после запуска VS Code вы увидите страницу приветствия:
Чтобы установить какое-либо расширение необходимо нажать сочетание клавиш Ctrl+Shift+X или же выбрать вкладку Extensions в меню слева:
В списке появятся популярные расширения, доступные для установки. Над списком расположена строка поиска расширений. Так как JavaScript мы будем в 99% случаев использовать совместно с HTML и CSS, то логично сразу установить необходимые расширения. Наберем в строке поиска «HTML» и найдем в результатах поиска расширение «HTML CSS Support«:
Это расширение добавляет автозавершение для HTML-тегов, ускоряя тем самым, написание кода. Чтобы установить расширение, необходимо нажать ссылку «Install» в заголовке страницы с описанием расширения:
После установки расширения может потребоваться перезагрузка VS Code.
Теперь наберем в строке поиска «JavaScript» и установим расширение под названием «JavaScript (ES6) code snippets«. Это расширение аналогично предыдущему — ускоряет разработку на языке JavaScript и содержит большое количество сниппетов. В целом, для знакомства с языком JavaScript этих двух расширений нам может быть вполне достаточно. Можете посмотреть и другие расширения, которые могут показаться вам полезными для работы, но, если потребуется установить что-либо ещё для демонстрации тех или иных возможностей языка, это будет прямо указано в соответствующей статье учебника.
Дополнительные расширения VS Code
Ниже представлено несколько дополнительных расширений для VS Code, которые вы можете установить самостоятельно:
- Auto Rename Tag — позволяет переименовывать парные html-теги. Меняете название открывающего тега — автоматически меняется название закрывающего тега.
- Bracket Pair Colorizer 2 — раскрашивает фигурные скобки в исходном коде, позволяя тем самым быстрее ориентироваться в исходнике (когда будем писать большие JS-скрипты — это расширение может очень сильно вам пригодиться)
- Prettier — Code formatter — расширение позволяет автоматически приводить код в порядок согласно внутренним правилам плагина и индивидуальным настройкам пользователя (расставить пробелы, переносы, заменить одинарные кавычки на двойные или наоборот и т. д.)
- Path Autocomplete — подсказывает пути к файлам, показывая возможные варианты, что позволяет не искать папки вручную. Расширение будет полезно при подключении скриптов из внешних файлов.
Итого
В этой статье мы научились устанавливать расширения в VS Code — бесплатном редакторе кода от Microsoft. Высокая популярность этого редактора привела к тому, что сейчас вы можете найти в Marketplace огромное количество различных расширений, позволяющие повысить удобство разработки кода. Мы установили только два расширения, которые нам будут полезны при работе с HTML и JavaScript, а остальные расширения будут устанавливаться по необходимости.