Тема 6

1. Среда разработки или веб-редактор

Среда разработки или вебредактор

2.

Специализированное программное обеспечение, используемое в веб-разработке, включает в
себя множество разнообразных программ: от простых текстовых редакторов с подсветкой
синтаксиса до огромных «студий» – интегрированных сред разработки (IDE), объединяющих
в единую платформу компилятор, интерпретатор, отладчик и инструменты автоматизации
сборки проекта.
Несмотря на все преимущества IDE, использовать их для создания простых статических
сайтов или разработки веб-интерфейсов не имеет смысла, интегрированные среды разработки
предназначены для действительно сложных проектов. К тому же стоимость использования
такого комплексного программного обеспечения обычно довольно высока.
Начинающие frontend-разработчики в основном пользуются разнообразными редакторами
кода. Некоторые из них всего лишь осуществляют подсветку синтаксиса (выделяют
служебные слова в коде различными цветами), другие предоставляют инструменты для
автоматической вставки тегов и настройки атрибутов. Существуют также веб-редакторы ,
которые позволяют проектировать страницу визуально.

3.

В визуальном редакторе веб-страницу можно «составлять» из готовых элементов, текст можно
форматировать почти так, как в редакторе Word, а ссылки, картинки, таблицы и другие объекты
вставлять на страницу с помощью специальных кнопок и перемещать по ней с помощью мыши. При
этом редактор будет автоматически форматировать код страницы. Такие редакторы еще называют
WYSIWYG-редакторами («Что видишь, то и получаешь»).
Получается, что мы «рисуем» страницу такой, какой хотим видеть ее в браузере, а редактор пишет за
нас соответствующий код. Именно поэтому для использования визуального редактора не обязательно
даже знать язык HTML и другие веб-технологии.
Однако WYSIWYG-редакторы позволяют не только просматривать созданный редактором HTML-код,
но и работать с ним с помощью встроенного текстового веб-редактора. Для этого предназначены два
дополнительных режима работы – режим редактирования кода и комбинированный режим.
В режиме редактирования кода можно работать точно так же, как в текстовом редакторе, в визуальный
режим использовать для просмотра полученной страницы (как в браузере).
Лучший из редакторов, которые поддерживают как текстовые, так и WYSIWYG-методы работы с
кодом, а также их комбинацию, − это Adobe Dreamweaver.

4.

Однако этот редактор является платным. Среди бесплатных же веб-редакторов,
поддерживающих WYSIWYG-режим, полноценной замены ему нет.
В отличие от любого визуального редактора, для использования текстового вебредактора обязательно потребуются знания веб-технологий, как минимум языка
HTML. Текстовые веб-редакторы предназначены для создания HTML-кода
страницы «вручную» и отличаются от обычного редактора (типа «Блокнот») тем,
что снабжены дополнительными функциями, облегчающими работу с кодом.
Например, во всех таких редакторах реализована подсветка синтаксиса (код
визуально отличается от обычного текста страницы, теги и атрибуты
окрашиваются в различные цвета), а сочетания горячих клавиш позволяют
вставлять в код готовые конструкции и специальные символы.

5. Каким функционалам могут обладать текстовые редактора кода

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

6.

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

7.

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

8. Характеристики редакторов кода

9.

Notepad ++
Самый простой текстовый редактор кода. На первый
взгляд может показаться, что этот редактор всего лишь
аналог программы «Блокнот» в операционной системе
Windows.
Функции Notepad ++
Поддержка работы с большим количеством вкладок
одновременно
Автоматическое копирование и сохранение
созданных файлов
Поддержка и конвертация стандартных кодировок
текста
Подсветка синтаксиса
Установка различных полезных плагинов
Настройка и переопределение горячих клавиш
Проверка орфографии и шифрование текста
Этот редактор обладает простым и понятным
интерфейсов, имеет небольшой размер и
достаточно быстро работает. Еще одним
неоспоримым плюсом этого редактора
является то, что если закрывать Notepad ++ и
оставить в нем несохраненные файлы, они
автоматически откроются при следующем
запуске программы.

10.

Visual Studio Code
Бесплатный кроссплатформенный редактор от компании Microsoft.
Во многих рейтингах занимает первое место среди используемых
разработчиками бесплатных редакторов. Имеет часть функционала
IDE – позволяет проводить анализ кода, его запуск и отладку.
Ключевые особенности:
Встроенный «умный» механизм автодополнения – IntelliSense
Значительное количество расширений и дополнений
Интеграция с Git-репозиториями

11.

Komodo IDE
Komodo IDE от канадской компании ActiveState – это платформа, которая
поддерживает JavaScript, HTML, CSS, Python, PHP и множество других
языков программирования.
Среди полезных функций:
Интеллектуальная подсветка синтаксиса и автодополнение кода
Визуальный отладчик и инструменты для тестирования
Предварительный просмотр страниц: не нужно переключаться между
IDE и браузером
Поддержка популярных систем контроля версий
Лицензия Komodo для одного пользователя полностью бесплатна, но
требует обязательно регистрации.

12.

Atom
Простой и удобный редактор с открытым исходным кодом от GitHub,
поддерживает огромное количество языков и подходит для кроссплатформенной
разработки.
Atom является продвинутым текстовым редактором, получившим практически
возможности IDE благодаря огромному количеству пакетов расширений.
Основные возможности:
Умное автодополнение
Файловый менеджер, с помощью которого легко просматривать как отдельные
файлы, так и целые проекты
Мультипанельный интерфейс
Функция поиска и замены, предварительный просмотр и замена текста в одном
файле или в проекте
Минусом редактора является то, что он требует для работы относительно много
оперативной памяти

13.

Brackets
Основная особенность редактора Brackets, выделяемая многими
разработчиками, − связь с Google Chrome в режиме реального времени. С
помощью этого механизма разработчик может сразу после внесенного
изменения наблюдать, как все эти изменения будут отображаться в браузере,
без необходимости перезагрузки страницы.
Среди других возможностей:
Подсказка при редактировании JavaScript, CSS и HTML-файлов (при
редактировании HTML-кода CSS-стили элементов отображаются во
всплывающем окне для редактирования на лету)
Встроенные инструменты для работы с LESS и SASS файлами
Работа с системой контроля версий Git
Поддержка работы с файлами PSD
Широко развитая система горячих клавиш