Чтобы задать правила анализа Linting, необходимо внести изменения в файлы конфигурации HTML, CSS, JS и шаблонов DW. Дополнительные сведения см. в разделе Задание правил анализа Linting.
Последнее обновление
27 апр. 2021 г.
Узнайте, как проверять файлы HTML, CSS и JS, а также шаблоны DW в Adobe Dreamweaver. Просмотрите ошибки и предупреждения на панели вывода и перейдите к строкам, содержащим ошибки кода, одним щелчком мыши.
Как опытные, так и начинающие программисты часто сталкиваются с непреднамеренными ошибками в коде, которые возникли случайно или из-за отсутствия необходимых знаний. Если веб-страница или даже ее часть выглядит не так, как вы ожидали, вам придется выполнить отладку кода, чтобы найти синтаксические или логические ошибки. Отладка может отнимать чрезвычайно много усилий и времени, особенно в сложных проектах.
Dreamweaver значительно упрощает поиск распространенных ошибок с помощью так называемого анализа Linting. Анализ Linting — это процесс анализа кода для выявления возможных ошибок или подозрительного использования кода. Linting-анализ в Dreamweaver позволяет выявить проблемы с синтаксисом HTML и парсингом CSS, предупреждения в файлах JavaScript и другие ошибки.
Найденные ошибки и предупреждения отображаются на отдельной панели (панели вывода), прикрепленной к нижней части рабочей среды. Каждая строка панели позволяет быстро перейти к нужной части кода и легко устранить ошибку. Кроме того, номера строк, содержащих ошибки, выделяются красным, а содержащих предупреждения — желтым. При наведении указателя мыши на выделенные номера строк отображается краткое описание ошибки или предупреждения.
Благодаря функции анализа Linting при редактировании ошибки и предупреждения отображаются в панели вывода одновременно с редактированием кода.
Dreamweaver позволяет анализировать файлы HTML (.htm и .html), CSS и JavaScript, а также шаблоны DW.
Чтобы проверить код в этих файлах, выполните следующие действия.
Включение или отключение анализа. Вы можете выполнять анализ Linting файлов при редактировании, загрузке и сохранении.
- Можно включить/отключить анализ Linting с помощью параметра Настройки > Анализ Linting. Дополнительные сведения см. в разделе Включение анализа Linting и настройка его параметров.
Ошибки и предупреждения, найденные в файлах, отображаются на панели вывода. Дополнительные сведения см. в разделе Результаты анализа Linting и панель вывода.
Включение анализа Linting, анализа Linting при редактировании и задание его правил
Нажмите Правка > Настройки (Windows) или Dreamweaver > Настройки (Mac). В списке «Категория» нажмите Linting и выберите Включить анализ Linting, а затем нажмите Применить.
Анализ Linting при редактировании
В Dreamweaver функция анализа Linting при редактировании включена по умолчанию. Чтобы отключить ее, нажмите Правка > Настройки (Windows) или Dreamweaver > Настройки (Mac). В списке категорий нажмите Linting, выберите On edit linting и нажмите Apply
.
Задание правил анализа Linting
Чтобы анализировать файлы HTML, CSS и JS, нужно изменить правила анализа Linting в соответствующих файлах конфигурации.
- HTML: DW.htmlhintrc
- CSS: DW.csslintrc
- JS: .eslintrc
Чтобы найти и изменить эти файлы, выполните следующие действия.
Щелкните «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Mac).
Выберите Анализ Linting в списке категорий.
В разделе «Изменить набор правил» выберите требуемый тип файла, а затем нажмите «Изменить и применить изменения».
В Dreamweaver откроется соответствующий файл конфигурации.
Измените или добавьте правила анализа Linting в файлы конфигурации. Дополнительные сведения о правилах анализа Linting см. в следующих документах.
- Анализ Linting HTML: https://github.com/yaniswang/HTMLHint/wiki/Rules
- Анализ Linting CSS: https://github.com/CSSLint/csslint/wiki/Rules
- Анализ Linting JS: https://eslint.org/docs/rules
В этих файлах конфигурации можно также указать, какие типы ошибок или предупреждений должны отображаться инструментом.
Примечание
Файл конфигурации правил для анализа Linting более ранних версий Dreamweaver 19.0 — JS: DW.jshintrc. Можно ссылаться на http://jshint.com/docs/options/
Анализ ECMAScript 6
Dreamweaver поддерживает синтаксис ECMAScript 6. Dreamweaver также поддерживает анализ кода ECMAScript, а также ESLint по умолчанию как инструмент анализа JavaScript.
Нажмите Веб-сайт > Управление веб-сайтами.
Выберите Дополнительные параметры в левой части диалогового окна настройки веб-сайта.
Выберите JS Lint в меню Дополнительные параметры в левой панели.
Вы можете нажать на раскрывающийся список рядом с ECMAScript Version и выбрать 3, 5 или 6. Dreamweaver использует набор правил по умолчанию для выбранной вами версии.
Чтобы настроить набор правил, вы можете выбрать из раскрывающегося списка Файл конфигурации и нажать Редактировать файл конфигурации.
Изменения, внесенные в настройки сайта, сохраняются, и новый файл .eslintrc.js создается в корневой папке сайта, если еще не создан.
Файл eslintrc.js открывается в корневой папке сайта для редактирования. Дополнительные сведения см. в разделе Правила ESLint.
Примечание
- Настройки версии ECMAScript, заданные в диалоговом окне настройки сайта, имеют преимущество перед файлом .eslintrc.js, используемым в корневой папке сайта.
- Если на сайте у вас нет файла конфигурации ESLint, Dreamweaver будет искать файл конфигурации во всех локациях, ведущих к корневой папке.
Дополнительные сведения о каскадах и иерархии файлов конфигурации см. на сайте ESLint.
Результаты linting и панель Output
Результаты анализа Linting (ошибки и предупреждения) представлены на панели вывода. Панель вывода по умолчанию находится в закрепленном режиме в нижней части всех рабочих сред. Если панель вывода закрыта, ее можно открыть, выполнив одно из следующих действий.
- Нажмите значок состояния анализа Linting в строке состояния окна документа
- Нажмите сочетание клавиш Shift+F6.
- Откройте меню «Окно» > «Результаты» > «Выходные данные»
Значок анализа Linting в строке состояния показывает результаты анализа.
Красный — в текущем документе есть ошибки и предупреждения
Желтый — в текущем документе есть только предупреждения
Зеленый — в текущем документе нет ошибок
Примечание
Кроме того, значок анализа Linting в строке состояния позволяет открыть или закрыть панель вывода, если значок красный или желтый (не зеленый).
Строки, содержащие ошибки или предупреждения, выделены красным и желтым цветом соответственно. Чтобы перейти к строке, где возникла ошибка, дважды нажмите на сообщение на панели вывода. Вы также можете навести указатель мыши в представлении кода на номера строк, содержащих ошибки, чтобы просмотреть краткое описание ошибки или предупреждения.
На панели вывода перечисляются 50 сообщений. Сначала идут сообщения с ошибками, затем предупреждения. По мере устранения каждой из ошибок список на панели прокручивается к следующей ошибке.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
