Ти починаєш шлях у програмуванні: пишеш перші рядки коду, намагаєшся перенести їх на сайт. Важливий прогрес — розуміти, що ти робиш і як влаштований світ програмування.
Щоб писати код, потрібні інструменти. Наприклад, для тексту придумали Word. А для програмування є два варіанти: редактор коду та IDE.
Редактор коду - як текстовий редактор. Створюємо файл, називаємо його і пишемо. Для тесту і налагодження коду потрібні розширення. Вони встановлюються окремо.
IDE — інтегроване середовище розробки. Це програма, де програміст пише код, бачить помилки і спостерігає за результатом. Якщо редактор — ключ, то IDE — коробка із ключами, гайками і скотчем.
Чому IDE — не найкращий вибір
Новачок скаже: «Навіщо редактор коду для програмістів? Мені вистачить IDE.» І буде правий — більше інструментів і можливостей хочуть усі. Але в IDE є щонайменше 3 фактори, які уповільнюють навчання.
IDE частково виправляє помилки. Якщо ви забули поставити крапку з комою в рядку, то програма автоматично доповнить її. Код працюватиме. А ви не помітите помилку і допускатимете її постійно.
Менше можливостей аналізувати код. Одна з функцій — автозавершення коду. Якщо ви вчитеся програмування, то краще додумувати самому, ніж користуватися шпаргалками без ретельного аналізу.
IDE не підійдуть для веб-розробки або статичних сайтів. У редакторах багато інструментів, які уповільнюють роботу новачка. Це як встановити на гру 200 модів, а потім розгрібати: що і куди потрібно. У редакторі коду все простіше.
Якщо хочете навчитися програмувати — виберіть один із трьох редакторів коду. А коли досвід переважить нові знання — переходьте на IDE.
Топ редакторів коду від Stack Overflow: статистика 2022 року
Visual Studio Code
Один з найпопулярніших редакторів коду серед початківців і професіоналів. Програма з відкритим вихідним кодом, доступна на всіх платформах. Завантажити можна з офіційного сайту.
VS Code працює майже з усіма існуючими мовами програмування. Якщо в списку коробкової версії якоїсь не вистачає — скачайте плагін.
Що вміє VS Code.
Розумне автодоповнення. Редактор аналізує, що ви хочете написати, і пропонує закінчити команду замість вас. А ще покаже підказки та пояснення. Стане в нагоді, якщо забули змінну або назву команди з уроку.
Мультикурсор, множинне виділення і пошук. З першою функцією можна змінювати значення на кількох однакових рядках. Друга допомагає знайти всі однакові слова або команди. Редагувати простіше, а змінювати змінні — швидше.
Базова розмітка HTML-документу. У Visual Studio Code додано функцію Emmet. Припустимо, вам потрібно написати файл у HTML. Замість прописування стандартних для всіх файлів тегів (title, head, body), достатньо написати (!) і натиснути Enter. Редактор автоматично підставить шаблон HTML.
Запам'ятайте функцію Emmet. Знадобиться під час аналізу наступних редакторів.
Пошук за кодом. У великій програмі легко загубитися — складно згадати, що писав на початку. VS Code показує функції, опис змінної або інші параметри. Це корисно і коли аналізуєш чужий код — який шматок за що відповідає.
Як тестувати результати. Редактор коду не вміє показувати результати роботи. Для цього потрібно завантажити розширення Live HTML Previewer. Знаходиться в розділі «Extensions». Щоб потрапити в розділ, тиснемо Ctrl+Shift+X або на останній значок панелі управління зліва.
Після встановлення і запуску плагіна можна переглянути, як HTML і CSS відображаються на сторінці. Зручно, якщо ви шукали редактор коду для веб-розробки.
Atom
Безкоштовний редактор від GitHub і Microsoft. Фішка програми в GitHub — у Atom вбудована інтеграція з git-репозиторіями. Для новачка це мало що говорить. Але для досвідченого програміста це 2 параметри.
Система контролю версій. У репозиторії зберігаються всі записи коду: як старі, так і нові. Якщо в останньому оновленні програма не працює, можна відновити попередню. Знайти помилку і випустити іншу версію програми.
Сумісна робота. Приєднайте до репозиторію кілька розробників: вони зможуть разом із вами працювати над кодом і спостерігати за зміною версій. Для новачка ця функція важливіша за першу. Наприклад, коли людина працює з ментором. Той може перевірити помилки та покращити код з іншого ПК.
Завантажити програму можна з офіційного сайту.
Редактор працює на всіх доступних платформах.
Інші можливості Atom.
Автозаповнення коду. Немає в коробковій версії. Щоб додати функцію, потрібно завантажити розширення Autocomplete ++. Усі розширення доступні в налаштуваннях редактора: File-Settings-Packages.
Базова розмітка і дозаповнення рядків коду (Emmet). Теж потрібно завантажувати розширення.
Можливість створити розширення. Atom написаний на HTML, CSS і JavaScript. Якщо ви досить досвідчений програміст, знаєте CSS і чогось не вистачає в редакторі — можна написати розширення.
Попередній перегляд результатів. Плагін MarkDown Review.
Карта коду — якщо забули початковий. Розширення minimap.
Висновок: Atom — гнучкий редактор коду. Якщо ви знаєте всі розширення, які знадобляться новачкові — редактор підійде замість Visual Studio Code.
Примітка: у Atom немає пакетів інтерфейсу російською або українською.
Sublime Text 3
Редактор для готових боротися з повідомленнями і не платити $99 за преміум. Функції доступні і в безкоштовній версії. Але при кожному збереженні файлу програма настирливо намагається продати платну.
Sublime Text — конкурент Visual Studio Code. Однаково швидко обробляє HTML-сторінку або програму в тисячу рядків коду. Після встановлення підсвічує синтаксис усіх доступних мов програмування, доповнює код і закриває теги.
Завантажити програму з офіційного сайту.
Якщо в програмі потрібна російська мова або Emmet — потрібно завантажувати розширення.
Інші особливості Sublime Text 3.
Поділ робочого вікна. Вам часто доведеться писати код кількома мовами. Наприклад, одночасно працювати в редакторі на JS, HTML і CSS. У Sublime Text можна розділити екран на кілька блоків і одночасно писати код для різних мов.
Для цього заходимо у View-Layouts. Обираємо кількість колонок.
Розумний пошук. Уявімо, що ми написали код на 150 рядків. У 10 з них однакова змінна — припустимо, Ольга. Нам потрібно знайти змінну і замінити Ольгу на інше значення.
У Sublime Text заходимо в Find. Пишемо назву і натискаємо Find All. Програма підсвітить усі значення і дозволить змінювати. Все одразу.
Проблема для новачків у Sublime Text 3 — встановлення плагінів. Налаштування Packages немає після встановлення програми. Щоб встановити розширення, дотримуємося алгоритму:
-
Відкриваємо панель Tools-Command Palette (або CTRL+SHIFT+P).
-
Вводимо Install Package Control.
-
Через Command Palette вводимо Install Package.
-
Відкриється панель, де шукаємо потрібне розширення. Для прикладу взяли Emmet.
Що порадите обрати?
Часто новачки встановлюють купу редакторів коду. Ще IDE та інші непотрібні речі для навчання програмуванню. На це витрачається час. А людина стрибає від одного до іншого в пошуках найкращого варіанту.
Але сила новачка — не в інструменті. А в умінні застосовувати знання на практиці.
Почніть із VS Code. Редактор підходить для всіх популярних мов і платформ. Поки пишете, вам автоматично підсвічує синтаксис і помилки. А з вбудованим Emmet доповните код, якщо забули його частину або правильне написання.
Як працювати з VS Code, розповідаємо на курсі Комп'ютерної Академії IT STEP - «Front-end-розробка». Приєднуйтесь.
