Online-редакторы кода для вебразработчика

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

JSFiddle

1. JSFiddle

Один из старых проектов для работы с HTML, CSS и JavaScript кодом.

Для HTML можно выбрать следующие стандарты: XHTML 1.0 Strict, XHTML 1.0 Transitional, HTML 5, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset.

Для CSS можно выбрать в настройках SCSS.

Для JavaScript в настройках можно выбрать CoffeeScript, JavaScript 1.7, Babel или TypeScript. Поддерживается множество фреймворков и расширений.

CodePen

2. CodePen

Более свежий сервис для работы с кодом в онлайн. Сайт содержит более богатый функционал: консоль для кода, быстрые клавиши, настройка рабочей среды и т.д.

Поддержка множества препроцессоров:

  • HTML: Haml, Markdown, Slim, Pug.
  • CSS: LESS, SCSS, Sass, Stylus, PostCSS.
  • JavaScript: CoffeeScript, LiveScript, TypeScript, Babel.

Существует и версия CodePen Pro, которая поддерживает совместный режим, позволяющий дополнять код в режиме реального времени.

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

Plunker

3. Plunker

Интернет-сообщество для создания, совместной работы и обмена идеями в области web-разработки. Сайт предлагает онлайн-редактор с полностью открытым исходным кодом под лицензией MIT. В остальном ничего особенного — создание кода в реальном времени и его предварительный просмотр, полнофункциональный и настраиваемый синтаксис редактора, совместное использование.

Online Compiler

4. Online Compiler

Инструмент для компиляции и отладки кода в онлайн. С помощью его вы сможете скомпилировать исходный код более чем на 60 языках программирования. С несложными кусками кода вполне справится. Вполне можно использовать для внедрения кода редактора на ваш сайт.

JS Bin

5. JS Bin

Инструмент для эксперементов с web-языками. В частности, поддержка HTML, CSS и JavaScript (доступны также Markdown, Jade и SASS). Простой редактор для совместной работы и распространения своего кода (можно вставить редактор на свой сайт, например, для просмотра демо-кода).

Pastebin

6. Pastebin

На сайте вы сможете сохранять и редактировать любой код (PHP, JS, HTML, CSS, С++ и сотни других). Сервис полностью бесплатен. Здесь не найдете чего-то особенного. Обычно его используют в качестве базы для хранения кусков кода. В настройках вы можете задать дату удаления кода (по умолчанию, не удалять никогда).

Online regex tester and debugger

7. Online regex tester and debugger

Если вы часто используете регулярные выражения и возникает необходимость поделиться ими с другими участниками, то данный сервис создан для вас. На данный момент поддерживаются следующие диалекты: JavaScript, PHP, PCRE, Python и Golang. Простые настройки, возможность поделиться ссылкой, быстрая справка и генератор кода.

PLAYCODE

8. PLAYCODE

Очередной простой редактор HTML, CSS и  JavaScript. Все сделано по простому и без лишних функций. Удобно работать целиком с проектом, создав и разбив все по файлам. Для ценителей минимализма в своей работе.

SQL Fiddle

9. SQL Fiddle

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

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

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

SoladieM

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

2 комментария

  • Доброго всем времени суток, я очень заинтересовался статьей… все очень грамотно и подробно расписано. Хочу вот предложить на суд публики свой собственный редактор кода на ciberfox.ru …. буду рад новым посетителям

Добавить комментарий

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: