IDE — Интегрированная среда разработки. Вопрос выбора идеальной среды разработки, наверное, всегда будет стоять открытым, у каждого на этот счет будут свои мнения. И все же хочется поговорить о нескольких таких IDE, возможно, кто-то из вас остановит свой выбор на какой-то конкретной среде разработки. Итак, приступим:

Dreamweaver – это интегрированная среда веб-разработки для профессиональных верстальщиков, разработчиков и дизайнеров. Она предназначена как для визуального проектирования страниц, так и для комфортного написания кода на html, css, javascript, ASP, JSP и др., подсвечивая их синтаксис и имея помощь по ним «из коробки». Dreamweaver позволяет переключаться между режимом «Вид» и режимом «Код», что позволяет сразу же посмотреть результат выполнения html разметки в IDE, или наоборот, визуально расставить элементы на странице и получить их html-код в текстовом виде.

Простые страницы в Dreamweaver могут быть написаны вообще без редактирования кода за счёт инструментальных средств визуального проектирования. Это позволяет сэкономить время опытным программистам, но плохо для начинающих разработчиков, которые только учатся азам веб-технологий и не понимают того, что происходит за красивым интерфейсом мастеров.

Основной недостаток Dreamweaver – это его цена. Как и другие продукты Adobe, Dreamweaver стоит дорого, умеет делать многое, но подавляющим числом своих пользователей используется менее чем на 10%, а в его цену, между прочим, входят все функции.

Из большого количества функций Dreamweaver вытекают другие два его недостатка – размер на жёстком диске и потребляемая оперативная память. Они довольно велики по сравнению с другими IDE и уж никак не позволяют комфортно работать с Dreamweaver на компактном нетбуке. Но что поделать, красота требует жертв!

Netbeans – это интегрированная среда разработки с «кое-где открытым, а кое-где закрытым» исходным кодом (лицензия CDDL), бесплатная для своих пользователей. Позволяет писать на Python, PHP, Javascript, а также на других, «невебовых» языках.

Несмотря на свою бесплатность, она не уступает по функционалу платным продуктам. Так, например, Netbeans поддерживает рефакторинг, автозаполнение набираемых операторов, шаблонирование, профилирование кода и др.

Netbeans написана на Java, а это добавляет ей как плюсов, так и минусов. Достоинством Netbeans является то, что она кроссплатформенна и поддерживает сторонние плагины, что позволяет разработчикам самим писать то, чего им так не хватает. Это позволило создать множество плагинов, добавляющих поддержку распространённых PHP фреймворков, например Zend, Symfony, CodeIgniter и др.

Есть и недостатки – для работы Netbeans, как и для любого другого Java-приложения, на компьютере должна быть установлена Java машина, весящая около 150 мегабайт и грузящая систему постоянно, независимо от того, запущен Netbeans или нет. Ещё одним недостатком является отсутствие актуальной поддержки языка Ruby и фреймворка под него Ruby on Rails, это объясняется недостатком времени разработчиков и желание сосредоточиться на основном направлении этой IDE – разработке на языке Java.

RubyMine – профессиональная среда разработки для языка Ruby и фреймворка Ruby on Rails.

Эта IDE выгодно отличается от конкурентов, ведь она позволяет разработчику видеть типы возвращаемых методами значений, снабжена системой автозаполнения и валидации кода без его запуска (подчёркивает неверные строки сразу же). Поддержка Ruby on Rails реализована на крайне низком уровне, что позволяет программисту пользоваться командами консоли Ruby прямо в IDE, однако реализованы и высокоуровневые средства, например, генерирование моделей, контроллеров и видов в веб-приложении Ruby on Rails может производиться с помощью удобных мастеров без необходимости писать команды в консоль.

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

NuSphere PhpED – это очень мощный инструмент для php программиста, включающий в себя множество приятных функций, облегчающих процесс настройки популярнейшей связки PHP+MySQL и последующий процесс разработки в целом.

PhpED содержит свой собственный вебсервер, на который разворачиваются разрабатываемые проекты. Это позволяет отлаживать код сразу же без необходимости в Apache и внешнем веб-браузере, однако отладчик DBG поддерживает работу с внешними вебсерверами также. В PhpED есть несколько встроенных браузеров, запускающихся сразу в окне программы, можно также настроить автоматический запуск одного или сразу нескольких внешних браузеров при запуске проекта. Есть и простой проводник баз данных, поддерживающий MySQL, что позволяет спроектировать БД для небольшого проекта.

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

Visual Web Developer Express – это бесплатная облегченная версия Visual Studio для веб-разработчиков, являющаяся интегрированной средой разработки веб-приложений по технологии ASP.NET и ASP.NET MVC.

Конкурентов у Visual Studio и её Express версий нет, ведь технология ASP.NET закрыта и принадлежит Microsoft, которая, в свою очередь старается снизить порог вхождения в технологию, разрабатывая всё новые и новые формы и мастера, при использовании которых простой сайт можно создать, не написав ни единой строчки кода.

В Web Developer Express поддерживается визуальное проектирование, реализованное в точности как в Dreamweaver – разработчик может мышью добавлять на страницу элементы в режиме «Вид», затем перейти на вкладку «Код» и увидеть код добавленных элементов. Это экономит время и упрощает вёрстку.

Дизайн ASP.NET сайтов создаётся с помощью тем, которые могут быть разработаны третьими лицами и добавлены к сайту несколькими кликами мыши.

Эта IDE поддерживает отладку, валидацию кода «на лету», автозаполнение, unit-тестирование и другие функции, необходимые разработчику веб-сайтов.

PHP Development Tools – это бесплатная IDE с открытым исходным кодом на основе Eclipse для создания вебсайтов на языке PHP.

Основным достоинством этой IDE является её интегрированность с Zend Framework из коробки, кроме того, она полностью совместима с платным продуктом Zend Studio, который основывается на исходном коде PHPDT.

10 best Javascript IDE & Javascript Editors

От eclipse была унаследована удобная система плагинов, которые можно загружать из единого репозитория eclipse. Благодаря этим плагинам её можно адаптировать под многие из известных PHP фреймворков.

В плане функциональности у PHPDT всё в порядке, она поддерживает всё то, что поддерживает любая современная IDE – автозаполнение кода, сворачивание, отладка, помечает разные типы кода по-разному.

Недостаток в том, что для работы этой IDE требуется Java машина, которая грузит систему, однако PHPDT – кроссплатформенна, что, наверное, нивелирует этот недостаток.

Это не полный перечень инструментов, в этой статье отмечены самые популярные, на мой взгляд. Надеюсь, вы уже сделали свой выбор! Спасибо за внимание!

Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков — Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

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

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

 

CanIUse

С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

Страница плагина — github.com/cfjedimaster/brackets-caniuse

Скриншот плагина -CanIUse

HTML Wrapper

Упрощает работу с тегами <ul>, <tr>, <select> , форматируя содержимое в элементы списка.

Страница плагина — github.com/rcaferati/brackets-html-wrapper

Скриншот плагина — HTML Wrapper

Brackets Icons

Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.

Страница плагина — github.com/ivogabe/Brackets-Icons

Скриншот плагина — Brackets Icons

Emmet

Очень простое и полезное расширение позволяет писать CSS и HTML код быстрее с помощью аббревиатур, разворачивающихся в полноценные теги.

Страница плагина — github.com/emmetio/brackets-emmet

Скриншот плагина — Emmet

Simple To-Do

Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.

Страница плагина — github.com/ovk/brackets-simple-todo

Скриншот плагина — Simple To-Do

Lorem Ipsum

Если нужно заполнить пустоту в абзаце, то этот плагин для вас. Он генерирует текст — ”рыбу” для таких случаев.

Страница плагина — github.com/lkcampbell/brackets-lorem-ipsum

Скриншот плагина — Lorem Ipsum

JS CSS Minifier

Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.

Страница плагина — github.com/abagshaw/brackets-minifier

Скриншот плагина — JS CSS Minifier

Сustom Region Code Folding

Добавляет в Brackets функцию сворачивания блоков кода.

5 редакторов кода для JavaScript

Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.

Страница плагина — github.com/thehogfather/brackets-code-folding

Скриншот плагина — Сustom Region Code Folding

Beautify

Простой комбинацией клавиш или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.

Страница плагина — github.com/brackets-beautify/brackets-beautify

Скриншот плагина — Beautify

Brackets-Git

Пожалуй, одно из самых полезных расширений для редактора. Плагин обеспечивает интеграцию с распределенной системой управления версиями — Git. Он протестирован и работает на любой платформе (Windows, Mac OS X, GNU / Linux).

Страница плагина — github.com/zaggino/brackets-git

Скриншот плагина — Brackets-Git

Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.

Текстовый редактор Adobe Brackets появился совсем недавно. Первая его версия вышла в 2014 году. До этого существовало множество других редакторов, таких как ActiveState Komodo, Notepad++, PSPad, Sublime Text. Так чем же он выгодно отличается от других? Сам факт, что редактор представлен компанией Adobe, говорит о том, что стоит обратить внимание на этот продукт. Так как я и сам пользуюсь программами Adobe еще с 2007 года, не мог не пройти мимо этого редактора.

С чем будем сравнивать?

Как известно, все познается в сравнении, и я решил сравнить Adobe Brackets с другими наиболее популярными редакторами, по крайней мере в России — Notepad++ и Sublime Text. Здесь я не рассматриваю таких монстров как например WebStorm и NetBeans, так как это по сути IDE и у них совершенно другие задачи.

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

Emmet — ускорение набора кода

С тех пор, как я узнал Emmet, привык к нему настолько, что уже не преставляю редактирование HTML и CSS кода без него.

Adobe Brackets — Установка происходит просто через менеджер расширений. Все, плагин готов к работе! К минусам можно отнести то, что плагин работает только в html и css файлах, в отличие от Sublime. Хоть и нечасто, но бывает необходимость работы плагина в других форматах файлов.

Adobe Brackets Emmet

Sublime Text — Для установки нужен Package Control. Для пользователя, слабо знакомого с Sublime, установка может показаться тяжелой. Плагин работает без нареканий.

Sublime Text Emmet

Notepad++ — Установка происходила очень болезненно. Обычная установка через Plugin Manager не сработала, так как не устанавливался необходимый для работы Python Script. Поэтому необходимо сначала скачивать Python Script, потом скачивать сам плагин и распаковать его в папку с программой. Затем необходимо переназначать горячие клавиши. Сам плагин работает хорошо только в html и css файлах. В остальных случаях плагин заметно тормозит.

Notepad Emmet

Вывод: во всех редакторах плагин работает хорошо, однако установка в Notepad++ происходит весьма проблематично.

Форматирование HTML, CSS и JavaScript кода

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

Adobe Brackets — на выбор имеется аж 5 плагинов. И все они выполняют свою задачу по разному. Допустим, мне не совсем понравилось, как делает форматирование js плагин Beautify.io от dingdong. Гораздо больше мне понравился плагин от Hirse.

Brackets Beautify

Sublime Text — плагин CodeFormatter поддерживает множество форматов, в том числе и PHP, SCSS, Python. Комбинация для форматирования —

Emmet CodeFormatter

Notepad++ — есть плагин JSTool. Для остальных форматов плагинов не нашлось.

Notepad JSTool

Вывод: Adobe Brackets предоставляет большой выбор плагинов для HTML, CSS и JavaScript форматирования, вполне возможно, что есть плагины и для других языков. Notepad явно отстает в этой тройке.

Markdown подсветка синтаксиса и форматирование

Хоть этот пункт специфичен и не относится к программированию, но так как я пишу статьи в этом формате, то включу в сравнение этот пункт.

Adobe Brackets — подсветка уже есть по умолчанию, также подсвечивается и код. На мой взгляд, тут не хватает дополнительного плагина для форматирования текста с помощью горящих клавиш (например, выделение жирным при помощи ctrl+B).

Adobe Brackets Markdown

Sublime Text — есть плагин MarkdownEditing, который предоставляет целых три варианта синтаксиса: Standard Markdown, GitHub flavored Markdown, MultiMarkdown. На выбор есть также три варианта цветовой темы: серая, темная, желтая.

IDE для HTML/CSS/JavaScript

Подсветка языков, по моему мнению, работает некрасиво — код превращается в нечитаемую кашу.

Emmet Markdown

Notepad++ — cуществует лишь цветовая схема, которая подсвечивает весьма невнятно. Пришлось вносить свои корректировки. Подсветки языков нет в принципе.

Notepad Markdown

Вывод: в этом плане Adobe Brackets тут очевидно выигрывает. К тому же, к нему есть очень хороший плагин для быстрой навигации по документу — Brackets Outline List

Живой предосмотр редактируемых страниц (Live Preview)

Считаю, что это очень удобный инструмент для ускорения верстки. Эта функция есть у первых двух редакторов. Отличие в том, что у первого она есть изначально, и все что нужно, это нажать на кнопку Live Preview (при условии установленного Google Chrome). Для второго нужно сначала установить плагин Emmet LiveStyle, затем плагин для Google Chrome, потом открывать консоль разработчика и связывать файлы стилей с файлами Sublime Text. Согласитесь, в первом случае происходит все намного быстрее.

Другие фишки, которые изначально есть у Adobe Brackets

Помимо вышеперечисленных, есть еще много фишек, которые уже встроены в редактор:

Автозаполнение атрибута src — суть в том, что Brackets сканирует содержимое папки, в которой находится проект, и дает подсказки для заполнения:

Автозаполнение атрибута src

Подсказки для методов и свойств js-библиотек — допустим, вы используйте в своем проекте библиотеку Backbone, так вот, Brackets дает подсказки не только для нативных javascript методов, но и для самой библиотеки! Кроме того, если к методу есть описание в виде комментариев, то оно тоже показывается. Вот как это выглядит:

Подсказки для методов и свойств js-библиотек

Другие приятные мелочи — есть много других приятных мелочей, которые хоть и не влияют на программирование в целом, но просто радуют:

• Простота установки плагинов буквально в два клика;
• Нормальное отображение иконок файлов. У Brackets иконки всегда отображаются нормально, в отличие от других редакторов. Хотя, может, это только у меня такая проблема:

Brackets иконки

• Русский язык есть изначально;
• Редактор полностью открыт и бесплатен;

Минусы редактора Adobe Brackets

• Редактор весьма узкоспециализирован. Он больше заточен для работы с HTML, CSS и JavaScript, для других технологий он подойдет слабо.

• Плохая совместимость разных плагинов. Если ты установил один плагин, то тут же может слететь другой.

• Часто бывает, что при запуске редактора не загружаются некоторые плагины.

• По сравнению с выше рассмотренными редакторами этот работает относительно медленно.

Общий вывод

Чем отличается Adobe Brackets, так это простотой работы. Многие функции уже есть изначально, а установка новых плагинов происходит в считанные секунды. Если, допустим, вам понадобилось установить редактор на новый компьютер, то его настройка не займет много времени.

Integrated Development for Brackets

This extension provides Brackets with integrated development capabilities like compiling, error line markers, and debugging support.

Редакторы для кода

Currently works with PHP, Python, Ruby, Perl, Dlang and JavaScript(Node)!

Use the left Run icon or press Ctrl(Cmd)-Alt-B to build current file.

Notes: You must have the compiler/interpreter installed within your global path for this extension to execute it.

Features:

1. Runs the intepreter against your file and returns the output into a panel.
2. If an error is reported, the panel shows a table list of the reported errors.
3. Click on the errors in the list to jump to the file and error line number. The line will be marked red with the error message viewable on mouse hover.
4. It is possible to create own build systems via ‘Edit>Edit Builder’ menu item and editing opened JSON-file (you need to restart Brackets).
5. The build action will save all working set files of the same filetype automatically.

Auto Compile

In your project root preference file «.brackets.json», you can enable to the compiler to run every time you save the current file.

Example .brackets.json file:

{ «IDE.autocompile»: true }

To lock autocompiling to a single target file, when any file is saved, use the below. Note that you will need to specify the file type as it is named in the «builder.json». This may change in the future to be autodetected.

{ «IDE.autocompile»: true, «IDE.basefile»: «test cases/test1.php», «IDE.basefiletype»: «PHP» }

TODO:

• Polish the Run Results panel (with colors of the current theme)
• Support charactor line locations for error ranges
• Add TypeScript & CoffeeScript support
• Add Java support
• Add step-by-step debugging support

Pull Requests are encouraged and will be quickly reviewed to be merged!

Built upon https://github.com/Vhornets/brackets-builder for command execution, although much of it has been already rewritten.

Contact: @jadbox