Що найкраще після кодування? Редактор коду, звичайно!
Редактори коду є другою за значимістю причиною воєн програмістів (першою є форматування коду).
Для деяких Vim є єдиним розумним редактором, коли-небудь створеним, тоді як для інших усе, що не підходить до спірально-крутого світу Emacs, схожого на Inception, придатне лише для глузування. Якщо ви дуже шукаєте уваги, усе, що вам потрібно зробити, це зайти до спільноти програмістів і почати тему на кшталт «Чому я вважаю, що X (виберіть будь-який популярний редактор коду) поганий/найкращий», взяти пива та розслабитися.
Аргументи, контраргументи та образи продовжуватимуть литися в обговоренні та з нього всю ніч, і пройде багато місяців, перш ніж отрута в темі охолоне.
Питання: чому?
Звичайно, людям вдається зробити велике з усього, але я думаю, що редактори коду є особливими, коли справа доходить до програмістів. Типовий програміст витрачає майже весь свій час (більше 98%, якщо б я міг побитися об заклад) на обраному редакторі коду. Вони знають, як працювати з редактором — його сильні та слабкі сторони, обмеження, примхи та приховані перлини.
Немає нічого більшого розчарування, ніж боротися з редактором під час написання коду (подумайте, як це дратує, коли вам доводиться писати довгий і терміновий електронний лист на новій клавіатурі!). Редактори коду зменшують психічне тертя та дозволяють вам бути більш продуктивними, тому вони такі важливі та привертають так багато уваги.
Отже, який редактор коду найкращий?
Чесно кажучи, я навіть не наважуся туди поїхати! 😀 😀
Однак, якщо ви любите веб-розробку, я хочу, щоб ви подумали про альтернативу — онлайн-редактори коду! Ви також можете назвати їх хмарними редакторами коду.
Не плутайте редактор коду з інтегрованим середовищем розробки (IDE). Це дві різні речі, і як розробник, ви повинні бути знайомі з цими багатомовними IDE.
У двох словах, це редактори, які повністю розміщені на віддаленому сервері та доступні через браузер.
Звучить дивно, правда?
Я теж так відчув, коли натрапив на них 3-4 роки тому. Чому, в біса, хтось повинен хотіти передати все дурному браузеру?
Чи може він навіть конкурувати з вбудованим редактором коду?
Виявляється, у більшості випадків, і особливо для веб-розробки, відповідь – так. Зараз, хоча я не вважаю онлайн-редактори основним засобом, я все частіше використовую їх у конкретних сценаріях.
Перш ніж ми заглибимося в те, які редактори коду існують для використання, давайте зупинимось і подумаємо, коли онлайн-редактори коду можуть мати сенс.
Нульова установка
Я не знаю, як ви, але я не сподіваюся налаштувати мій улюблений редактор на свій смак у новій системі. Плагіни, теми, шрифти, ярлики, фрагменти, налаштування . . . Існує нескінченний список речей, які необхідно збалансувати, перш ніж все стане придатним для використання. Легко щось не помітити, щоб потім дратуватися, коли ваш робочий процес переривається.
Навпаки, немає чого робити з онлайн-редактором після завершення першого налаштування. Офіційні збірки, оновлення, нічні збірки, підтримувані платформи, архітектура системи, синхронізація FTP, конвеєри CI/CD — усе це не має значення, якщо у вас є браузер!
Співпраця
Найчастіше вам потрібно співпрацювати з іншими розробниками, коли вирішуєте проблеми чи щось налагоджуєте.
Традиційний редактор коду не створений для цього — немає можливостей для одночасного редагування коду, коментування чи підсвічування, і додавати його підтримку складно.
Безпека даних
Зрозуміло, що сьогодні жоден проект не обходиться без контролю версій, а це означає, що копія коду завжди існує в репозиторії. Тим не менш, бувають випадки, коли контролю версій недостатньо:
- Ви забули натиснути щойно створені коміти, і ваш ноутбук загориться.
- У вас є інші важливі файли та дампи даних, з якими взаємодіє ваш код, хоча вони не є частиною поточної програми. Що з ними станеться, якщо ваш ноутбук загориться?
(Добре, схоже, я одержимий горінням зошитів, але ви зрозуміли суть, чи не так?!)
Дотримання дисципліни
Це також можна було б заперечити в суді з прав розробників (якщо така річ існує), але правда в тому, що розробники рідко жертвують своїми примхами заради загального блага.
Наприклад, запеклий ентузіаст Sublime Text коли-небудь повністю прийме будь-який із чудових редакторів JetBrains і знайде будь-яку можливість вказати на його потребу в пам’яті та повільнішу продуктивність.
Те ж саме стосується табуляції проти пробілів (або навіть табуляції з двома пробілами проти табуляції з чотирма пробілами) — ви наївні, якщо думаєте, що програмісти у вашій команді не стримаються.
У таких випадках онлайн-редактор є благом — ви вирішуєте налаштування для проектів (навіть форматування коду), і він просто відмовиться приймати роботу, доки не буде відповідати всім стандартам. Можливо, суворо для особистості, але чудово для проекту!
Зараз у мене закінчуються варіанти використання, тож давайте перейдемо до того, які варіанти ми маємо, коли справа стосується онлайн-редакторів коду, особливо для веб-розробки.
JSFiddle
Поки JSFiddle не може замінити повноцінний текстовий редактор, він чертовски добре справляється з одноразовими інтерфейсними сценаріями.
Він настільки популярний, що сайти запитань і відповідей, такі як StackOverflow, уже підтримують вбудовування посилань JSFiddle безпосередньо у свою платформу.
Щоб швидко почати роботу, JSFiddle пропонує кілька шаблонів на початку; це означає, що якщо ви хочете запустити демонстрацію, скажімо, React, все, що вам потрібно зробити, це натиснути відповідну кнопку та почати писати код. Після того, як ви натиснете «Зберегти», «скрипка» буде збережена, ви отримаєте постійну URL-адресу (перегляньте цю дурну скрипку, яку я створив: https://jsfiddle.net/tuqd76c4/ і зауважте, що ви можете внести свої зміни та натиснути «Зберегти», щоб створити нову версія цієї URL-адреси).
Ось що робить JSFiddle життєздатною платформою для зовнішньої веб-розробки:
- Безкоштовне використання (без прихованої комісії чи безкоштовних функцій). JSFiddle підтримує себе за допомогою реклами (принаймні на момент написання), і ви можете побачити рекламу Adobe у нижньому лівому куті знімка екрана вище.
- Функції спільної роботи над кодом — ідеальні для спільного створення концепцій, інтерв’ю тощо.
- Кілька макетів, розмірів шрифтів, світлі/темні теми тощо.
- Форматування коду (приведення в порядок), майбутня підтримка лінтерів (CSS і JS) тощо.
А тепер, ридайте, ридайте, про погане:
- JSFiddle — це виключно інтерфейсний редактор. Немає способу кодувати та запускати вашу улюблену серверну мову.
- Тут немає поняття файлів і папок (або завантажень, якщо на те пішло). Все, що у вас є, це єдиний простір для коду, незалежно від того, скільки його там.
- JSFiddle не можна використовувати для розміщення коду на вашому сервері. Код має бути на JSFiddle і відкритий весь час.
- Немає способу створити конвеєр CI/CD, використовувати Git тощо.
Тим не менш, JSFiddle має свою перевагу, коли вам потрібно надати докази концепції та співпрацювати зі швидкістю світла. Це є і залишатиметься основною ідентифікацією серед онлайн-редакторів.
CodeSandbox
CodeSandbox можна розглядати як набагато потужнішу та повнішу версію JSFiddle. Відповідно до своєї назви, CodeSandbox надає повний редактор коду та пісочничне середовище для інтерфейсної розробки.
CodeSandbox — це справжній потужний і солодкий, солодкий продукт. У мене закінчився б папір, якщо я спробую перерахувати всі його переваги, але ось кілька вбивчих функцій:
- Підтримка Npm: так, ви можете додати майже будь-який пакет, доступний на npm.
- Файли, папки, модулі: Ви можете розділити свій код на кілька файлів, додавати/видаляти зображення з загальнодоступної папки та створювати/імпортувати модулі, як вважаєте за потрібне. Робочий процес схожий на сучасний збірник модулів, тому вам не потрібно (майже) нічого налаштовувати.
- Підтримка TypeScript, гаряче перезавантаження, експорт GitHub, розміщення статичних файлів тощо.
- Він побудований на редакторі Monaco, тому самому звірі, який керує фаворитом VSCode редактор. Завдяки цьому такі потужні функції, як «Перейти», «Знайти посилання» та необхідний рефакторинг доступні для вас!
- Підтримка фрагментів для Еммет
- Інтегровані DevTools, linting, накладення помилок, інфраструктури тестування (Jest), прив’язки клавіш тощо.
- Потужний CLI для прямого імпорту локальних проектів у CodeSandbox.
Хоча безкоштовна версія CodeSandbox не підтримує приватний код, ви можете отримати цю функцію (і збільшити загальні обмеження на розмір), допомагаючи їм на Patreon всього за 5 доларів на місяць (платіть, скільки хочете, до 50 доларів на місяць).
CodeAnywhere
Однією з проблем більшості редакторів коду в цьому списку (принаймні поки що) є те, що вони очікують, що ви постійно зберігаєте код на їхніх серверах, або вимагають від вас регулярної синхронізації коду через командний рядок.
Не так з CodeAnywhere.
Найпотужніший CodeAnywhere має дві особливості, які виділяються для мене:
- Попередньо зібрані образи контейнерів для 72+ мов програмування та фреймворків. Це означає, що ви можете створити нове середовище розробки прямо з редактора! Звичайно, код автоматично розміщується в новоствореному контейнері, і файли подаються безпосередньо звідти.
- Підключайтеся до будь-чого. Так, буквально все. Ви не зобов’язані зберігати свій код на серверах CodeAnywhere. Незалежно від того, чи знаходиться ваш код на FTP, платформах обміну файлами, як-от Dropbox, Amazon S3, чи на складних платформах контролю версій, як-от GitHub, ви можете легко налаштувати CodeAnywhere для читання з цього джерела та запису в нього за допомогою редактора коду виключно для . . . Ну і редагування коду. 😛
Ще одна річ, яку я хочу зазначити: якщо ви не влаштовуєте Git, коли мова заходить про перегляд історії та відмінностей, CodeAnywhere може відчути, що ви зітхнете з полегшенням. Редактор використовує свою систему відмінностей для порівняння файлів, яка дозволяє вам порівнювати два файли в будь-яких двох версіях (версія створюється кожного разу, коли ви зберігаєте файл).
Однак у редакціях є невелика заковика — безкоштовна версія дозволяє підтримувати лише одну редакцію, тоді як найменший платний план дозволяє щонайбільше 20 редакцій. Взагалі кажучи, це не проблема, оскільки ви рідко хочете дивитися далі останньої 20-ї редакції, але оскільки більшість програмістів мають звичку натискати Save кілька разів на хвилину, це може стати болючим.
Все сказано та зроблено, CodeAnywhere — це надійна та приємна пропозиція для тих, хто хоче перейти в хмару й залишитися там. 🙂 Оскільки його можливості виходять за межі зовнішнього коду, на мій погляд, його настійно рекомендую!
StackBlitz
Якщо ви в основному любите інтерфейс і не можете відійти від інтерфейсу VSCode, StackBlitz створено саме для вас.
Не бачите нічого особливого?
Я теж цього не зробив, поки не прокрутив трохи вниз і не натиснув кнопку Angular. Бум!
Здогадайтеся, це не навмисно створено, щоб виглядати як VSCode — воно побудовано на основі редактора VSCode! Настільки, що ви можете встановлювати розширення, шукати в папках і впорядковувати файли саме так, як ви очікуєте від звичайного екземпляра VSCode.
Але зачекайте, є ще щось!
Ви могли чи не помітили, що:
- Усі програми, створені на StackBlitz, також автоматично розгортаються на їхніх серверах! Отже, ця іграшкова програма Angular, яку я щойно створив, автоматично розміщена на https://angular-yvyi2j.stackblitz.io/. Швидше за все, URL-адреса все ще працює (хоча завантажуватиметься повільно, як і слід було очікувати, коли розміщено безкоштовно)!
- Ви можете розділити та поділитися проектом. Ділячись, ви отримуєте точніший контроль над тим, що можуть робити інші.
- Ви можете підключитися до репозиторію GitHub і дозволити безпосередньо завантажувати/штовхати код звідти. Або ви можете просто завантажити проект як zip-файл старим добрим способом.
Але зачекайте, є ще щось!
Серйозно! 😀
Ось список офіційних функцій, які пропонує StackBlitz:
- Вбудована підтримка Firebase (я особисто не користуюся такою підтримкою, але це добре для тих, хто не хоче занурюватися в темні глибини серверної частини)
- Intellisense, пошук проекту
- Гаряче перезавантаження під час введення
- Імпорт пакетів npm
- Редагуйте в режимі офлайн, коли немає підключення!
StackBlitz сповнений (гарних) сюрпризів, коли справа доходить до усунення перешкод у веб-розробці та розгортанні. Вставлення VSCode у ваш веб-сайт – це вже не те, про що мрієте!
AWS Cloud9
Cloud9 був, мабуть, першим IDE на основі браузера, який пропонував серйозні функції та сприйняв ідею мейнстріму браузера як редактора. Не дивно, що Amazon пізніше придбав його, і сьогодні Cloud9 є частиною пропозицій AWS.
Якщо ви навіть віддалено приєднані до платформи AWS (або зацікавлені в ній), Cloud9 — це те, де ваші пошуки ідеального (гаразду, майже ідеального) редактора закінчуються.
Давайте подивимося чому:
- Додаткова плата за використання Cloud9 не стягується. Ви можете підключити Cloud9 до існуючого/нового обчислювального екземпляра AWS, і ви платите лише за цей екземпляр. Також можна підключитися до стороннього сервера через SSH — абсолютно безкоштовно! 🙂
- Першокласна підтримка програм AWS Serverless (налагодження тощо)
- Прямий термінальний доступ до 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 тощо).
Тея
Якщо ви завзятий шанувальник SOLID і прискіпливий архітектор програмного забезпечення, Тея IDE буде лоскотати вашу кістку розлуки. Це кодована на TypeScript (п’ять балів за стиль відразу!) кодова IDE, яка має абсолютно окремі інтерфейс і серверну частину. Інтерфейс працює у браузері, а серверна частина може бути де завгодно — локальна машина чи хмара!
Але це ще не все — інтерфейс можна запускати як програму Electron із повнофункціональним ізольованим середовищем браузера, що надає вам вигляд і відчуття рідної програми для настільних комп’ютерів, якщо ви її бажаєте.
Кодові простори GitHub
Кодові простори GitHub надає високопродуктивні віртуальні машини для запуску кодів для розробки веб-додатків. Використовуючи код Visual Studio, який включає редактор і повну екосистему, вам стане легше працювати в браузері.
Спробуйте останнє середовище розробника для проектів разом із попередньо зібраними образами. Ви відчуєте низьку затримку в різних регіонах, розширивши свої віртуальні машини до 64 ГБ оперативної пам’яті та 32 ядер. Почніть кодувати зі стандартизованих середовищ, характеристик апаратного забезпечення, налаштувань редактора, розширень і вимог до середовища виконання.
Ви можете ізолювати залежності між проектами за допомогою docker-compose та контейнерів. Крім того, легко переглядайте зміни, які ви внесли в браузері, і діліться загальнодоступними та приватними портами з товаришами по команді. Ви також можете редагувати або додавати навіть такі деталі, як пробіли, вкладки, світлі, темні, прикрашати, гарніші, сонячні, монокай та багато іншого.
Початківці, які хочуть спробувати удачу, можуть безкоштовно використовувати GitHub Codespaces з обмеженими перевагами, але у вас буде достатньо функцій, щоб продовжувати. Якщо ви команда або підприємство, ви можете почати використовувати GitHub Codespaces за 40 доларів США за користувача на рік.
JetBrains
Отримайте свіжі, відтворювані, готові до використання та автоматизовані космічні хмарні середовища розробки за лічені секунди та почніть кодувати за допомогою JetBrains IDE – космос. Це єдине рішення для програмних проектів і команд, яке бере на себе відповідальність за повний життєвий цикл розробки, починаючи від конвеєрів CI/CD і розміщення репозиторіїв Git до пакетів публікації.
Space — це виділена віртуальна машина з контейнером Docker. Ви можете встановити всі необхідні бібліотеки та інструменти, які вам потрібні в проекті. Оптимізуйте та пришвидште процес адаптації, надавши спільний доступ до робочих областей кодування та відтворивши їх у будь-який час.
Дозвольте новачкам миттєво розпочати розробку коду, не витрачаючи час на розробку локальної машини. Ви отримаєте повну готову до використання IDE, коли вам знадобиться почати писати код, налагоджувати та запускати його за лічені секунди, щоб перевірити результат. JetBrains пропонує централізовану платформу для керування середовищами розробників.
Усе, що ви робите, і кожен ресурс, який ви використовуєте, відстежується в одному місці. Ви також можете легко інтегрувати ресурси в конвеєр розробки. Відповідно до вашого проекту ви можете вибрати бажаний тип віртуальної машини відповідно до розміру проекту. Space заощадить ваші ресурси, перевівши робочу область кодування в сплячий режим, щоб ви могли почати працювати над нею після перерви.
Почніть свою поїздку сьогодні та відчуйте красу цього звіра безкоштовно.
CodeTasty
CodeTasty це розширювана, розумна та сучасна хмарна IDE з багатьма додатковими функціями, які вам сподобаються. Це допомагає вам більш розумно писати чистий і читабельний код у режимі реального часу на вашій улюбленій мові.
Отримайте редактор коду, щоб мати зручну роботу з вбудованою компіляцією, автозавершенням коду, інструментами виявлення помилок і багатьма іншими. Не турбуйтеся про налаштування; встаньте і почніть працювати над проектами прямо перед вами.
Редагуючи коди в хмарі, ви отримаєте такі ж відчуття, як і на робочому столі, насолоджуючись тією ж продуктивністю та швидкістю. CodeTasty розуміє потреби кожного розробника; і, отже, дозволяє встановлювати скільки завгодно розширень для підвищення продуктивності. Крім того, він підтримує понад 40 мов і сотні рядків коду в одному файлі.
Спробуйте CodeTasty безкоштовно, щоб отримати одну робочу область ізольованого програмного середовища, 2 робочі області FTP/SSH, співпрацю, варіант терміналу та 2 співавторів. Ви також можете почати з платного плану 4 долари США на місяць і отримати можливість переглянути свої коди перед запуском.
Replit
Вивчайте, пишіть і створюйте код Replitбезкоштовна IDE для спільної роботи в браузері, яка підтримує понад 50 мов, не витрачаючи багато часу на налаштування. Ви можете почати кодувати своєю мовою на будь-якому пристрої, операційній системі та платформі.
Запросіть своїх товаришів по команді, колег або друзів редагувати код у Google Документах. Ви можете імпортувати свій код до GitHub для запуску та співпраці зі сховищами 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 тощо, для редагування файлів або входу в систему. Натомість ви можете легко й ефективно керувати серверами так само, як на робочому столі.
Пройдіть тест-драйв із безкоштовним планом із 2 ядрами та 2 ГБ пам’яті. Або скористайтеся необмеженим терміном служби сервера за 9,80 доларів США на місяць і отримайте додатковий 1 ГБ дискового простору.
Висновок
Це більш-менш охоплює всі IDE та редактори коду, які існують на момент написання. У цьому списку я пропустив два типи пропозицій: ті, які зосереджені виключно на співбесідах і не мають повноцінного середовища (за винятком нашого улюбленого класичного JSFiddle, звісно), і ті, які, здається, нічого не пропонують суттєвий і мав трохи більше, ніж витончену домашню сторінку.
Якщо вам потрібно щось легке для веб-розробки, ви можете дослідити ці редактори коду.