Як запустити JavaScript у коді Visual Studio та програмувати як професіонал

Зміст

JavaScript стабільно зберігає позицію однієї з найулюбленіших мов програмування серед розробників. Згідно з опитуванням Stack Overflow за 2023 рік, понад 63% респондентів активно використовують JavaScript у своїй роботі. Паралельно, Visual Studio Code (VS Code) визнається популярним інтегрованим середовищем розробки. Це опитування також виявило, що VS Code є лідером серед редакторів коду, отримавши підтримку понад 73% опитаних.

Visual Studio Code забезпечує підтримку JavaScript, а також багатьох інших мов. У цій статті ми розглянемо важливість використання VS Code для запуску JavaScript, ознайомимося з процесом створення проєкту на JavaScript, написання коду, а також надамо покрокову інструкцію щодо запуску JavaScript у VS Code. Крім того, ми обговоримо найкращі практики роботи з кодом JavaScript у середовищі VS Code.

JavaScript є однією з небагатьох мов, що мають пряму підтримку в VS Code. Ось ключові причини, чому запуск JavaScript у VS Code є вигідним:

Виконання та тестування коду: ви маєте можливість писати та виконувати код JavaScript без необхідності залишати редактор. VS Code автоматично розпізнає будь-який файл із розширенням .js як код JavaScript. Крім того, редактор виділяє помилки в процесі написання коду та спрощує процес налагодження.
Вбудований термінал: для виконання команд, необхідних для створення нових папок, файлів або керування версіями, немає потреби виходити з редактора коду. Термінал дозволяє переглядати повідомлення про помилки.
Розгалужена екосистема: якщо стандартних функцій VS Code недостатньо, завжди можна скористатися розширеннями. Вони надають додаткову функціональність та підтримку різних бібліотек і фреймворків.
“Гаряче” перезавантаження та “живий” сервер: у VS Code можна налаштувати автозбереження для коду JavaScript. Опція “живого” сервера дає можливість запускати код JavaScript у браузері безпосередньо під час кодування. Функція “гарячого” перезавантаження автоматично фіксує всі зміни, без потреби перезапуску “живого” сервера.
IntelliSense та автозавершення коду: редактор пропонує інтелектуальні підказки та автозавершення коду, заощаджуючи час і дозволяючи зосередитися на логіці.
Кросплатформенність: VS Code сумісний із macOS, Linux і Windows. Також він підтримує TypeScript, надбудову JavaScript, що додає статичну типізацію.

Запуск JavaScript у VS Code

Налаштування середовища для виконання JavaScript є досить простим процесом, незалежно від операційної системи. Для комфортної роботи бажано мати принаймні 4 ГБ оперативної пам’яті. Ось покрокові інструкції для початку:

Налаштування Node.js

Node.js – це одне з найпоширеніших середовищ виконання JavaScript. Воно дозволяє виконувати JavaScript поза браузером. Завдяки Node.js, JavaScript почали використовувати в бекенд-розробці, зокрема за допомогою фреймворків, таких як Express.js.

Якщо Node.js ще не встановлено на вашому комп’ютері, ви можете завантажити його безкоштовно. Щоб перевірити, чи Node.js вже встановлено, скористайтеся командою:

node -v

У разі успішного встановлення, термінал відобразить версію встановленого Node.js:

Налаштування Visual Studio Code для розробки на Javascript

Visual Studio Code можна використовувати як редактор коду або як IDE, залежно від ваших потреб. VS Code має вбудовану підтримку JavaScript. Проте, для використання деяких розширених функцій JavaScript, знадобляться спеціальні розширення.

VS Code доступний для безкоштовного завантаження. Виберіть відповідну версію для вашої операційної системи.

Створення проєкту JavaScript

Тепер, коли у вас є необхідне програмне забезпечення (середовище виконання та редактор коду), ви можете почати розробку JavaScript-застосунку. JavaScript використовується для надання інтерактивності вебсайтам та найчастіше застосовується в поєднанні з HTML та CSS. Однак, його також можна використовувати для створення скриптів та структур даних.

Створимо простий проєкт та назвемо його JavaScript-VsCode-app.

Використовуйте наступні команди:

mkdir JavaScript-VSCode-app

cd JavaScript-VSCode-app

touch app.js

code .

Написання коду JavaScript у Visual Studio Code

Для демонстраційних цілей, напишемо простий JavaScript-код. Ось вигляд нашого проєкту в редакторі коду:

Як бачите, у нас є лише один файл (app.js). Зараз напишемо просту програму, що перевіряє, чи є число парним. Ось код у файлі app.js:

function isEven(number) {
    return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Запуск коду JavaScript у Visual Studio Code

Тепер ми готові запустити код JavaScript у VS Code. Спочатку розглянемо, що саме робить цей код. Ми створили функцію під назвою “isEven”, яка приймає число та повертає true, якщо число парне, і false, якщо число непарне.

Для запуску коду виконайте наступну команду:

node app.js

Цю команду можна виконати в кореневій папці проєкту або в терміналі VS Code.

Після виконання коду, отримаємо результат “8 is even”.

А якщо ми хочемо перевірити, чи є 9 парним числом? Для цього змінимо код наступним чином:

function isEven(number) {
    return number % 2 === 0;
}

// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Запускаємо оновлений код та отримуємо наступний результат:

Як бачите, тепер виводиться “9 is odd”.

Додавання необхідних розширень

Створена нами програма є досить простою. Для більш складних проєктів може знадобитися друкувати код чи проводити налагодження. На панелі ліворуч від редактора натисніть на передостанню кнопку.

Також можна використовувати комбінацію клавіш CTRL+Shift+X.

Тут ви можете знайти різноманітні розширення для використання у своєму коді. Наприклад, ви можете пошукати ESLint.

Зверніть увагу, що розширення вже встановлено. Завжди читайте описи розширень, щоб краще їх налаштувати та використовувати.

Використання розширення Code Runner

Visual Studio Code підтримує багато мов програмування. За допомогою Code Runner можна виконувати коди на багатьох популярних мовах. Знайдіть вкладку розширень зліва та пошукайте Code Runner.

Натисніть “Встановити” та увімкніть розширення. Тепер ви можете запускати свій код. Припустимо, що у файлі app.js є простий вираз `console.log(“Hello, World!”);`. Запустити його за допомогою Code Runner можна, натиснувши F1 та ввівши “RUN CODE”.

Термінал відобразить наступне:

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
Hello, World!
[Done] exited with code=0 in 2.106 seconds

Найкращі практики ефективного написання коду JavaScript

Описані вище налаштування є ідеальними для простих JavaScript-проєктів. Однак, для ефективної роботи з JavaScript у VS Code, слід дотримуватися наступних найкращих практик:

Використання лінтера коду: Зі збільшенням обсягу коду, його читабельність може погіршитися. Для своєчасного виявлення помилок та підвищення читабельності коду, використовуйте такі розширення як Prettier ESLint.
Розміщення різного коду в окремих файлах: Типовий фронтенд-проєкт може містити HTML, CSS та JavaScript. Не варто писати весь код в одному файлі. Завжди розділяйте HTML, CSS та JavaScript на окремі файли.
Використання розширень: VS Code Marketplace містить тисячі розширень, що спрощують роботу з різними бібліотеками. Досліджуйте Marketplace та вибирайте розширення з найкращими відгуками та документацією.

Налаштування Git у Visual Studio Code для інтеграції керування версіями

Поки що ми розглянули налаштування VS Code та запуск JavaScript. Для відстеження змін у коді або їх відправлення до віддаленого репозиторію (наприклад, GitHub) потрібен контроль версій (наприклад, Git). Ось покрокові інструкції для налаштування Git:

Встановлення Git: Git є найбільш розповсюдженою системою контролю версій у розробці. Завантажте Git, що відповідає специфікаціям вашої операційної системи. Після встановлення, перевірте версію Git командою:

git -v

У разі успішного встановлення, термінал відобразить щось подібне:

Ініціалізація репозиторію Git: Ви можете відстежувати зміни та фіксувати їх у Git. Виконайте команду в кореневій папці проєкту:

git init

Налаштування особистих даних Git: Git необхідно повідомити про користувача, налаштувавши ім’я користувача та електронну пошту. Виконайте наступні команди:

git config –global user.name “Ваше ім’я”

git config –global user.email “[email protected]“

Замініть “Ваше ім’я” та “[email protected]” на ваші дані.

Додавання та фіксація змін: Тепер ви можете додавати та фіксувати свої зміни. Для перевірки невідстежуваних файлів виконайте команду:

git status

Ви побачите всі невідстежувані та незафіксовані файли.

Для внесення змін виконайте:

git add .

Виконавши ще раз `git status`, ви побачите наступне:

Тепер можна зафіксувати файли. Виконайте команду:

git commit -m "Ваше повідомлення про фіксацію"

Замініть “Ваше повідомлення про фіксацію” на відповідний опис внесених змін.

Тепер ви можете підключити Git до платформ віддаленого зберігання (таких як GitHub).

Висновок

Сподіваємося, що ця стаття допомогла вам зрозуміти, як створити середовище та запускати JavaScript у VS Code. Залежно від конкретних потреб, вам можуть знадобитися додаткові розширення для роботи з різними JavaScript бібліотеками та фреймворками. Для використання всіх найновіших функцій, регулярно оновлюйте Visual Studio Code.

Ознайомтеся з нашою статтею про найкращі ресурси для вивчення JavaScript, щоб покращити свої навички.