Подсказки по коду и автозавершение кода

Функции интеллектуального завершения кода или подсказок по коду в Dreamweaver позволяют быстро вставлять и редактировать код за счет снижения количества опечаток и других распространенных ошибок.

Эту функцию также можно использовать для просмотра:

• доступных атрибутов тега,
• параметров функции или
• методов объекта.

Dreamweaver поддерживает подсказки по коду для следующих языков и технологий:

• HTML
• CSS
• JavaScript 
• PHP

Далее вы узнаете, как функция завершения кода и подсказки по коду работают для этих языков.

Включение подсказок по коду.

Чтобы включить подсказки по коду, щелкните «Правка» > «Настройки» > «Подсказки по коду» и выберите «Включить подсказки по коду». Чтобы отключить подсказки по коду, снимите флажок «Включить подсказки по коду».

Чтобы включить автоматическую вставку скобок и кавычек, выберите автодобавление скобок и автодобавление кавычек.

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

Подсказки по коду HTML

Для HTML доступны следующие типы подсказок по коду:

• Подсказки по тегам
• Подсказки по имени атрибута
• Подсказки по значению атрибута

Подсказки по тегам

Нажмите клавишу «<» на клавиатуре, чтобы начать ввод кода. По мере ввода Dreamweaver отображает допустимые HTML-теги. Если вводимая строка появляется в меню, прокрутите к ней курсор и нажмите клавишу Enter или Return, чтобы дополнить вводимый текст.

Например, при вводе «<» во всплывающем меню отображается список имен тегов. Вместо ввода полного имени тега можно выбрать этот тег в меню, чтобы вставить его в свой текст.

Подсказки по HTML-тегам также содержат краткое описание тега (если применимо).

Подсказки по имени атрибута

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

Подсказки по значению атрибута

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

Большинство подсказок по значению атрибута статические. Например, значение целевого атрибута, как правило, статическое, и поэтому подсказки для него будут также статическими. 

Dreamweaver отображает динамические подсказки по коду для таких значений атрибута, которым это необходимо (например, «id», «target», «src», «href» и «class»).

Вот несколько примеров динамического отображения подсказок по коду. 

Динамические подсказки по коду для «src»

В данном примере при вводе кода «src» вам будет представлен список допустимых значений атрибутов, а если вы выберете изображения, Dreamweaver отобразит изображения, которые находятся в вашей папке с изображениями. После этого можно прокрутить вниз и выбрать необходимый вариант.

Если у вас есть ресурсы в библиотеках CC, эти ресурсы также отображаются при вводе «src». Эти ресурсы библиотеки CC отображаются со значком в виде облака.

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

Динамические подсказки по коду для «href»

При вводе атрибута «href» в Dreamweaver отображается список файлов в папке, где вы также можете выбрать файл, на который хотите создать ссылку.

Динамические подсказки по коду для «id» и «style»

Если было задано значение для идентификаторов в файлах CSS, то при вводе атрибута «id» в файлах HTML, Dreamweaver отображает все доступные варианты для «id».

Аналогичным образом, если было задано значение для стилей в файлах CSS, то при вводе тега «style» в файлах HTML, Dreamweaver отображает все доступные варианты для «style».

Подсказки по коду CSS

Подсказки по коду доступны для следующих типов CSS:

• @rules
• Свойства
• Псевдоселекторы и псевдоэлементы
• Сокращение

Помимо подсказок по коду для свойств CSS также доступны советы.

Подсказки по коду для правил @rules в CSS

Dreamweaver отображает подсказки по коду для всех правил @rules вместе с описанием определенного правила CSS, как показано ниже.

Подсказки для свойств CSS

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

В следующем примере кода при вводе font-family: отобразятся допустимые наборы шрифтов для «font».

Можно выбрать один из наборов шрифтов или открыть диалоговое окно «Управление шрифтами» в подсказках и самостоятельно задать предпочтительные шрифты. 

Также подсказки по коду полезны при работе с «color» в CSS. При вводе каких-либо свойств, связанных с «color» (например, цвет границы «border color» или цвет фона «background color»), и нажатии клавиши «двоеточие» в подсказках по коду отображается список цветов. Можно выбрать цвет из списка или же открыть палитру цветов непосредственно из подсказок по коду для выбора предпочтительного цвета.

Если в библиотеке CC есть цветовые образцы, то в подсказках по коду будут также отображаться и эти образцы.

Подсказки для псевдоселекторов и псевдоэлементов

Можно добавить к селектору псевдоселектор CSS, чтобы определить конкретное состояние элемента. Например, при использовании селектора :hover стиль применяется в том случае, когда пользователь проводит указателем мыши над элементом, указываемым селектором.

При вводе двоеточия (:) Dreamweaver отображает список допустимых псевдоселекторов при нахождении курсора в соответствующем контексте.

При вводе двойного двоеточия (::) Dreamweaver отображает список допустимых псевдоэлементов (используемых для задания стиля указанных частей элемента) при нахождении курсора в соответствующем контексте.

Подсказки для сокращенного CSS

Сокращенные свойства CSS — это свойства, которые позволяют одновременно задавать значения для нескольких других свойств CSS. В качестве примера сокращенных свойств CSS можно привести background и font.

Как показано в примере ниже, при вводе сокращенного свойства CSS (например, background) после ввода пробела Dreamweaver отображает:

• соответствующие значения свойств в порядке релевантности;
• обязательные значения, которые должны использоваться (например, если используется свойство font, то значения font-size и font-family обязательны);
• расширение браузера для этого свойства.

При заполнении сокращенных свойств CSS подсказки по коду также отображают введенные значения свойств.

Советы по коду CSS

Для некоторых свойств CSS (например, box-shadow или text-shadow) Dreamweaver отображает советы, которые указывают, какие значения должны следовать далее, а также указывает с помощью звездочки на обязательные значения. 

Вы также можете просмотреть, как браузер интерпретирует CSS.

Подсказки по коду для JavaScript

Dreamweaver дает подсказки по коду для переменных и параметров функции в файлах JavaScript. 

В приведенном ниже примере фрагмент кода указывает на его тип.

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

Интерактивная проверка объекта

Dreamweaver также автоматически обновляет подсказки по коду для JavaScript.

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

Если изменить тип переменной (например, на строковый), то подсказки по коду Dreamweaver автоматически изменятся, указывая на то, что переменная является строкой.

Динамическое включение документации

Если вы добавили комментарии для определенной функции, то при отображении подсказки для нее Dreamweaver также включит документацию по этой функции. 

Подсказки по коду PHP

Dreamweaver поддерживает предоставление подсказок по коду для версий PHP 5.6 и 7.1. Такие подсказки по коду для PHP привязаны к конкретному веб-сайту и содержат все основные функции, классы и константы.

Дополнительные сведения о PHP версий 5.6 и 7.1 см. в руководстве по PHP.

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

Одной из полезных подсказок по коду PHP является автозавершение переменных.

При вводе символа доллара ($) отображается список всех переменных в текущем сценарии. Выберите необходимую переменную и нажмите клавишу Enter/Return. В списке также содержатся переменные из связанных файлов для исключения риска использования одной и той же переменной для разных целей.

Когда по умолчанию установлена версия PHP 7.1, в Dreamweaver отображаются специфические для PHP 7.1 подсказки по коду.

Изменение настроек задержки для подсказок по коду PHP

Для повышения удобства при наборе кода в PHP-файлах в приложении Dreamweaver 2017.5 и более поздних версий добавлена задержка для подсказок по коду PHP. При вводе кода PHP подсказки в Dreamweaver отображаются после задержки 400 мс. Если необходимо изменить настройки задержки для кода PHP, выполните следующие действия. 

Подсказки по коду для конкретного сайта

Dreamweaver позволяет разработчикам работать с Joomla, Drupal, Wordpress и другими платформами для просмотра подсказок по коду PHP при работе в представлении кода. Для отображения подсказок по коду необходимо создать файл конфигурации при помощи диалогового окна «Подсказки по коду для конкретного сайта». Конфигурация указывает Dreamweaver место для поиска подсказок по коду для конкретного веб-сайта.

Учебное видеоруководство по работе с подсказками по коду для конкретного веб-сайта см. по адресу www.adobe.com/go/learn_dw_comm13_ru.

Создание файла конфигурации

Воспользуйтесь диалоговым окном «Подсказки по коду для конкретного сайта», чтобы создать файл конфигурации для отображения подсказок по коду в Dreamweaver.

По умолчанию Dreamweaver сохраняет файл конфигурации в каталоге Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Сохранение структуры сайта

Можно сохранить настроенную структуру сайта, созданную в диалоговом окне «Подсказки по коду для конкретного сайта».

Переименование структур веб-сайта

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

Добавление файлов или папок к структуре сайта

Можно добавить любые файлы и папки, связанные с платформой. После добавления файлов или папок можно указать расширения тех файлов, которые нужно просмотреть. 

Просмотр сайта на предмет расширений файлов

Используйте диалоговое окно «Поиск расширений» для просмотра и изменения расширений файлов, включенных в структуру сайта.