Руководство пользователя Отмена

Анализ Linting для проверки кода

Поиск

Последнее обновление 21 мая 2021 г.

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

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

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

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

Благодаря функции анализа Linting при редактировании ошибки и предупреждения отображаются в панели вывода одновременно с редактированием кода.

Dreamweaver позволяет анализировать файлы HTML (.htm и .html), CSS и JavaScript, а также шаблоны DW.

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

Чтобы задать правила анализа Linting, необходимо внести изменения в файлы конфигурации HTML, CSS, JS и шаблонов DW. Дополнительные сведения см. в разделе Задание правил анализа Linting.
Включение или отключение анализа. Вы можете выполнять анализ Linting файлов при редактировании, загрузке и сохранении.
- Можно включить/отключить анализ Linting с помощью параметра Настройки > Анализ Linting. Дополнительные сведения см. в разделе Включение анализа Linting и настройка его параметров.

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

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

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

Анализ Linting при редактировании

В Dreamweaver функция анализа Linting при редактировании включена по умолчанию. Чтобы отключить ее, нажмите Правка > Настройки (Windows) или Dreamweaver > Настройки (Mac). В списке категорий нажмите Linting, выберите Анализ Linting при редактировании, а затем нажмите Применить.

Задание правил анализа 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 использует стандартный набор правил для выбранной версии.

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

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

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

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

Файл конфигурации .eslintrc.js
Примечание.
Настройки версии ECMAScript, заданные в диалоговом окне настройки сайта, имеют преимущество перед файлом .eslintrc.js, используемым в корневой папке сайта.

Если на сайте у вас нет файла конфигурации ESLint, Dreamweaver будет искать файл конфигурации во всех локациях, ведущих к корневой папке.

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

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

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

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

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

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

Примечание.

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

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

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

Adobe

Получайте помощь быстрее и проще

Новый пользователь?