Узнайте, как проверять файлы HTML, CSS и JS в Adobe Dreamweaver. Просмотрите ошибки и предупреждения на панели вывода и перейдите к строкам, содержащим ошибки кода, одним щелчком мыши.

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

Dreamweaver значительно упрощает поиск распространенных ошибок с помощью так называемого анализа linting. Анализ linting — это процесс анализа кода для выявления возможных ошибок или подозрительного использования кода. Анализ linting в Dreamweaver позволяет выявить проблемы с синтаксисом HTML и парсингом CSS, предупреждения в файлах JavaScript и другие ошибки.

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

Dreamweaver позволяет анализировать файлы HTML (.htm и .html), CSS и JavaScript. Чтобы проверить код в этих файлах, выполните следующие действия.

  1. Чтобы задать правила анализа linting, необходимо внести изменения в файлы конфигурации HTML, CSS и JS. Дополнительные сведения см. в разделе Указание правил анализа linting.

  2. Включение или отключение анализа. Вы можете выполнять анализ файлов при загрузке или сохранении. Можно включить/отключить анализ Linting с помощью параметра Настройки > Анализ Linting. Дополнительные сведения см. в разделе Включение анализа linting и настройка его параметров.

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

Включение анализа linting и задание его правил

Щелкните Правка > Настройки (Windows) или Dreamweaver > Настройки (Mac). Выберите Анализ Linting в списке «Категория», а затем выберите Включить анализ Linting.

Указание правил анализа linting

Чтобы анализировать файлы HTML, CSS и JS, нужно изменить правила анализа linting в соответствующих файлах конфигурации.

  • HTML: DW.htmlhintrc
  • CSS: DW.csslintrc
  • JS: .eslintrc

Чтобы найти и изменить эти файлы, выполните следующие действия.

  1. Щелкните «Правка > Настройки» (Windows) или «Dreamweaver > Настройки» (Mac). 

  2. Выберите «Анализ linting» в списке категорий.

  3. В разделе «Изменить набор правил» выберите требуемый тип файла, а затем щелкните «Изменить и применить изменения».

    В Dreamweaver откроется соответствующий файл конфигурации.

  4. Измените или добавьте правила анализа linting в файлы конфигурации. Дополнительные сведения о правилах анализа linting см. в следующих документах.

    В этих файлах конфигурации можно также указать, какие типы ошибок или предупреждений должны отображаться инструментом. 

Примечание.

Файл конфигурации правил для анализа Linting более ранних версий Dreamweaver CC 19.0 — JS: DW.jshintrc. Можно ссылаться на http://jshint.com/docs/options/

Анализ ECMAScript 6

Dreamweaver поддерживает синтаксис ECMAScript 6. Dreamweaver также поддерживает анализ кода ECMAScript, а также ESLint по умолчанию как инструмент анализа JavaScript.

  1. Нажмите Веб-сайт > Управление веб-сайтами.

    Диалоговое окно «Управление веб-сайтами»
    Выберите веб-сайт в диалоговом окне «Управление веб-сайтами»
  2. Выберите Дополнительные параметры в левой части диалогового окна настройки веб-сайта. 

  3. Выберите JS Lint в меню Дополнительные параметры в левой панели. 

    Щелкните раскрывающийся список рядом со свойством ECMAScript Version и выберите 3, 5 или 6. Dreamweaver использует стандартный набор правил для выбранной версии. 

    Выберите версию ECMAScript
    Выберите версию ECMAScript
  4. Чтобы настроить набор правил, вы можете выбрать из раскрывающегося списка Файл конфигурации и нажать Редактировать файл конфигурации

    Редактировать файл конфигурации JS Lint
    Редактировать файл конфигурации JS Lint

    Изменения, внесенные в настройки сайта, сохраняются, и новый файл .eslintrc.js создается в корневой папке сайта, если еще не создан.

    Файл eslintrc.js открывается в корневой папке сайта для редактирования. Дополнительные сведения см. в разделе Правила ESLint

    Файл конфигурации .eslintrc.js
    Файл конфигурации .eslintrc.js

    Примечание.

    • Настройки версии ECMAScript, заданные в диалоговом окне настройки сайта, имеют преимущество перед файлом .eslintrc.js, используемым в корневой папке сайта. 
    • Если вы не используете файл .eslintrc.js в настройках сайта, Dreamweaver будет искать файл the .eslintrc.js во всех локациях, ведущих к корневой папке. 

    Дополнительные сведения о каскадах и иерархии файлов конфигурации см. на сайте ESLint.

Результаты анализа linting и панель вывода

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

  • Щелкните значок состояния анализа linting в строке состояния окна документа
  • Нажмите сочетание клавиш Shift+F6.
  • Откройте меню «Окно» > «Результаты» > «Выходные данные»
Панель вывода и значок анализа linting
Панель вывода и значок анализа Linting

Значок анализа Linting в строке состояния показывает результаты анализа.

  • Красный — текущий документ содержит ошибки и предупреждения.
  • Желтый — текущий документ содержит только предупреждения.
  • Зеленый — текущий документ не содержит ошибок.

Примечание.

Кроме того, значок анализа Linting в строке состояния позволяет открыть или закрыть панель вывода, если значок красный или желтый (не зеленый).

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

На панели вывода перечисляются 50 сообщений. Сначала идут сообщения с ошибками, затем предупреждения. По мере устранения каждой из ошибок список на панели прокручивается к следующей ошибке.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет