Перевод статьи «12 best online code editors for web-developers».


Онлайн-редактор кода это инструмент, находящийся на удаленном сервере, доступ к которому возможен при помощи браузера. Некоторые онлайн-редакторы кода обладают функционалом, схожим с обычными текстовыми редакторами, а другие больше напоминают полноценные IDE. В этой статье мы рассмотрим и те, и другие.
Когда и для чего используются онлайн-редакторы?
Давайте подумаем над тем, в каких случаях будет удобно воспользоваться онлайн-редактором.
Сотрудничество
Наладить совместную работу с другим человеком, используя десктопные IDE, довольно сложно. А онлайн-редакторы облегчают этот процесс. Работа с ними напоминает работу с Google Docs.
Возможность поделиться кодом
При помощи онлайн-редакторов можно поделиться кодом с коллегами, друзьями, да и целым миром. Вы можете размещать встраиваемые отрывки кода или ссылки на «песочницу» в своем блоге, руководствах, документации.
Быстрое размещение новых приложений
Некоторые редакторы кода имеют интеграцию с популярными хостингами, так что вы можете разработать простое приложение и буквально за считанные минуты разместить его на хостинге, чтобы протестировать.
Онлайн-собеседования и найм разработчиков
При помощи онлайн-редакторов кода можно проводить собеседования. Таким образом интервьюер может увидеть, как кандидат подходит к решению задач и как он работает с кодом.
Прототипирование
Идеи нужно тестировать как можно раньше и как можно чаще. Проверяя свои идеи, вы можете получать немедленный фидбэк от пользователей. Функционал, предназначенный для шеринга и совместной работы, поможет вам и с этим.
Обучение
В современной веб-разработке нужно постоянно следить за последними новостями, а еще лучше — испытывать новинки в реальных условиях. Онлайн-редакторы кода позволяют это делать быстро и без ненужной возни с настройками.
Как выбрать подходящий онлайн-редактор кода?
Самые известные онлайн-редакторы кода обладают сходным набором отличных функций. К числу этих функций можно отнести автодополнение, интеграцию git, поддержку плагинов, конвейеры CI/CD и пр. Но благодаря разным мелочам один редактор кода может подходить вам больше остальных.
Давайте пробежимся по нескольким аспектам, которые нужно иметь в виду, выбирая онлайн-редактор кода (или онлайн-IDE):
- скорость работы приложения;
- для бесплатных редакторов — сколько рекламы вам будут показывать;
- интеграции с менеджерами репозиториев;
- легкость настройки;
- поддержка языков;
- поддержка NPM;
- поддержка терминала.
Основной функционал онлайн-редакторов кода
Есть определенный базовый функционал, который обязательно должен быть в онлайн-редакторах:
- возможность делиться кодом;
- настройки макета;
- возможность работать над кодом совместно с другими людьми;
- настройки табуляции;
- комментирование;
- просмотр результатов;
- базовая файловая структура.
Достоинства и недостатки онлайн-редакторов кода
Достоинства
- Не нужно ничего настраивать. Вам не придется скачивать, устанавливать и настраивать IDE.
- Возможность поделиться кодом и совместно работать над ним. Начните писать код и отправьте коллеге ссылку, чтобы он мог продолжить начатое или помог с отладкой.
- Редакторами можно пользоваться бесплатно или за небольшую плату. Подавляющее большинство онлайн-редакторов имеют бесплатные версии, функционала которых будет достаточно для обычных повседневных задач.
- Цена на основе подписки. Может быть удобно платить за пользование редактором раз в месяц, а не покупать лицензию на год.
Недостатки
- Ограниченность функционала. В некоторых редакторах кода отсутствует даже базовый функционал, так что их даже редакторами кода сложно назвать.
- Проблемы с производительностью.
- Отсутствие контроля версий. Подавляющее большинство онлайн-редакторов кода не имеют никаких интеграций с инструментами git.
- Нет интернета — нет разработки. Чтобы работать с онлайн-редакторами, нужно быть онлайн:)
Обзор некоторых редакторов кода
Codesandbox


Вы можете начать с использования шаблонов для любого популярного фреймворка. React, Vue, Angular, Gatsby, Next и пр.
Codesandbox позиционирует себя как платформу для разработки. Сообщество Codesandbox создало множество шаблонов. Кроме того, вы можете с легкостью создавать собственные шаблоны для своих специфических нужд, с файловой структурой и зависимостями, как в IDE.
Этот инструмент интегрирован с GitHub, так что у ва сне возникнет проблем с созданием коммитов и открытием пул-реквестов. К тому же, вы можете деплоить ваше приложение в ZEIT или Netlify — этот функционал доступен «из коробки».
Для фронтенд-нинзя есть поддержка NPM. И, конечно, каждая песочница имеет безопасный URL с поддержкой HTTPS для шеринга и фидбэков.
Что касается совместной работы, вы можете работать с коллегами. Для общения есть чат. Также вы можете контролировать, кто имеет доступ к редактированию, а кто — только к просмотру кода.
Этот онлайн-редактор имеет много прекрасных функций:
- консоль;
- предпросмотр;
- встроенный терминал;
- автозапуск Jest-тестов;
- Hot module reloading;
- организация проекта;
- экспорт кода в виде zip-файла;
- встроенный линтер (Eslint).
Что касается цены, Pro-версия стоит 9 долларов. Она включает приватные GitHub-репозитории и неограниченные приватные песочницы.
Playcode


Playcode это простой инструмент для быстрого прототипирования и просмотра результатов кодинга. Он имеет классический трехоконный макет: редактор кода, консоль и окно просмотра результата. Продукт имеет базовую файловую структуру, но в нем нет контроля версий и прочих функций IDE.
Playcode поддерживает только JavaScript, HTML и CSS. В нем есть возможность выбрать стиль редактора, размер шрифта и прочие вещи, касающиеся редактирования текста.
Codepen


Codepen это, вероятно, самый популярный инструмент на рынке онлайн-редакторов кода. Эта платформа начала некоторым образом перерождаться в социальную сеть, подобную Pinterest. Разработчики могут делиться своими лучшими практиками и получать одобрение от других членов сообщества.
Внутри инструмента есть продуманный функционал поиска. Вы можете искать шаблоны, проекты, отрывки кода и интересующие вас темы.
Одна из важных особенностей Codepen — ориентация на изучение новых технологий и лучших подходов. Поиск пенов и работа с ними это отличный способ понять, как они устроены и как работает код.
Еще одна интересная деталь платформы — режим презентации кода. Это очень полезно на конференциях, митапах и собраниях.
Стоит отметить и другие особенности этой платформы:
- файловая система;
- автодополнение кода;
- приватные песочницы;
- деплоймент сайтов;
- режим совместной работы.
Цена варьируется от 8 до 26 долларов в месяц. Есть также ограниченная бесплатная версия продукта.
Stackblitz


Stackblitz очень похож на полноценную IDE. Он вам особенно понравится, если вы не можете расстаться с VS Code (поскольку этот инструмент построен на основе VS Code). Продукт имеет широкий спектр функций, позволяющих начать, продолжить и завершить full-stack разработку приложения.
Stackblitz автоматически, по мере того как вы вводите код, запускает установку зависимостей, компиляцию, сборку и hot reloading.
В веб-разработке большое значение имеет импорт библиотек, поэтому StackBlitz включает встроенный в браузер npm-клиент, поддерживающий одновременную установку нескольких пакетов и их специфических версий.
Главная особенность этого проекта — возможность офлайн-работы. Этот функционал доступен благодаря веб-серверу в браузере.
В Stackblitz предварительный просмотр и редактирование происходят в одном разделенном окне, что является преимуществом по сравнению с iframe и маленькими окошками других проектов.
Также стоит отметить подключение к Github для импорта и экспорта проектов, интеграцию с Google Firebase для создания full-stack проектов и возможность скачивания проекта в виде ZIP-файла.
Codeanywhere


Codeanywhere претендует на звание полноценной IDE в браузере и мобильном телефоне.
Вы можете с легкостью настроить собственную среду разработки для своего проекта на JavaScript, PHP, HTML и 72 других языках.
Основная фишка Codeanywhere в том, что этот инструмент подключается буквально к чему угодно. Ваш код может располагаться на FTP-сервере или других GitHub-источниках — это не помешает вам начать его редактировать и заниматься разработкой проекта на Codeanywhere.
В режиме редактора вам доступны следующие функции:
- дополнение кода;
- линтинг (js, CSS);
- несколько курсоров;
- code beautify.
Кроме того, вы можете менять макет и цветовой режим редактора.
В этом инструменте есть собственный встроенный терминал.
Что касается совместной работы, вы можете делиться с любым другим разработчиком целыми проектами, файлами или папками. Каждое такое расшаривание может иметь собственный уровень доступа.
Codeanywhere имеет функционал, позволяющий просматривать разницу между версиями и возвращаться к предыдущим состояниям кода.
Также есть глубокая интеграция с git-репозиториями и инструментами, облегчающими процесс разработки.
Этот продукт подходит для разработчиков, которые хотели бы перейти к работе в облаке и остаться там навсегда.
Jsfiddle


Jsfiddle это простой, но невероятно популярный, быстрый и эффективный онлайн-редактор кода. Он позволяет быстро делиться кодом и визуализировать результат его работы. Этот инструмент настолько популярен и прост, что с ним интегрируется StackOverflow.
Визуально интерфейс Jsfiddle, как и многих его конкурентов, разделен на 4 блока: для написания кода, для редактирования CSS, SCSS или sass, для HTML-разметки и для просмотра результатов работы.
Блок редактирования кода поддерживает:
- чистый JavaScript;
- React;
- Preact;
- Babel + JSX;
- Coffee script;
- Vue;
- Type script.
Также в этом блоке можно менять различные настройки, такие как тип загрузки, тип фреймворка и атрибут фреймворка.
Jsfiddle имеет очень хорошую и полную документацию, а также развитое сообщество. Члены сообщества путем голосования определяют, какой функционал будет принят для разработки следующим.
Из недостатков можно отметить то, что Jsfiddle предназначен для работы только с фронтендом. Он не поддерживает концепцию файлов и папок, кроме того, в нем нет возможности создавать конвейеры CI/CD.
В целом, это один из наиболее логичных и крутых вариантов для тестирования новых фреймворков, показа кода в статьях и демонстрации новых продуктов.
HTML Code Editor


Этот редактор кода подходит исключительно для редактирования HTML. Он совершенно бесплатный. Среди его функций стоит отметить:
- автодополнение;
- базовые теги в хедере;
- tag wizard;
- поиск и замена тегов;
- широкий спектр функций очистки.
Существенный недостаток этого редактора — обилие рекламы.
Repl.it


Repl.it это один из самых мощных онлайн-инструментов для разработки. Он поддерживает широкий спектр языков и фреймворков, включая популярные сейчас Haskell и Kotlin, а также широко известные Javascript, C++, Ruby и пр.


На главной странице вам сначала предложат выбрать язык, а затем одну из категорий: веб-разработка, геймдев и др. После этого вы создаете repl.
Даже в бесплатной версии Repl.it можно создавать файловую структуру, контролировать версии и устанавливать пакеты.
В настройках можно редактировать макет, тему, размер шрифта и отступов.
Что касается возможности поделиться кодом, это можно сделать при помощи встраиваемой или обычной ссылки и интеграции с сообществом dev.to. Также есть функционал социальной сети под названием «talk», где разработчики могут делить кодом и получать фидбэк.
Repl.it имеет еще одну важную особенность — Classrooms (классные комнаты). Вы можете создавать эти комнаты, приглашать в них учеников и отслеживать прогресс.
Repl используется такими компаниями и организациями как Facebook, MIT, Google и др.
Цена стартует от 7 долларов в месяц. За эти деньги вы получаете приватные repl-ы, неограниченное хранилище и более высокую скорость.
Json Editor Online


Json Editor Online это веб-инструмент для просмотра, редактирования и форматирования JSON. Он показывает ваши данные в параллельном виде — в понятной и редактируемой древовидной структуре или в редакторе кода. Документы можно хранить локально или в облаке.
Вы можете делиться документами при помощи ссылок, просматривать JSON-файл в качестве просто кода или дерева, делать запросы и, конечно, сохранять файл локально.
Это хорошая возможность отредактировать JSON-файл на любом устройстве, не занимаясь настройками текстовых редакторов.
Codeply


Codeply это еще один инструмент для быстрого редактирования JavaScript и его фреймворков. Этот продукт был запущен еще в 2014 году, а в 2019-м вышла 2-я версия.
Команда, стоящая за Codeply, утверждает, что их продукт подходит для быстрого прототипирования, создания макетов, учебы и изучения новых популярных библиотек, API, плагинов и фреймворков.
Стандартный набор функционала включает настройки макета, предпросмотр результатов, готовые шаблоны и элементы социальной сети. По сравнению с другими инструментами Codeply отличается скоростью.
Gitpod


Цель Gitpod — поддерживать ваш код в постоянно протестированном и обновленном состоянии. Он глубоко интегрирован с GitHub: при каждом обновлении кода запускаются тесты.
Продукт имеет VSCode-интерфейс и поддерживает все основные языки фронтенда и бэкенда, а также фреймворки (Django, Rails, Revel и т. д.).
Plnkr


Plunker это онлайн-сообщество, где вы можете выдвигать какие-то идеи по веб-разработке, делиться ими и совместно работать над ними.
Главное, что отличает Plunker, это скорость. Несмотря на сложность, этот редактор загружается меньше, чем за 2 секунды.
Из функционала стоит отметить:
- возможность совместной работы над кодом в режиме реального времени;
- полнофункциональный, настраиваемый редактор синтаксиса;
- предпросмотр изменений в коде (тоже в режиме реального времени);
- линтинг кода по мере его ввода;
- возможность делать форки, комментировать и делиться Plunk-ми.
- открытый исходный код (выложен на GitHub) и лицензия MIT.
Заключение
В наш список вошли самые жизнеспособные редакторы кода и IDE, запускаемые онлайн. Пользоваться ими легко, но проявляйте осторожность: не стоит начинать работу над огромными проектами в онлайн-редакторах.
Мы не включали в список редакторы, предназначенные исключительно для проведения собеседований или не имеющие достаточно функций, чтобы считаться законченными продуктами.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
Рекомендация редактора JSON https://www.jsonformatting.com/