Редактор Коду: Ваш Вірний Супутник Після Кодування
Після написання коду, що є найбільш важливим інструментом? Без сумніву, це редактор коду! Ці програми є предметом численних дискусій та суперечок серед програмістів, поступаючись лише дискусіям щодо форматування коду.
Для одних, Vim є вершиною редакторської майстерності, тоді як інші вважають, що будь-який редактор, який не є складним та багатофункціональним, як Emacs, не заслуговує уваги. Щоб розпалити дискусію в програмістській спільноті, достатньо лише почати тему на зразок: “Чому я вважаю X (назва популярного редактора) поганим/найкращим”. Далі, можна спостерігати за розгортанням справжньої баталії думок.
Спірні питання, аргументи “за” і “проти”, та навіть особисті образи будуть литися рікою протягом усього обговорення, і може пройти багато часу, перш ніж пристрасті вщухнуть.
Чому ж редактори коду викликають такі емоції?
Звісно, люди схильні надавати великого значення різним речам, але редактори коду є особливо важливими для програмістів. Звичайний розробник проводить майже весь свій час (можливо, навіть більше 98%) в обраному редакторі. Вони добре знайомі з його функціоналом, сильними та слабкими сторонами, обмеженнями, особливостями та прихованими можливостями.
Ніщо так не розчаровує, як боротьба з редактором під час кодування (подумайте, як це дратує, коли вам потрібно написати довгий і терміновий електронний лист на незнайомій клавіатурі!). Редактори коду усувають зайві зусилля, дозволяючи програмістам бути більш продуктивними. Саме тому вони такі важливі і викликають стільки дискусій.
Тож який редактор коду найкращий?
Чесно кажучи, я не ризикну давати однозначну відповідь! 😀 😀
Проте, якщо ви займаєтеся веб-розробкою, я хотів би звернути вашу увагу на альтернативу – онлайн-редактори коду, які також називають хмарними редакторами.
Важливо не плутати редактори коду з інтегрованими середовищами розробки (IDE). Це різні інструменти, і як розробник, ви повинні розуміти відмінності між ними.
Простіше кажучи, онлайн-редактори коду – це редактори, що повністю розміщені на віддалених серверах і доступні через веб-браузер.
Звучить дивно, чи не так?
Спершу я також був скептично налаштований, коли познайомився з ними 3-4 роки тому. Навіщо комусь передавати всю роботу в браузер?
Чи можуть вони зрівнятися з традиційними редакторами коду?
Виявляється, в багатьох випадках, особливо у веб-розробці, відповідь – так. Наразі, я не використовую онлайн-редактори як основний інструмент, але все частіше вдаюся до них у певних ситуаціях.
Перш ніж розглядати конкретні онлайн-редактори, давайте визначимо, коли їх використання є доцільним.
Миттєва готовність до роботи
Не знаю, як ви, але я точно не в захваті від перспективи налаштування мого улюбленого редактора на новому комп’ютері. Плагіни, теми, шрифти, гарячі клавіші, фрагменти коду, налаштування… Існує безліч параметрів, які потрібно налаштувати, щоб все працювало як слід. Легко щось пропустити, а потім дратуватися, коли робочий процес переривається.
Натомість, з онлайн-редактором, після початкового налаштування, вам більше нічого не потрібно робити. Офіційні збірки, оновлення, нічні збірки, підтримувані платформи, архітектура системи, синхронізація FTP, CI/CD – все це не має значення, якщо у вас є веб-браузер!
Співпраця
Часто, під час вирішення проблем або налагодження коду, потрібна співпраця з іншими розробниками.
Традиційні редактори коду не призначені для цього – вони не мають можливостей для одночасного редагування, коментування або виділення коду, і їх додавання є складним завданням.
Безпека даних
Звісно, сьогодні жоден проект не обходиться без системи контролю версій, що означає наявність копії коду в репозиторії. Проте, бувають ситуації, коли цього недостатньо:
- Ви забули закомітити щойно внесені зміни, а ваш ноутбук вийшов з ладу.
- У вас є інші важливі файли, наприклад, дампи даних, з якими взаємодіє ваш код, але вони не є частиною програми. Що з ними станеться, якщо ваш комп’ютер перестане працювати?
(Гаразд, схоже, я зациклений на несправностях комп’ютерів, але ви розумієте суть, чи не так?)
Дисципліна
Цю тезу можна оскаржити у “суді прав розробників” (якщо такий існує), але факт залишається фактом: розробники рідко відмовляються від своїх звичок заради спільного блага.
Наприклад, прихильник Sublime Text ніколи не визнає переваги будь-якого з потужних редакторів JetBrains, постійно вказуючи на його високі вимоги до пам’яті та нижчу продуктивність.
Те саме стосується вибору між табуляцією та пробілами (чи навіть між двома пробілами та чотирма). Не варто думати, що програмісти у вашій команді легко підуть на компроміс.
У таких випадках онлайн-редактор є справжнім благом – ви визначаєте налаштування для проекту (навіть форматування коду), і редактор відмовляється приймати роботу, поки вона не відповідає стандартам. Це може бути жорстко, але чудово для проекту!
Гаразд, у мене закінчуються ідеї щодо ситуацій, коли онлайн-редактори є корисними. Давайте перейдемо до розгляду доступних варіантів, особливо для веб-розробки.
JSFiddle
Хоча JSFiddle не може замінити повноцінний текстовий редактор, він відмінно підходить для швидких експериментів з інтерфейсом.
Він настільки популярний, що такі сайти, як StackOverflow, вже підтримують вбудовування посилань JSFiddle.
JSFiddle пропонує кілька шаблонів для швидкого старту, тож якщо ви хочете створити, скажімо, демонстрацію React, вам достатньо натиснути відповідну кнопку та почати писати код. Після натискання “Зберегти” ваш код буде збережений, і ви отримаєте постійне посилання. (Погляньте на цей простий приклад, який я створив: https://jsfiddle.net/tuqd76c4/. Зверніть увагу, що ви можете внести свої зміни та натиснути “Зберегти”, щоб створити нову версію цього посилання).
Ось що робить JSFiddle чудовою платформою для веб-розробки:
- Безкоштовне використання (без прихованих платежів або обмежень). JSFiddle підтримується за рахунок реклами, як можна побачити рекламу Adobe в нижньому лівому куті на скріншоті вище.
- Спільна робота над кодом – ідеальна для спільної розробки ідей, проведення співбесід тощо.
- Налаштування макетів, розмірів шрифтів, світлих/темних тем тощо.
- Форматування коду та майбутня підтримка лінтерів (CSS та JS).
Тепер про недоліки:
- JSFiddle – це виключно редактор для інтерфейсної частини. Немає можливості писати та запускати код серверної мови.
- Немає підтримки файлів та папок (або завантажень). Єдиний простір для коду, незалежно від його обсягу.
- JSFiddle не можна використовувати для розміщення коду на вашому сервері. Код повинен залишатися на платформі JSFiddle і бути доступним постійно.
- Відсутня можливість інтеграції з CI/CD та Git.
Незважаючи на це, JSFiddle залишається чудовим інструментом для швидкого створення прототипів та співпраці. Він є і буде основним інструментом серед онлайн-редакторів.
CodeSandbox
CodeSandbox – це більш потужна та повноцінна версія JSFiddle. Як випливає з назви, CodeSandbox надає повноцінне середовище для інтерфейсної розробки.
CodeSandbox – це справді потужний і чудовий інструмент. Мені не вистачить паперу, щоб перерахувати всі його переваги, але ось кілька важливих:
- Підтримка npm: ви можете додати майже будь-який пакет, доступний в npm.
- Файли, папки, модулі: ви можете розділяти код на файли, додавати/видаляти зображення з загальнодоступної папки та створювати/імпортувати модулі.
- Підтримка TypeScript, “гаряча” перезагрузка, експорт в GitHub, хостинг статичних файлів.
- CodeSandbox використовує редактор Monaco, такий же, як у VSCode. Завдяки цьому, доступні такі потужні функції, як “Перейти до визначення”, “Знайти посилання” та рефакторинг.
- Підтримка Emmet для створення фрагментів коду.
- Інтегровані DevTools, лінтери, виявлення помилок, інфраструктури тестування (Jest), гарячі клавіші.
- Потужний CLI для імпорту локальних проектів в CodeSandbox.
Хоча безкоштовна версія CodeSandbox не підтримує приватний код, цю функцію можна розблокувати, підтримуючи розробників на Patreon, всього за 5 доларів на місяць.
CodeAnywhere
Більшість редакторів у цьому списку вимагають, щоб ви зберігали код на їхніх серверах або регулярно синхронізували його через командний рядок.
З CodeAnywhere все інакше.
Дві особливості CodeAnywhere вразили мене найбільше:
- Попередньо налаштовані образи контейнерів для понад 72 мов програмування та фреймворків. Ви можете створити нове середовище розробки безпосередньо з редактора! Код автоматично розміщується в новому контейнері, а файли доступні безпосередньо звідти.
- Можливість підключення до будь-якого джерела. Ви не зобов’язані зберігати код на серверах CodeAnywhere. Незалежно від того, де знаходиться ваш код: на FTP, Dropbox, Amazon S3 або GitHub, ви можете легко налаштувати CodeAnywhere для читання та запису даних.
Також варто зазначити, що якщо вам не дуже подобається Git для перегляду історії змін, CodeAnywhere може вас приємно здивувати. Редактор використовує свою власну систему для порівняння файлів, що дозволяє порівнювати будь-які дві версії файлу (нова версія створюється кожного разу, коли ви зберігаєте файл).
Проте, є один нюанс: безкоштовна версія дозволяє зберігати лише одну редакцію, тоді як найдешевший платний план дозволяє зберігати до 20 редакцій. Це не велика проблема, але оскільки більшість програмістів мають звичку зберігати файли по кілька разів за хвилину, це може виявитися незручним.
В цілому, CodeAnywhere – це надійний інструмент для тих, хто хоче перенести свою роботу в хмару. Його можливості виходять за рамки редагування інтерфейсного коду, тому я його рекомендую.
StackBlitz
Якщо вам подобається інтерфейсна розробка і ви не уявляєте життя без VSCode, StackBlitz створено саме для вас.
Нічого особливого, правда?
Я теж так думав, поки не прокрутив сторінку вниз і не натиснув кнопку Angular. І тут…
Здогадалися? Це не випадковість. StackBlitz побудований на базі редактора VSCode! Ви можете встановлювати розширення, шукати в папках і впорядковувати файли так само, як і в звичайному екземплярі VSCode.
Але це ще не все!
Можливо, ви помітили, що:
- Усі програми, створені в StackBlitz, автоматично розміщуються на їхніх серверах. Програма Angular, яку я створив, автоматично доступна за посиланням: https://angular-yvyi2j.stackblitz.io/. Швидше за все, це посилання все ще працює (хоча завантаження буде повільним, як і слід очікувати від безкоштовного хостингу)!
- Ви можете ділитися проектами з іншими та контролювати їхні можливості.
- Можна підключитися до репозиторію GitHub і завантажувати/відправляти код безпосередньо звідти. Або ж можна завантажити проект у вигляді zip-архіву.
І це ще не все!😀
Ось офіційний список функцій, що пропонує StackBlitz:
- Вбудована підтримка Firebase (я не користуюся цією функцією, але це корисно для тих, хто не хоче заглиблюватися в серверні налаштування).
- Intellisense, пошук по проекту.
- “Гаряча” перезагрузка під час введення коду.
- Імпорт npm-пакетів.
- Можливість редагування в офлайн-режимі.
StackBlitz наповнений приємними сюрпризами, що значно спрощують веб-розробку. З вбудованим VSCode, мрії стають реальністю!
AWS Cloud9
Cloud9 був, можливо, першим браузерним IDE, що запропонував серйозні можливості, і зробив ідею редагування коду в браузері більш популярною. Не дивно, що Amazon згодом придбав його. Сьогодні Cloud9 є частиною пропозицій AWS.
Якщо ви хоч трохи знайомі з платформою AWS (або зацікавлені в ній), то Cloud9 – це ідеальний вибір.
Давайте розглянемо чому:
- Cloud9 не передбачає додаткової плати за використання. Ви можете підключити Cloud9 до наявного або нового обчислювального екземпляра AWS та платити лише за цей екземпляр. Можна також підключитися до стороннього сервера через SSH – і це абсолютно безкоштовно! 🙂
- Повноцінна підтримка серверних додатків AWS.
- Прямий доступ до терміналу AWS з редактора (чесно кажучи, термінал із вкладками – це те, чого мені досі не вистачає у VSCode).
- Підтримка понад 40 мов програмування (Go, C++, Ruby, Node, Python, PHP, Java…).
Можливості для співпраці в Cloud9 також є приємним бонусом, що дозволяє проводити огляди коду та співбесіди.
Ще одна цікава функція – відтворення змін, внесених у файл, у вигляді відео. Це дуже спрощує процес перегляду:
Моя порада?
Якщо вам подобається AWS, не вагайтеся і починайте користуватися Cloud9. А якщо ви ще не працюєте в хмарі, але розглядаєте цю можливість, вибирайте AWS та інтегруйте Cloud9 у свій робочий процес. Це найкраще рішення!
Gitpod
Gitpod пропонує новий погляд на хмарні редактори коду (або IDE). Він глибоко інтегрований з GitHub, і кожного разу, коли ви додаєте код, він запускає тестування та CI/CD, щоб переконатися, що код працює на 100%.
Це чудовий варіант, якщо вам подобається VSCode і ви хочете редактор, який підтримує більшість серверних та інтерфейсних мов та фреймворків (Django, Rails, Revel тощо).
Theia
Якщо ви прихильник принципів SOLID і вимогливий архітектор програмного забезпечення, то Theia IDE вам точно сподобається. Це IDE, написаний на TypeScript, що має окремі інтерфейсну та серверні частини. Інтерфейс працює в браузері, а серверна частина може знаходитися де завгодно: на локальному комп’ютері або в хмарі!
Інтерфейс можна запускати як програму Electron, забезпечуючи вигляд і відчуття нативної програми для настільних комп’ютерів.
GitHub Codespaces
GitHub Codespaces надає потужні віртуальні машини для розробки веб-додатків. Використовуючи код Visual Studio, що включає редактор і повну екосистему, вам буде простіше працювати в браузері.
Спробуйте новітнє середовище розробки з попередньо налаштованими образами. Ви відчуєте низьку затримку в різних регіонах, розширивши віртуальні машини до 64 ГБ оперативної пам’яті та 32 ядер. Почніть кодувати у стандартизованих середовищах, налаштуваннях редактора, розширень та вимогах до середовища виконання.
Ви можете ізолювати залежності між проектами за допомогою docker-compose та контейнерів. Крім того, легко переглядайте зміни в браузері і діліться публічними та приватними портами з колегами. Ви також можете налаштувати пробіли, вкладки, теми та інші параметри редактора.
Початківці можуть безкоштовно використовувати GitHub Codespaces з обмеженими можливостями, але цього буде достатньо для старту. Команди та підприємства можуть користуватися GitHub Codespaces за 40 доларів на рік за користувача.
JetBrains
Отримайте готові до роботи, відтворювані, автоматизовані хмарні середовища розробки за лічені секунди за допомогою JetBrains IDE – Space. Це комплексне рішення для проектів та команд, що охоплює весь цикл розробки, від CI/CD та репозиторіїв Git до публікації пакетів.
Space – це виділена віртуальна машина з контейнером Docker. Ви можете встановити всі необхідні бібліотеки та інструменти, що потрібні для проекту. Спростіть та пришвидшіть адаптацію нових розробників, надаючи спільний доступ до робочих областей кодування.
Надайте новим розробникам можливість миттєво розпочати роботу над кодом без потреби налаштовувати локальну машину. Ви отримаєте готову до використання IDE, де можна писати код, налагоджувати його та запускати за лічені секунди. JetBrains пропонує централізовану платформу для керування середовищами розробників.
Усі ресурси відстежуються в одному місці. Ви також можете легко інтегрувати ресурси в конвеєр розробки. Залежно від розміру проекту ви можете обрати потрібний тип віртуальної машини. Space економить ваші ресурси, переводячи робочу область кодування в сплячий режим.
Розпочніть свою подорож сьогодні і відчуйте всі переваги безкоштовно.
CodeTasty
CodeTasty – це розширювана, інтелектуальна та сучасна хмарна IDE, яка має багато корисних функцій. Вона допомагає вам писати чистий код у режимі реального часу на вашій улюбленій мові.
Отримайте зручний редактор коду з вбудованою компіляцією, автозавершенням, інструментами виявлення помилок та іншим. Не турбуйтеся про налаштування – просто починайте працювати над проектами.
Редагуючи код у хмарі, ви отримаєте ті ж відчуття, що і на локальному комп’ютері, насолоджуючись високою продуктивністю та швидкістю. CodeTasty розуміє потреби розробників, тому дозволяє встановлювати необмежену кількість розширень. Крім того, вона підтримує понад 40 мов і тисячі рядків коду в одному файлі.
Спробуйте CodeTasty безкоштовно, щоб отримати одну робочу область, дві робочі області FTP/SSH, співпрацю, термінал та можливість залучити двох співавторів. Ви також можете почати з платного плану за 4 долари на місяць і отримати можливість переглядати свій код перед запуском.
Replit
Вивчайте, пишіть та створюйте код за допомогою Replit – безкоштовного IDE для спільної роботи в браузері, що підтримує понад 50 мов. Ви можете почати писати код на будь-якому пристрої, операційній системі та платформі.
Запрошуйте колег або друзів для редагування коду. Ви можете імпортувати свій код до GitHub для запуску та співпраці без додаткових налаштувань. Незалежно від того, чи ви добре знаєте C++, Python, CSS чи HTML, ви можете писати код і редагувати його на одній платформі.
Коли ви закінчите з кодом, він миттєво стане доступним для всього світу. У Replit є понад три мільйони програмістів. Завдяки співпраці в реальному часі, ваша команда буде більш продуктивною. Крім того, ви можете створювати програми, ботів за допомогою плагінів. Інструмент також допомагає вам розробляти проекти безпосередньо з браузера.
Зареєструйте обліковий запис і почніть кодувати зараз.
PaizaCloud
Створюйте веб-програми у браузері за допомогою PaizaCloud IDE. Це середовище веб-розробки для Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress тощо.
PaizaCloud дозволяє легко писати коди, не турбуючись про налаштування середовища. Просто відкрийте браузер, і ваше середовище буде готове протягом трьох секунд. Незалежно від того, чи використовуєте ви Mac, iPad, ОС чи Windows, ви можете працювати в одному середовищі.
Ви можете використовувати оболонки Linux для гнучкого налаштування середовища розробки. Ви також можете опублікувати свої проекти, скориставшись базовим планом.
Виконуйте команди, керуйте файлами, редагуйте коди в браузері. PaizaCloud позбавляє від необхідності використовувати команди, такі як vim, ssh. Натомість, ви можете легко та ефективно керувати серверами так само, як на робочому столі.
Протестуйте PaizaCloud з безкоштовним планом (2 ядра та 2 ГБ пам’яті). Або скористайтеся необмеженим терміном служби сервера за 9,80 доларів на місяць і отримайте додатковий 1 ГБ дискового простору.
Висновок
У цій статті ми розглянули більшість IDE та редакторів коду, доступних на момент написання. Зі списку були виключені інструменти, що орієнтовані виключно на проведення співбесід та не мають повноцінного середовища, а також ті, що не пропонують нічого суттєвого.
Якщо ви шукаєте простий у використанні редактор для веб-розробки, ці інструменти варті уваги.