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

Автор

JavaScript незмінно вважається улюбленою мовою програмування більшості розробників.

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

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

Важливість запуску JavaScript у VS Code

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

  • Виконувати та тестувати код: ви можете писати та виконувати код JavaScript, не виходячи з редактора. Цей редактор розглядатиме все, що ви пишете у файлах із розширенням .js, як код JavaScript. Цей редактор коду також виділить помилки у вашому коді під час написання та спростить налагодження.
  • Він має вбудований термінал: вам не потрібно залишати редактор коду, щоб запускати команди для створення нових папок чи файлів або виконувати контроль версій. Цей термінал також дозволяє переглядати повідомлення про помилки.
  • Велика екосистема: ви завжди можете шукати розширення, якщо функція, яку ви шукаєте, не підтримується кодом VS. Ви можете використовувати такі розширення для додаткових функцій і отримати підтримку для різних бібліотек і фреймворків.
  • Гаряче перезавантаження та живий сервер: ви можете ввімкнути автозбереження для свого коду JavaScript на VS Code. Параметр живого сервера також дозволяє запускати код JavaScript у вашому браузері під час кодування. Функція гарячого перезавантаження гарантує, що редактор коду автоматично вибере всі зміни, і вам не доведеться перезапускати живий сервер.
  • IntelliSense та доповнення коду: іноді редакторам коду просто потрібно, щоб ви почали писати код, і вони запропонують пропозиції за допомогою інтелектуальних пропозицій коду та автозавершення. Ця функція заощадить ваш час; вам просто потрібно зосередитися на логіці.
  • Кросплатформна сумісність: Ви можете встановити VS Code на macOS, Linux і Windows. Цей редактор коду також підтримує TypeScript, верхній індекс JavaScript, який представляє типи.
  Шпаргалка для програм для редагування відео для вашого iPhone

Запуск JavaScript у VS Code

Налаштувати середовище для виконання коду JavaScript легко, незалежно від вашої операційної системи. В ідеалі ваша машина повинна мати принаймні 4 ГБ оперативної пам’яті для цих установок. Виконайте ці дії, щоб почати.

Налаштуйте Node.js

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

Ти можеш завантажити Node.js безкоштовно, якщо ви ще не маєте його на своїй машині. Ви також можете перевірити, чи він встановлений на вашій машині, використовуючи цю команду:

node -v

Якщо його встановлено, ви побачите щось подібне на своєму терміналі:

Налаштування коду Visual Studio для розробки 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. Однак нам потрібно зрозуміти, що робить цей код. У нас є функція, яку ми назвали «isEven». Наша функція приймає число та повертає «істина», якщо число ділиться на два. Однак, якщо число не ділиться на два, воно поверне «false».

  Як використовувати людський брандмауер у вашій стратегії кібербезпеки?

Тепер ми можемо виконати цю команду:

node app.js

Ви можете запустити його в кореневому каталозі або терміналі VS Code.

Після запуску коду, який ми надали на останньому кроці, ми отримуємо на виході «8 є парним».

Що, якщо ми перевіримо, чи 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 непарне» — це наш результат.

Додайте необхідні розширення

Програма, яку ми створили вище, проста. Однак ви можете створити складну програму, у якій вам потрібно буде надрукувати код або навіть налагодити. Ліворуч від коду VS натисніть передостанню кнопку.

Ви також можете використовувати комбінації клавіш: CTRL+Shift+X.

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

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

Використовуйте розширення Code Runner

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

Натисніть «Установити» та ввімкніть розширення, і тепер ви готові запустити свій код. У мене є простий оператор console.log(“Hello, World!”); у моєму файлі app.js. Я можу запустити його за допомогою 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:

  • Використовуйте лінтер коду: читабельність може стати проблемою зі збільшенням розміру вашого файлу JavaScript. Ви можете використовувати таке розширення, як Красивіший ESLint щоб забезпечити раннє виявлення помилок у коді та підвищити читабельність коду.
  • Зберігайте різні мови в різних файлах: типовий інтерфейсний проект може вимагати від вас написання коду HTML, CSS і JavaScript. У вас може виникнути спокуса написати весь код в одному документі. Однак завжди переконайтеся, що ви записуєте код HTML, CSS і JavaScript у різних файлах.
  • Скористайтеся перевагами розширень: VS Code Marketplace має тисячі розширень, які полегшують роботу з різними бібліотеками. Дослідіть ринок і виберіть розширення з найкращими оцінками та документацією.
  Чому в моєму електронному листі з'являється в черзі?

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

Поки що ми надали кроки для налаштування коду VS і запуску JavaScript у цьому редакторі коду. Однак вам може знадобитися використовувати контроль версій, як-от Git, щоб відстежувати зміни у вашому коді або навіть надсилати їх у віддалене сховище, як-от GitHub. Нижче наведено наступні кроки.

  • Встановіть 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]“

Замініть “Ваше ім’я” та “[email protected]‘ з відповідними деталями.

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

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

Виконайте цю команду, щоб внести зміни:

git add .

Запустіть git status ще раз, і ви побачите щось подібне до цього:

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

git commit -m “your commit message”

Замініть «ваше повідомлення про фіксацію» чимось, що описує ваші дії.

Тепер ви можете зв’язати систему керування джерелами з платформами віддаленого сховища, такими як GitHub.

Висновок

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

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