JSHint — JSHint
JSHint — это инструмент статического анализа кода , используемый в разработке программного обеспечения для проверки, соответствует ли JavaScriptисходный код кодировке . правила . JSHint был создан в 2011 году Антоном Ковалевым как форк проекта JSLint (автор Дуглас Крокфорд ). Антон и другие считали, что JSLint становится «слишком самоуверенным» и не допускает достаточного количества параметров настройки. Сопровождающие JSHint публикуют как онлайн-версию , так и версию для командной строки .
Онлайн-версия доступна через официальный сайт, на который пользователи могут вставить код для запуска приложения в сети. Версия JSHint для командной строки (распространяется как модуль Node.js ) позволяет автоматизировать процессы линтинга путем интеграции JSHint в рабочий процесс разработки проекта.
- 1 Лицензия
- 2 См. Также
- 3 Ссылки
- 4 Дополнительная литература
- 5 Внешние ссылки
Лицензия
JSHint распространяется по лицензии MIT, за исключением одного файла, все еще находящегося под Лицензия JSLint , которая представляет собой слегка измененную версию лицензии MIT. Дополнительный пункт определяет, что программное обеспечение должно использоваться «во благо, а не во зло». Этот пункт, согласно Free Software Foundation , сделал программное обеспечение несвободным .
. В августе 2020 года весь код по предыдущей лицензии JSLint был заменен программным обеспечением с открытым исходным кодом, в результате чего программное обеспечение полностью бесплатное программное обеспечение.
См. также
Ссылки
Дополнительная литература
- Закас, Николас (май 2012 г.). Поддерживаемый JavaScript (1-е изд.). O’Reilly Media. ISBN978-1-449-32768-2 .
- Отеро, Сезар (май 2012 г.). Профессиональный jQuery (1-е изд.). Джон Вили и сыновья. ISBN978-1-118-02668-7 .
- Уллман, Ларри (февраль 2012 г.). Современный JavaScript: разработка и дизайн (1-е изд.). Peachpit Press. ISBN978-0321812520 .
- «JSHint — (более мягкий) инструмент качества кода JavaScript» . IProgrammer. 21 февраля 2011 г. Получено 6 июня 2012 г.
Внешние ссылки
- Официальный сайт
Как установить и настроить 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 для 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться (Часть 1)
Далеко не каждая строка моего кода получается идеальной с первого же раза. Ну, в некоторых случаях… Иногда… Ладно – практически никогда. Правда заключается в том, что я трачу значительно больше времени на исправление своих собственных глупых ошибок, чем мне хотелось бы. Именно поэтому я использую статические анализаторы практически в каждом написанном мной файле JavaScript.
Статические анализаторы просматривают код и находят в нем ошибки, прежде чем вы его запустите. Они выполняют простые проверки, например, проверку синтаксиса принудительного исполнения (например, наличия табуляции вместо пробелов) и более глобальные проверки, такие как проверка того, чтобы функции не были слишком сложными. Статические анализаторы также ищут ошибки, которые невозможно найти в процессе тестирования, например, == вместо ===.
В больших проектах и при работе в больших командах вам не помешает небольшая помощь в поиске таких «простых» багов, которые на самом деле оказываются не такими простыми, как кажутся.
JSLint, JSHint и Closure Compiler
Есть три основных варианта статических анализаторов для JavaScript: JSLint, JSHint и Closure Compiler.
JSLint был первым статическим анализатором для JavaScript. Его можно запустить на официальном сайте или использовать одну из надстроек, которые можно запускать в локальных файлах. JSLint находит много важных ошибок, но он очень жесткий. Вот яркий пример:
var s = 'mystring'; for (var i = 0; i
JSLint показывает в этом коде две ошибки:
Unexpected '++'. Move 'var' declarations to the top of the function. Первая проблема – это определение переменной i в условиях цикла. JSLint также не принимает оператор ++ в конце определения цикла. Он хочет, чтобы код выглядел следующим образом:
var s = 'mystring'; var i; for (i = 0; i
Я ценю создателей JSLint, но как по мне – это перебор. Он оказался жестким и для Антона Ковалева, поэтому он создал JSHint.
JSHint работает так же, как и JSLint, но он написан в дополнение к Node.js, а потому он более гибкий. JSHint включает большое количество опций, что позволяет выполнять пользовательские проверки путем написания своего собственного генератора отчетов.
Запустить JSHint можно с сайта, но в большинстве случаев лучше установить JSHint в качестве локального инструмента командной строки с помощью Node.js. Как только вы установите JSHint, его можно запустить в ваших файлах с помощью такой команды:
jshint test.js JSHint также включает плагины для популярных текстовых редакторов, поэтому его можно запускать в процессе написания кода.
CLOSURE COMPILER
Closure Compiler от Google – это совсем другая разновидность программы. Как предполагает его название, он представляет собой не только программу для проверки, но и компилятор. Он написан на Java и основан на анализаторе Rhino от Mozilla. Closure Compiler включает простой режим для выполнения базовой проверки кода, и более сложные режимы, позволяющие выполнять дополнительную проверку и обеспечивать соблюдение определений отдельных видов.
Closure Compiler сообщает об ошибках в коде JavaScript, но также создает минимизированные версии JavaScript. Компилятор удаляет пустое пространство, комментарии и неиспользуемые переменные и упрощает длинные выражения, делая скрипт максимально компактным.
Google сделал очень простую версию компилятора, доступную в сети, но скорее всего, вы захотите скачать Closure Compiler и запустить его локально.
Closure Compiler после проверки кода выводит список файлов в один минимизированный файл. Таким образом, вы можете запустить его, скачав файл compiler.jar.
java -jar compiler.jar --js_output_file compress.js --js test1.js --js test2.js Выбираем правильную программу проверки
В своих проектах я комбинирую Closure Compiler и JSHint. Closure Compiler выполняет минимизацию и базовую проверку, в то время как JSHint проводит более сложный анализ кода. Эти две программы отлично работают вместе, и каждая из них охватывает те области, которые не может охватить другая. Кроме того, я могу использовать возможности расширения JSHint, чтобы писать пользовательские программы проверки. Одна написанная мной общая программа проверяет определенные функции, которые мне не нужны, например вызов функций, которых не должно быть в моем проекте.
Теперь, когда мы рассмотрели несколько программ для проверки, давайте разберем немного плохого кода. Каждый из этих шести примеров представляет собой код, который не стоит писать, и ситуации, в которых программы проверки кода могут спасти вас.
В этой статье для большинства примеров используется JSHint, но Closure Compiler обычно выдает похожие предупреждения.
JavaScript – это язык с динамической типизацией. Вам не нужно определять типы в процессе написания кода, при этом они существуют при запуске.
JavaScript предлагает два оператора сравнения для управления такими динамическими типами: == и ===. Давайте рассмотрим это на примере.
var n = 123; var s = '123'; if (n == s) < alert('Переменные равны'); >if (n === s)
Оператор сравнения == — это остатки языка С, в который JavaScript уходит корнями. Его использование практически всегда является ошибкой: сравнивание значений отдельно от типов редко является тем, что разработчик на самом деле хочет сделать. На самом деле, число «сто двадцать три» отличается от строки «один два три». Эти операторы легко неправильно написать и еще легче неправильно прочесть. Проверьте этот код с помощью JSHint и вы получите следующее:
test.js: line 9, col 12, Expected '===' and instead saw '=='. Неопределенные переменные и поздние определения
Давайте начнем с простого кода:
function test()
Видите баг? Я совершаю эту ошибку каждый раз. Запустите этот код, и вы получите ошибку:
ReferenceError: myvar is not defined Давайте сделаем проблему немного более сложной:
function test()
Запустите этот код, и вы получите следующее:
Hello, World Этот второй пример работает, но у него есть очень неожиданные побочные действия. Правила для определения переменных JavaScript и области видимости оказываются, в лучшем случае, запутанными. В первом случае JSHint сообщит следующее:
test.js: line 3, col 17, 'myvar' is not defined. Во втором случае он сообщит такое:
test.js: line 2, col 5, 'myVar' is not defined. test.js: line 3, col 17, 'myVar' is not defined. Первый пример поможет вам избежать ошибки времени выполнения программы. Вам не нужно тестировать свое приложение — JSHint найдет ошибку за вас. Второй пример хуже, так как в результате тестирования вы не найдете баг.
Проблема второго примера коварно незаметная и сложная. Переменная myVar теперь исчезла из своей области видимости и поднялась в глобальную область. Это означает, что она будет существовать и иметь значение Hello, World даже после запуска функции test. Это называется «загрязнение глобальной области видимости».
Переменная myVar будет существовать для каждой другой функции, которая будет запущена после функции test. Запустите следующий код после того, как выполните функцию test:
console.log('myVar: ' + myVar); Вы все равно получите Hello, World. Переменная myVar будет висеть по всему вашему коду как шаблон, который приводит к сложным багам, которые вы будете искать всю ночь перед релизом, а все потому, что вы забыли вписать var.
Настройка JSHint в PhpStorm
Admin 
14.07.2020 , обновлено: 02.08.2020 
JavaScript, Software
JSHint это свод правил по которым код проверятся на работоспособность. Например, если вы используете let, а JSHint на ES5, то будет показываться ошибка.
Для исправления этого мы можем создать свой файл JSHint. Внести туда свои правила.
Чтобы PhpStorm перестал ругаться в JS файлах на let, меняем версию с 5-ой на 6-ую:
{
«esversion» : 6
}
Читайте также
У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.