7 подписчиков

JavaScript для начинающих - Extensions для VS Code

28 октября 202128 окт 2021

5 мин

Оглавление

Поиск и установка расширения
Code Runner
Для выполнения кода:

Ранее мы успели обсудить :

Как установить Visual Studio Code, произвести минимальную настройку и создать свой первый проект JavaScript
Как производить отладку JavaScript при помощи "Инструментов разработчика" Chrome
Как производить отладку JavaScript непосредственно из Visual Studio Code с расширением Live Server
Какие интернет ресурсы помогут вам освоить разработку на JavaScript

Сегодня поговорим о нескольких полезных расширениях (Extensions) среды Visual Studio Code, которые могут быть полезны для начинающих

Поиск и установка расширения

Так как эта статья, как и другие, указанные выше, рассчитана на самый начальный уровень подготовки - опишем подробно и пошагово процесс поиска и установки расширения Visual Studio Code.

Откроем Visual Studio Code, переключимся на вкладку Extensions в боковом меню. Можно просто нажать комбинацию клавиш Ctrl + Shift + X.
Слева сверху в строке поиска начнём вводить текст названия интересующего нас расширения, например 'Code Runner' :
Выберем в списке найденных расширений то, которое нам нужно
В центральной области нажмём на кнопку 'Install'

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

Готово, можно пользоваться. О том, как пользоваться каждым конкретным расширением, мы поговорим далее.

Code Runner

Позволяет выполнить выделенный фрагмент кода или код открытого в редакторе файла. Причем, как видно из описания, работает не только с JavaScript - совместим с множеством языков программирования.

Главная прелесть этого расширения - возможность мгновенно получить результат выполнения выделенного куска кода. Без запуска процесса отладки, без ожидания, пока откроется браузер и т.д.

Конечно, если для проверки выполнения куска кода вам нужен контекст - нужно чтобы выполнение тысяч строк кода во множестве других файлов инициализировало текущий набор переменных - тогда этот метод не пройдет.

Но идеально подойдет для короткого независимого куска кода - а разве не к такому стилю программирования нам с вами следует стремиться ? ;)

Тем более - на этапе обучения, когда вы пишете небольшой фрагмент независимого кода и хотите разобраться - как он выполняется.

Для выполнения кода:

выделите фрагмент кода, затем:

нажмите комбинацию клавиш Ctrl + Alt + N (если у вас установлен Yandex Disk, придется изменить эту комбинацию для него или для Code Runner - ну или просто закрыть YD)
или нажмите правую кнопку мыши и выберите в контекстном меню 'Run Code'
или нажмите кнопку '▷' (Run Code) на панели заголовка фала в редакторе
или выберите файл в Explorer VS Code - в списке файлов проекта, нажмите правую кнопку мыши и выберите в контекстном меню 'Run Code'

Для остановки выполнения кода:

нажмите комбинацию клавиш Ctrl + Alt + M
или нажмите кнопку '□' (Stop Code Run) на панели заголовка фала в редакторе
или нажмите правую кнопку мыши в области OUTPUT и выберите в контекстном меню 'Stop Code Run' .

Рассмотрим на примере

В качестве примера возьмем наш файл '01.js' из первого проекта.

Пусть файл содержит вот такой простейший код :

var somevar = 6;

console.log('01.js - Here we are ! somevar = ' + somevar);

откроем файл в редакторе, затем в области заголовка файла нажмем на кнопку '▷'
посмотрим, что выведется в нижней области OUTPUT :

В области OUTPUT мы видим консольный вывод '01.js - Here we are ! somevar = 6' а также информацию о том, с каким кодом выполнился наш фрагмент и время выполнения фрагмента.

Попробуем выделить теперь только строку - номер три - и выполнить её отдельно - как выдумаете, что произойдёт ?

А произойдёт завершение кода с ошибкой, так как в выделенном фрагменте мы обращаемся к переменной somevar, а строка 1 где эта переменная объявляется и инвентаризируется - не выполнена :

Live Server

Следующее расширение - 'Live Server' - нужно нам для того, чтобы запускать и отлаживать наш код на локальном веб сервере, если вы читали другие мои статьи - вы должно быть уже с ним знакомы - здесь мы подробно разобрали как установить и настроить Live Server для того, чтобы корректно и быстро работала отладка Visual Studio Code.

Важная особенность Live Server - он автоматически отслеживает и перезагружает изменившиеся файлы проекта.

Таким образом, если у вас в VS Code настроено автосохранение файлов при смене фокуса, то вам достаточно переключиться с редактируемого файла на вкладку Chrome где открыт ваш локальный веб сервер, чтобы увидеть все произведенные изменения.

Prettier

Одно из самых известных расширений, которое помогает программистам писать хорошо / "правильно" форматированный код.

Сколько пробелов должно выделять очередную вложенную структуру кода ?
Как правильно объявлять строку в JS - в одинарных кавычках или в двойных ? Если в одинарных - то в каких именно ?
Нужно ли переносить на следующую строку фигурную скобку после объявления функции ? А цикла ?
Нужно ли разделять сроками объявления функций ? А переменных ?

Можно долго спорить об этом, но согласитесь, в рамках одной команды лучше, чтобы все писали код одинаково - так проще его читать и понимать.

Prettier позволяет вам не думать об этих условностях и даже не соблюдать их в момент набора кода.

Если вы уже установили его, давайте выполним одну простую настройку :

Откроем настройки ( Ctrl + , или Manage -> Settings )
и найдём настройки Prettier - выполним поиск в настройках строки 'prettier format on save' :
Поставим галочку напротив соответствующего свойства

Откроем наш файл и попробуем написать что-то типа :

Теперь сохраните файл - нажмите Ctrl + S.

Prettier тут же изменит ваш код :

Удобно ? И больше не будет повода для ворчания и споров о вкусах в вашей команде )

А на случай, если у вас принято форматировать как-то по своему - и вы не готовы поступаться принципами - Prettier можно настроить очень гибко, читайте документацию, экспериментируйте )