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

Если вы веб-разработчик, у вас, скорее всего, есть среда разработки, настроенная локально на вашей рабочей станции. Вы установили свой любимый редактор кода, добавлены лучшие пакеты, загружены расширения, и вся IDE работает именно так, как вам нужно. Но что, если вы не на своей обычной машине? Что делать, если вы путешествуете, были перемещены или даже работаете из дома без ноутбука? Что тогда? Вот когда знание того, какие существуют онлайн-редакторы кода, действительно может спасти положение. И более того, может быть, даже держать его в заднем кармане, чтобы улучшить вашу обычную рутину кодирования.

Подпишитесь на наш канал Youtube

Почему редакторы кода онлайн?

Есть несколько причин рассмотреть возможность использования онлайн-редакторов кода. Однако правда в том, что использование онлайн-среды IDE (скорее всего) не заменит вашу локально установленную. Хотя многие онлайн-среды удивительно надежны и способны обрабатывать большую часть работы, которую вы им выполняете, они не так надежны и функциональны, как настольные системы. Тем не менее, есть несколько причин рассмотреть возможность его использования.

• Вы путешествуете, и вам нужен доступ к своему коду где угодно.
• Вам нужно поделиться фрагментами и интерактивными участками кода.
• Ваше время ограничено, и вам нужно решение, практически не требующее настройки.
• Ваш бюджет ограничен. Онлайн-редакторы кода могут иметь за собой больше возможностей, чем рабочая станция, к которой у вас есть доступ.
• Ваша команда должна сотрудничать в режиме реального времени. Многие онлайн-среды IDE имеют встроенные инструменты для совместной работы, которые работают без настройки.

Независимо от того, почему вы хотите или нуждаетесь в онлайн-среде IDE, вы можете выбрать из множества вариантов, каждая из которых имеет свои сильные и слабые стороны и выполняет разные функции для веб-разработчиков.

1. PlayCode

PlayCode - хороший универсальный онлайн-редактор кода. С его помощью вы можете открывать несколько файлов, которые работают вместе в одном проекте, так же, как и с несколькими файлами в типичной структуре каталогов с использованием Sublime Text или VS Code. PlayCode имеет готовые шаблоны для пользователей, а также результаты в реальном времени и встроенную консольную отладку прямо в браузере. Пользователи могут редактировать и работать без входа в систему для быстрых исправлений и прочего, но также войти в систему, чтобы сохранить работу и использовать PlayCode на разных машинах.

Больше информации

2. JSFiddle

JSFiddle - еще один популярный онлайн-редактор кода, который работает во многом подобно PlayCode. Разработанный специально для кодеров JavaScript, JSFiddle не обязательно для работы над целыми проектами, но, как говорит информационная панель в верхней части самого редактора, он лучше всего работает для «демонстраций для документов, отчетов об ошибках для проблем Github, представления ответов кода на Переполнение стека, совместная работа с кодом в реальном времени, размещение фрагментов кода »или просто песочница, в которой вы можете поиграть со своим кодом.

Больше информации

3. CodePen

CodePen, скорее всего , считается онлайн редактор кода интернет - редакторов кода. Он не только дает вам инструменты для совместной работы, экспериментирования и обмена, но вы также получаете живые результаты и возможность поиска по их базе данных и репозиторию фрагментов, которые размещают другие авторы, чтобы вы также могли экспериментировать и учиться на их работе. . Это также интересное место, чтобы увидеть, что некоторые люди делают с кодом новым и интересным способом. Кроме того, фрагменты CodePen индексируются Google, и вы часто будете здесь, когда будете искать решение, прежде чем отправиться в Stack Overflow, а иногда и после, потому что именно там люди часто пишут и делятся решениями в реальном времени.

Больше информации

4. StackBlitz

StackBlitz - хорошая штука. Мы очень впечатлены тем, что это приложение предлагает разработчикам, потому что оно содержит множество инструментов, позволяющих быстро запустить свой проект. В один клик. Если вы посмотрите на изображение выше, то увидите, что файлы, зависимости и даже URL-адреса с общим доступом были созданы с помощью одной кнопки « Начать новую рабочую область - React (JavaScript)» . StackBlitz заслуживает внимания с возможностью сохранять, публиковать и даже подключаться к вашей учетной записи GitHub. Вместо того, чтобы быть службой обмена фрагментами или песочницей кодирования, StackBlitz - надежная IDE для тех, кто предпочитает онлайн-редакторы кода.

К тому же, и мы не можем не сказать об этом, он основан на VS Code. Таким образом, вы в основном используете самую популярную среду IDE и редактор кода в своем браузере, и каждый проект получает собственное пространство на сервере. Вы можете обновить, если хотите, но даже бесплатная версия работает хорошо (хотя и немного медленнее при загрузке, но этого и следовало ожидать от бесплатных планов). Прочтите об этом, и мы думаем, вы согласитесь, что из всех онлайн-редакторов кода стоит внимательно изучить его.

Больше информации

5. AWS Cloud9

Как один из первых пользователей Cloud9 лет назад, когда это был проект с открытым исходным кодом на c9.io , мы настоятельно рекомендуем этот продукт. Фактически, он обеспечивает очень похожий опыт на StackBlitz выше. Когда Amazon приобрела C9, они подключили его к своему облаку в рамках своего набора сервисов AWS. AWS Cloud9, безусловно, представляет собой надежную полнофункциональную онлайн-среду IDE, и информационная реклама на их веб-сайте отлично помогает понять, почему именно на нее стоит взглянуть.

AWS Cloud9 - это облачная интегрированная среда разработки (IDE), которая позволяет писать, запускать и отлаживать код с помощью всего лишь браузера. Он включает в себя редактор кода, отладчик и терминал. Cloud9 поставляется с предустановленными необходимыми инструментами для популярных языков программирования, включая JavaScript, Python, PHP и др., Поэтому вам не нужно устанавливать файлы или настраивать машину разработки для запуска новых проектов. Поскольку ваша IDE Cloud9 является облачной, вы можете работать над своими проектами из офиса, дома или где угодно, используя машину, подключенную к Интернету. Cloud9 также обеспечивает удобство разработки бессерверных приложений, позволяя легко определять ресурсы, отлаживать и переключаться между локальным и удаленным выполнением бессерверных приложений. С Cloud9 вы можете быстро поделиться своей средой разработки со своей командой, что позволит вам программировать и отслеживать действия друг друга в режиме реального времени.

Больше информации

6. JSBin

Если вы когда-либо видели или использовали PasteBin, JSBin будет вам знаком. Он похож по структуре, стилю и полезности, JSBin - это в основном сайт для совместного использования кода. Мы считаем, что лучше всего зарегистрировать здесь учетную запись, чтобы оставаться в системе. Причина в том, что JSBin автоматически сохраняет ваш прогресс в любом коде, с которым вы работаете. Даже если вы просто экспериментируете, чтобы увидеть, что делают сниппеты, вы не потеряете свою работу. JSBin - простой серьезный редактор. И если это то, что вам нужно, вы действительно не сможете стать лучше.

Больше информации

7. Редактор тем WordPress.

WordPress может быть не первым, о чем вы думаете об онлайн-редакторах кода. Но это определенно нужно учитывать. В WordPress 4.9 WP Core был обновлен и теперь включает CodeMirror. Подсветка синтаксиса и предупреждения об ошибках для любых изменений, внесенных в области кода, теперь являются базовыми для WordPress. Основное расположение для этого находится в области « Внешний вид - Редактор темы» , но оно также отображается в любой области с виджетами (например, в виджете « Пользовательский HTML» ) или в настройщике темы на вкладке « Пользовательский CSS ». Хотя это определенно не полноценная IDE, мы можем абсолютно рекомендовать редактор WP CodeMirror как способ проверки ошибок и обновления фрагментов кода без использования FTP и различных систем управления файлами.

Больше информации

Завершение работы с онлайн-редакторами кода

Большинство онлайн-редакторов кода не заменят вашу локальную среду разработки. Это не их работа. В основном. Однако они могут предоставить надежный и простой способ редактировать код, делиться фрагментами, делать резервные копии и экспериментировать с новыми функциями в безопасном и безопасном месте в режиме реального времени. Между полными IDE, такими как StackBlitz, сервисами обмена фрагментами, такими как JSBin, и даже просто качественными онлайн-редакторами кода, такими как интеграция WordPress CodeMirror, если вы никогда не играли с онлайн-редактированием, нет лучшего времени для начала.

Какие ваши любимые онлайн-редакторы кода?

Статья от имени Фернандодиасса / shutterstock.com