Jshint не показывает ошибки

Как установить и настроить JSHint

При написании JavaScript кода, новички неизбежно допускают ошибки и это нормально. Плагин JSHint как раз позволяет вовремя увидеть все допускаемые ошибки, когда вы пишите свой код в редакторе. На этом уроке мы рассмотрим как установить и настроить данный плагин для редактора VS Code.

Установка JSHint для VS Code

Для работы плагина JSHint, у вас уже должна быть установлена среда Node.js.

Шаг 1) Включите плагин JSHint во вкладке «Расширения»

Шаг 2) Установите npm пакет

NPM это менеджер пакетов, входящий в состав Node.js. В веб-разработке уже существует много готовых решений: компиляторы, плагины и еще много всего полезного. С помощью пакетного менеджера можно быстро все эти полезности устанавливать и что немаловажно, находится они будут в одном месте на вашем компьютере.

Для установки плагина глобально, откройте вкладку «Терминал», введите команду npm install -g jshint и нажмите клавишу «ENTER». Вместо слова install, можно прописать сокращенное название«i».

Как установить и настроить JSHint.

Теперь проверим, как это все работает. Сделаем намеренно ошибки в коде. Например пропустим точку с запятой на конце. Плагин сразу подчеркивает проблемное место волнистой линией, а во вкладке терминала «Проблемы», сразу выводится сообщение. JSHint подсказывает, что на второй строчке нет точки с запятой.

Как установить и настроить JSHint.

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

Как установить и настроить JSHint.

Плагин JSHint очень полезный и удобный инструмент, который подскажет, где у вас проблема. Но есть одна особенность. О ней мы сейчас и поговорим. Дело в том, что после установки, плагин работает по стандартным настройкам. Зачастую «заводские» настройки ориентируются на старые форматы кода. Нас это совсем не устраивает, поэтому необходимо откорректировать настройки JSHint.

Настройка JSHint для VS Code

Создайте внутри проекта системный файл .jshintrc и пропишите внутри файла свои оптимальные настройки. Системные файлы могут не показываться, чтобы увидеть их, необходимо настроить показ скрытых файлов. Файл с настройками, находящийся внутри проекта будет влиять только на этот проект. Чтобы не копировать файл .jshintrc из проекта в проект, поместите его в общую папку с проектами.

Пример файла .jshintrc

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


{
    "camelcase" : true, // Названия переменных в camelCase стиле

    "undef" : true, // Все не глобальные переменные должны быть объявлены до их использования.

    "quotmark" : true, // Согласованность стиля кавычек

    "maxlen" : 120, // Максимальная длина строки

    "trailing" : true, // Запрещены пробелы на концах.

    "curly" : true, // Фигурные кавычки обязательны для каждого нового блока или области.

    "strict" : true, // Обязательно строгое использование.

    "browser" : true, // Стандартный браузер `window`, `document`.

    "devel" : true, // Разрешена панель разработчика `console.log();`.

    "jquery" : true, // Опция определяет глобальные переменные, предоставляемые библиотекой jQuery.

    "esversion" : 8, // Включить функции, представленные в ECMAScript 8.

    "node" : true // Определяет доступные глобальные переменные.

}

В этом уроке мы научились работать с одним из самых полезных инструментов для Front-End разработчика. JSHint будет в автоматическом режиме указывать на недочеты и ошибки в нашем коде. Теперь никакие синтаксические ошибки, опечатки и прочие мелочи не испортят ваш код!

  • Создано 03.07.2020 10:05:12


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

I researched for a solution to this problem on jshint documentation page and through questions in this forum. I didn’t see anything that addresses my problem. I have node.js installed as well as sublimelinter and jshint. In my command line I typed npm node.js and npm jshint and saw that they were installed. I followed the instructions from videos I saw on sublimetext tutorials on YouTube. I purposely made errors in my code but jshint doesn’t show them. Here is a screenshot of my code.
enter image description here

And here is the code in sublimetext3 editor.

// JavaScript Document
 var image = document.getElementById('myCities');

 var imageArray =    ['photos/photo1.jpg','photos/photo2.jpg','photos/photo3.jpg','photos/photo4.jpg',     'photos/photo5.jpg','photos/photo6.jpg','photos/photo7.jpg'];

 var imageIndex = 0;

 function changeCities(){

myCities.setAttribute('src', imageArray [imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
    imageIndex=[0];
}

 }
 var intervalHandle = setInterval(changeCities, 3000);

 myCities.onclick = function(){
clearInterval(intervalHandle);
 };
function()
foo = name //this is the error:no brackets for the function, variable is     undefined and the semicolon is left out.

I’d appreciate any suggestions on what I can do to get jshint to work properly.

Вопрос

Я искал решение этой проблемы на странице документации jshint и через вопросы на этом форуме. Я не нашел ничего, что решало бы мою проблему. У меня установлен node.js, а также sublimelinter и jshint. В командной строке я набрал npm node.js и npm jshint и увидел, что они установлены. Я следовал инструкциям из видеороликов, которые я видел в учебниках по sublimetext на YouTube. Я намеренно сделал ошибки в своем коде, но jshint их не показал. Вот скриншот моего кода.
введите описание изображения здесь

А вот код в редакторе sublimetext3.

Я’буду благодарен за любые предложения о том, что я могу сделать, чтобы заставить jshint работать правильно.

Как установить и настроить JSHint

При написании JavaScript кода, новички неизбежно допускают ошибки и это нормально. Плагин JSHint как раз позволяет вовремя увидеть все допускаемые ошибки, когда вы пишите свой код в редакторе. На этом уроке мы рассмотрим как установить и настроить данный плагин для редактора VS Code.

Установка JSHint для VS Code

Для работы плагина JSHint, у вас уже должна быть установлена среда Node.js.

Шаг 1) Включите плагин JSHint во вкладке «Расширения»

Шаг 2) Установите npm пакет

NPM это менеджер пакетов, входящий в состав Node.js. В веб-разработке уже существует много готовых решений: компиляторы, плагины и еще много всего полезного. С помощью пакетного менеджера можно быстро все эти полезности устанавливать и что немаловажно, находится они будут в одном месте на вашем компьютере.

Для установки плагина глобально, откройте вкладку «Терминал», введите команду npm install -g jshint и нажмите клавишу «ENTER». Вместо слова install, можно прописать сокращенное название«i».

Как установить и настроить JSHint.

Теперь проверим, как это все работает. Сделаем намеренно ошибки в коде. Например пропустим точку с запятой на конце. Плагин сразу подчеркивает проблемное место волнистой линией, а во вкладке терминала «Проблемы», сразу выводится сообщение. JSHint подсказывает, что на второй строчке нет точки с запятой.

Как установить и настроить JSHint.

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

Как установить и настроить JSHint.

Плагин JSHint очень полезный и удобный инструмент, который подскажет, где у вас проблема. Но есть одна особенность. О ней мы сейчас и поговорим. Дело в том, что после установки, плагин работает по стандартным настройкам. Зачастую «заводские» настройки ориентируются на старые форматы кода. Нас это совсем не устраивает, поэтому необходимо откорректировать настройки JSHint.

Настройка JSHint для VS Code

Создайте внутри проекта системный файл .jshintrc и пропишите внутри файла свои оптимальные настройки. Системные файлы могут не показываться, чтобы увидеть их, необходимо настроить показ скрытых файлов. Файл с настройками, находящийся внутри проекта будет влиять только на этот проект. Чтобы не копировать файл .jshintrc из проекта в проект, поместите его в общую папку с проектами.

Пример файла .jshintrc

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


{
    "camelcase" : true, // Названия переменных в camelCase стиле
    "undef" : true, // Все не глобальные переменные должны быть объявлены до их использования.
    "quotmark" : true, // Согласованность стиля кавычек
    "maxlen" : 120, // Максимальная длина строки
    "trailing" : true, // Запрещены пробелы на концах.
    "curly" : true, // Фигурные кавычки обязательны для каждого нового блока или области.
    "strict" : true, // Обязательно строгое использование.
    "browser" : true, // Стандартный браузер `window`, `document`.
    "devel" : true, // Разрешена панель разработчика `console.log();`.
    "jquery" : true, // Опция определяет глобальные переменные, предоставляемые библиотекой jQuery.
    "esversion" : 8, // Включить функции, представленные в ECMAScript 8.
    "node" : true // Определяет доступные глобальные переменные.
}

В этом уроке мы научились работать с одним из самых полезных инструментов для Front-End разработчика. JSHint будет в автоматическом режиме указывать на недочеты и ошибки в нашем коде. Теперь никакие синтаксические ошибки, опечатки и прочие мелочи не испортят ваш код!

  • Создано 03.07.2020 10:05:12


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

I am running JSHint as part of the Checkstyle plugin for Jenkins. So far, this works good, but there is one issue. I call JSHint using:

jshint --verbose --reporter=checkstyle foo > checkstyle-jshint.xml || exit 0

and this works, but it automatically runs JSHint using the --show-non-errors option — which is definitely not what I want. I have seen that this is an official JSHint issue, hence it seems wrong on the one hand, but (at the moment) official behavior of JSHint.

Does anybody have an idea of how to workaround this, so that the Checkstyle report only inlcudes the errors JSHint would report on the console when running it without the --show-non-errors parameter?

asked Nov 25, 2013 at 13:44

Golo Roden's user avatar

Golo RodenGolo Roden

139k95 gold badges297 silver badges423 bronze badges

1

Okay, I found a workaround myself: Using the --reporter parameter, besides using the pre-defined values jslint and checkstyle you can also specify a .js file which implements a custom reporter.

So what I did was basically write my own custom reporter that outputs a valid checkstyle-conform .xml file. This way it works as expected.

answered Nov 28, 2013 at 11:50

Golo Roden's user avatar

Golo RodenGolo Roden

139k95 gold badges297 silver badges423 bronze badges

Возможно, вам также будет интересно:

  • Jquery validate вывод ошибок
  • Jquery ajax обработчик ошибок
  • Jquery ajax обработка ошибок
  • Jquery ajax код ошибки
  • Jquery ajax вывод ошибки

  • Понравилась статья? Поделить с друзьями:
    0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии