9 лучших онлайн-редакторов кода для веб-приложений

Какая следующая лучшая вещь для кодирования? Редактор кода, конечно!


Редакторы кода являются второй по значимости причиной пламенных войн программистов (первая – форматирование кода).

Для некоторых Vim является единственным разумным редактором, когда-либо созданным, в то время как для других все, что не вписывается в мир Emacs, похожий на спиральный, вращающийся вокруг головы, подходит только для насмешек. Если вы очень плохо обращаете внимание, все, что вам нужно сделать, это пойти в сообщество программистов и запустить тему типа «Почему я думаю, что X (выберите любой популярный редактор кода) – отстой / лучший», возьмите немного пива и расслабьтесь..

Аргументы, контраргументы и оскорбления будут накапливаться и обсуждаться всю ночь напролет, и пройдет много месяцев, прежде чем яд в потоке остынет..

Вопрос в том, почему?

Конечно, людям удается многое сделать из всего, но я думаю, что редакторы кода особенные, когда дело касается программистов. Типичный программист тратит почти все свое время (более 98%, если бы я делал ставки) на выбранный редактор кода. Они знают свой путь в редакторе – его сильные и слабые стороны, ограничения, причуды и скрытые жемчужины.

Нет ничего более расстраивающего, чем необходимость бороться с редактором, когда вы пишете код (подумайте о том, как это раздражает, когда вам приходится снимать длинное и срочное письмо на новой клавиатуре!). Редакторы кода уменьшают умственные трения и позволяют вам быть более продуктивным, поэтому они так важны и привлекают столько внимания.

Итак, который является лучшим редактором кода?

Честно говоря, я даже не осмелюсь пойти туда! �� ��

Тем не менее, если вы занимаетесь веб-разработкой, есть альтернатива, о которой вы хотите подумать – онлайн-редакторы кода!

Короче говоря, это редакторы, которые полностью находятся на удаленном сервере и доступны через браузер..

Звучит странно, правда?

Я тоже так почувствовал, когда столкнулся с ними 3-4 года назад. Почему, черт возьми, кто-то хочет передать все глупому браузеру??

Может ли он даже конкурировать с встроенным редактором кода??

Оказывается, в большинстве случаев, особенно для веб-разработки, ответ – да. Сейчас, хотя я не использовал онлайновые редакторы в качестве основного средства, я все больше и больше использую их в конкретных сценариях.

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

Нулевая настройка

Я не знаю о вас, но я не жду, чтобы настроить мой любимый редактор на мой вкус в новой системе. Плагины, темы, шрифты, ярлыки, фрагменты, настройки. , , Существует бесконечный список вещей, которые должны быть сбалансированы, прежде чем все это станет пригодным для использования. Легко что-то упустить, но потом раздражаться, когда ваш рабочий процесс прерывается.

Напротив, онлайн-редактор не имеет ничего общего с первой установкой. Официальные сборки, обновления, ночные сборки, поддерживаемые платформы, системная архитектура, синхронизация FTP, конвейеры CI / CD – все это имеет значение, если у вас есть браузер!

сотрудничество

Чаще всего вам нужно сотрудничать с другими разработчиками при решении проблем или отладке чего-либо.

Традиционный редактор кода не предназначен для этого – в нем нет возможностей для одновременного редактирования, комментирования или выделения кода, и сложно добавить поддержку для него.

Безопасность данных

В настоящее время принято считать, что ни один проект сегодня не обходится без контроля версий, что означает, что копия кода всегда существует в хранилище. Тем не менее, бывают случаи, когда контроля версий недостаточно:

  • Вы забыли нажать только что созданные коммиты, и ваш ноутбук загорелся.
  • У вас есть другие важные файлы и дампы данных, с которыми взаимодействует ваш код, хотя они не являются частью живого приложения. Что происходит с ними, если ваш ноутбук загорелся?

(Хорошо, похоже, я одержим загоранием ноутбуков, но вы понимаете, верно ?!)

Обеспечение дисциплины

С таким же успехом можно спорить в суде о правах разработчиков (если такая вещь существует), но правда в том, что разработчики редко жертвуют своими прихотями ради общего блага..

Например, хардкорный энтузиаст Sublime Text всегда будет в полной мере использовать любой из превосходных редакторов JetBrains и найдет любую возможность указать на его жаждущий памяти характер и более медленную производительность.

То же самое касается вкладок и пробелов (или даже вкладок из двух пробелов против вкладок из четырех пробелов) – вы наивны, если думаете, что программисты в вашей команде не будут блокировать рога.

В таких случаях онлайн-редактор – это благо – вы сами выбираете настройки для проектов (даже то, как должен быть отформатирован код), и он просто откажется принимать работу, пока не соблюдает все стандарты. Возможно, сурово по отношению к индивиду, но отлично подходит для проекта!

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

JSFiddle

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

Это так популярно, что Q&Такие сайты, как StackOverflow, уже поддерживают встраивание ссылок JSFiddle непосредственно в их платформу..

Для быстрого начала работы JSFiddle предлагает несколько шаблонов в начале; Это означает, что если вы хотите запустить демонстрацию, скажем, React, все, что вам нужно сделать, это нажать на соответствующую кнопку и начать писать код. После того как вы нажмете «Сохранить», «скрипка» будет сохранена, вы получите постоянный URL-адрес (посмотрите на эту глупую скрипку, которую я создал: https://jsfiddle.net/tuqd76c4/ и обратите внимание, что вы можете внести изменения и нажать Сохранить, чтобы создать новый версия этого URL).

Вот что делает JSFiddle жизнеспособной платформой для интерфейсной веб-разработки:

  • Бесплатное использование (без скрытой платы или функций freemium). JSFiddle поддерживает себя посредством рекламы (по крайней мере, на момент написания), и вы можете увидеть рекламу Adobe в левом нижнем углу скриншота выше.
  • Функции совместной работы над кодом – идеальное решение для совместной работы над концепциями, проведения собеседований и т. Д..
  • Несколько макетов, размеры шрифтов, светлые / темные темы и т. Д..
  • Форматирование кода (приведение в порядок), предстоящая поддержка линтеров (CSS и JS) и многое другое.

А теперь, рыдать, рыдать, за плохие вещи

  • JSFiddle – это чисто интерфейсный редактор. Там нет никакого способа, чтобы закодировать и запустить свой любимый язык бэкэнда.
  • Здесь нет понятия о файлах и папках (или загрузки, если на то пошло). Все, что у вас есть, это один пробел для кода, независимо от того, сколько его там.
  • JSFiddle не может быть использован для размещения кода на вашем сервере. Код должен быть на JSFiddle и публичный все время.
  • Нет способа построить конвейер CI / CD, использовать Git и т. Д..

Тем не менее, JSFiddle имеет приятное место и сияет, когда вам нужно представить доказательства концепции и сотрудничать со скоростью света. Это есть и останется главной идентичностью среди онлайн-редакторов.

CodeSandbox

CodeSandbox можно рассматривать как гораздо более мощный и полный подход к JSFiddle. Верный своему названию, CodeSandbox предоставляет полный интерфейс редактора кода и изолированную среду для фронтальной разработки..

CodeSandbox – это настоящий мощный и сладкий, сладкий продукт. Мне бы не хватило бумаги, если бы я попытался перечислить все его преимущества, но вот некоторые из них:

  • Поддержка Npm: Да, вы можете добавить практически любой пакет, который доступен на npm.
  • Файлы, папки, модули: Вы можете разбить свой код на несколько файлов, добавлять / удалять изображения из общей папки и создавать / импортировать модули по своему усмотрению. Рабочий процесс отражает современный пакет модулей, поэтому вам не нужно ничего настраивать (почти).
  • Поддержка TypeScript, горячая перезагрузка, экспорт GitHub, статический хостинг файлов и т. Д..
  • Он построен на Редактор Монако, тот же зверь, который питает любимую VSCode редактор. Это дает такие мощные функции, как «Перейти», «Найти ссылки» и необходимый рефакторинг к вашим услугам.!
  • Поддержка фрагмента для муравей
  • Интегрированные DevTools, linting, наложения ошибок, тестовые среды (Jest), сочетания клавиш и многое другое.
  • Мощный клиент для прямого импорта локальных проектов в CodeSandbox.

Хотя бесплатная версия CodeSandbox не поддерживает частный код, вы можете получить эту функцию (и в целом увеличить ограничения по размеру), помогая им Patreon всего за 5 долларов в месяц (платите сколько хотите, до 50 долларов в месяц).

CodeAnywhere

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

Не так с CodeAnywhere.

CodeAnywhere обладает двумя преимуществами:

  • Готовые образы контейнеров для 72+ языков программирования и фреймворков. Это означает, что вы можете создать новую среду разработки прямо из редактора! Конечно, код автоматически размещается во вновь созданном контейнере, и файлы обслуживаются непосредственно оттуда..
  • Подключайся ко всему. Да буквально что угодно. Вы не обязаны хранить свой код на серверах CodeAnywhere. Независимо от того, находится ли ваш код на FTP, платформах для обмена файлами, таких как Dropbox, Amazon S3, или на сложных платформах контроля версий, таких как GitHub, вы можете легко настроить CodeAnywhere для чтения и записи в этот источник, используя редактор кода исключительно для. , , Ну, редактирование кода. ��

Я хочу отметить еще одну вещь: если вам не нравится Git, когда дело доходит до просмотра истории и различий, CodeAnywhere может почувствовать облегчение. Редактор использует свою систему сравнения для сравнения файлов, которая позволяет сравнивать два файла между любыми двумя ревизиями (ревизия создается каждый раз, когда вы сохраняете файл).

Однако есть небольшая проблема с ревизиями – бесплатная версия позволяет вам поддерживать только одну ревизию, в то время как наименьший платный план допускает не более 20 ревизий. Вообще говоря, это не проблема, так как вы редко хотите смотреть за пределы последней 20-й ревизии, но, поскольку большинство программистов имеют привычку нажимать кнопку Сохранить несколько раз в минуту, это может стать болезненным.

Все сказано и сделано, CodeAnywhere – это солидное, приятное предложение для тех, кто хочет перейти в Облако и остаться там. �� Поскольку его возможности выходят за рамки переднего кода, на мой взгляд, настоятельно рекомендуется!

StackBlitz

Если вы в основном работаете с интерфейсом и не можете отойти от интерфейса VSCode, StackBlitz был создан только для вас.

Видеть ничего особенного? Я тоже этого не делал, пока немного не прокрутил вниз и не нажал кнопку Angular. заграждение!

Угадайте, что, это не специально сделано, чтобы выглядеть как VSCode – оно построено на редакторе VSCode! Настолько, что вы можете устанавливать расширения, искать в папках и организовывать файлы так, как вы ожидаете от обычного экземпляра VSCode.

Но подождите, есть еще!

Вы могли или не могли заметить, что:

  • Все приложения, созданные на StackBlitz, также автоматически устанавливаются на их серверах! Итак, это созданное мной угловое игрушечное приложение автоматически размещается на https://angular-yvyi2j.stackblitz.io/. Скорее всего, URL все еще работает (хотя загружается медленно, как и следовало ожидать, когда размещается бесплатно)!
  • Вы можете раскошелиться и поделиться проектом. При совместном использовании вы получаете лучший контроль над тем, что могут делать другие.
  • Вы можете подключиться к GitHub-репозиторию, а также позволить коду напрямую извлекать / проталкивать оттуда. Или вы можете просто скачать проект в виде zip-файла.

Но подождите, есть еще!

Шутки в сторону! ��

Вот список официальных функций, предлагаемых StackBlitz:

  • Встроенная поддержка Firebase (это то, что я лично не использую, но эй, это благо для тех, кто не хочет погружаться в темные глубины бэкэнда)
  • Интеллисенс, Поиск проекта
  • Горячая перезагрузка при вводе
  • Импорт пакетов npm
  • Редактировать в автономном режиме, когда не подключен!

StackBlitz полон (красивых) сюрпризов, когда дело доходит до устранения препятствий от веб-разработки и развертывания. Внедрение VSCode на ваш сайт больше не является делом мечты!

AWS Cloud9

Cloud9 был, возможно, первой браузерной IDE, которая предложила серьезные функции и приняла идею браузера как редактора. Неудивительно, что Амазон позже приобрел его, а сегодня, Облако 9 является частью предложений AWS.

Если вы даже удаленно подключены (или интересуетесь) к платформе AWS, Cloud9 – это то, где заканчивается ваш поиск идеального (ну, почти идеального) редактора. Давайте посмотрим, почему:

  • За использование Cloud9 не взимается дополнительная плата. Вы можете подключить Cloud9 к существующему / новому вычислительному экземпляру AWS, и вы платите только за этот экземпляр. Также возможно подключиться к стороннему серверу по SSH – совершенно бесплатно! ��
  • Первоклассная поддержка приложений без сервера AWS (отладка и т. Д.)
  • Прямой доступ терминала к AWS из редактора (честно говоря, приличный редактор, терминал с вкладками – это то, что я до сих пор скучаю в VSCode)
  • Поддерживается более 40 языков программирования (Go, C ++, Ruby, Node, Python, PHP, Java … на ваш выбор)

Функции совместной работы в Cloud9 также желательны, что позволяет беспрепятственно проводить обзоры / интервью.

Еще одна особенность – воспроизведение в виде видео изменений, внесенных в файл, что делает процесс просмотра приятным:

Мой совет?

Если вы в AWS, не ждите и получите Cloud9 прямо сейчас. И если вы еще не находитесь в облаке, но думаете о переходе, включите AWS и интегрируйте Cloud9 в свой рабочий процесс. Вы не можете принять лучшее решение в любом случае!

CodeEnvy

CodeEnvy является мощным облачным редактором, который использует контейнеры Docker для запуска предварительно настроенных и изолированных сред разработки. Он основан на облачной IDE Eclipse Che с открытым исходным кодом и предлагает массу возможностей масштабирования и DevOps..

На момент написания, CodeEnvy был приобретен RedHat (который, как ни странно, сам был приобретен Oracle!).

Gitpod

Gitpod это освежающий взгляд на редакторы облачного кода (или IDE, если хотите), цель которого – постоянно проверять и обновлять ваш код. Другими словами, он глубоко интегрирован с GitHub, и каждый раз, когда вы добавляете код, он запускает тестирование и конвейеры CI / CD, чтобы убедиться, что код всегда работает на 100%..

Стоит проверить, любите ли вы опыт работы с VSCode и хотите что-то, что поддерживает все основные внутренние и внешние языки и инфраструктуры (Django, Rails, Revel, вы называете это).

Тейя

Если вы преданный поклонник SOLID и разработчик программного обеспечения, то Theia IDE будет щекотать вашу кость разделения проблем. Это IDE-код (пять точек для стиля сразу!) IDE кода, который имеет совершенно разные внешний и внутренний интерфейсы. Внешний интерфейс запускается в браузере, а внутренний может быть где угодно – на локальной машине или в облаке!

Но это еще не все – интерфейс может быть запущен как приложение Electron с полнофункциональной изолированной браузерной средой, предоставляя вам внешний вид нативного настольного приложения, если вы захотите его.

кодировщик

Хотя их веб-сайт не может сказать так четко, кодировщик среда VSCode, связанная с сервером, которая может работать локально или в облаке Рекомендуемая конфигурация – запустить IDE как сервер в облаке и получить к нему локальный доступ через браузер. Есть готовые образы Docker для настройки без проблем, и корпоративный план, если вам нужна поддержка или другие потребности.

Вывод

Это более или менее охватывает все IDE и редакторы кода там на момент написания. В этом списке я исключил два типа предложений: те, которые ориентированы исключительно на интервью и не имеют полноценной среды (за исключением, конечно, нашего любимого классического JSFiddle), и те, которые, кажется, не предлагают ничего существенный и имел немного больше чем гладкая домашняя страница.

Если вы думаете, что что-то заслуживает быть здесь, дайте мне знать, и я буду благодарен! ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map