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

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

В Dreamweaver функция анализа Linting при редактировании включена по умолчанию. Чтобы отключить ее, нажмите Правка > Настройки (Windows) или Dreamweaver > Настройки (Mac). В списке категорий нажмите Linting, выберите Анализ 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 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, используемым в корневой папке сайта. 
    • Если на сайте у вас нет файла конфигурации ESLint, Dreamweaver будет искать файл конфигурации во всех локациях, ведущих к корневой папке.

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

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

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

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

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

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

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

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

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

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

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