Вполне закономерно через некоторое время пользования текстовыми редакторами для разработки у многих появляется потребность работать в среде разработки. С деревом классов и методов, с TODO-листами, с подчеркиванием синтаксических ошибок в коде, с автодополнением. Конечно же в последнее время и текстовые редакторы приблизились по своим возможностям к средам разработки, но о них возможно будет рассказано в других статьях. В данной статье будет описано рабочее место web-разработчика на базе Eclipse PDT.

Для того чтобы иметь описанные ниже функции вам следует скачать Eclipse PDT и добавить к нему расширение JSEclipse.

Первое, что хочется отметить, это дерево классов. В больших проектах уже не так просто точно отыскать в коде нужный метод того или иного класса. Имя метода не всегда можно вспомнить, чтобы воспользоваться поиском. Да и вызывать окно поиска и набирать текст не всегда удобно. В Eclipse PDT. Есть прекрасное дерево классов, на котором каждый из методов имеет свой значок.

Для PHP. Круглый зеленый значок указывает на то, что метод имеет атрибут доступа public, красный квадрат - private. Свойства классов имеют аналогичную символику, только для них используются пустые фигуры (не закрашенные).

Для JavaScript. Свойства классов обозначаются маленьким зеленым квадратом. Сами классы большими зелеными квадратами. Методы - серыми квадратами с горизонтальной чертой, пересекающей правую границу квадрата. Так как функции в js могут объявляться одна внутри другой, то дерево отображает для функций в дочерних элементах узла и вложенные функции.

Если в коде есть синтаксическая ошибка, то она будет выделена так, что будет бросаться в глаза. В файлах php она будет подчеркнута волнистой линией, а в файлах js на правом поле появятся красные кружки с крестиками. И для php и для js на правой полосе прокрутки появятся красные маркеры в местах ошибок. Щелкнув по этим маркерам вы перейдете к месту,в котором возникла ошибка. Это очень удобно, если экран в данный момент не отображает код с ошибкой (вы прокрутили документ).

Конечно различия в символике немного портят впечатление. Но это потому, что JSEclipse это отдельный plugin для Eclipse. Хотя вы быстро привыкните. Да и символика говорит сама за себя. К тому же есть всплывающие подсказки. При наведении на выделенное место вы увидите сообщение с подробностями.

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

Имеется возможность настраивать цвета для кода и маркеров под себя.

Если вы не помните имя нужного метода из фреймоврка prototype.js, то просто укажите имя объекта и нажмите точку. Среда покажет вам список доступных для данного объекта методов и свойств. Так же находясь внутри редактируемого js-класса вы можете набрать this, нажать точку и вы получите аналогичный список для этого класса.

В среде есть так же удобный инструмент для формирования TODO-листов проекта.

В Eclipse есть и свой отладчик, который будет рассмотрен в следующих статьях. Конечно всех особенностей среды не опишешь в маленькой статье, а писать книгу о том, что можно увидеть и чему научиться за час-два работы в среде нецелесообразно. Поэтому лучше будет, если вы установите это ПО самостоятельно и попробуете его в деле. Начните знакомство с создания нового проекта. Добавьте файлы в проект и работайте.

P.S. Есть еще один интересный компонент. Это subclipse. Попросту говоря это SVN-клиент интегрированный в среду. Он обладает функционалом знаменитого TortoiseSVN для Windows. Но о нем пойдет речь в другой статье.