12 лучших онлайн-редакторов кода для веб-разработчиков

Перевод статьи «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, запускаемые онлайн. Пользоваться ими легко, но проявляйте осторожность: не стоит начинать работу над огромными проектами в онлайн-редакторах.

Мы не включали в список редакторы, предназначенные исключительно для проведения собеседований или не имеющие достаточно функций, чтобы считаться законченными продуктами.