Почему не работает jshint

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

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

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

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

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 будет в автоматическом режиме указывать на недочеты и ошибки в нашем коде. Теперь никакие синтаксические ошибки, опечатки и прочие мелочи не испортят ваш код!

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

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

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

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

Порекомендуйте эту статью друзьям:

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

Она выглядит вот так:

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

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Ошибка кода Visual Studio — не удалось загрузить библиотеку jshint

Каждый раз, когда код Visual Studio запускается или загружается, он отображает сообщение об ошибке: » Не удалось загрузить библиотеку jshint. Пожалуйста, установите jshint в папку рабочей области, используя ‘npm install jshint’, или глобально, используя ‘npm install -g jshint’, а затем нажмите Retry «. Есть ли доступное решение?

4 ответа

Вам нужно будет следовать инструкциям и установить jshint.

Только для рабочего пространства npm установить jshint

Для всех ваших рабочих мест npm установить -g jshint

У меня была эта проблема, когда я установил jshint , используя yarn глобально ( yarn global add jshint ). Я добавил следующие свойства в settings.json для User для решения проблемы:

Первое свойство, т.е. jshint.packageManager указывает, что yarn используется для управления node пакетами вместо npm . Второй, то есть jshint.nodePath указывает путь к установке jshint . Чтобы проверить, успешно ли загружен jshint , я открыл командный поддон ( CTRL + 3 ) и выполнил команду JSHint: Show output , которая показала это сообщение в выходных данных. :

Это указывало на то, что проблема была решена. После этого сообщения jshint появились в файлах *.js .

Попробуйте удалить с помощью «npm uninstall» и перейдите по ссылке — https: //marketplace.visualstudio. com / items? itemName = dbaeumer.jshint для переустановки.

Чтобы применить изменения к глобальной области, а не только к определенной рабочей области, используйте следующую команду в терминале: —

Для определенного рабочего пространства используйте следующую команду в терминале: —

Источник

Почему JSHint выдает предупреждение, если я использую const?

это ошибка, которую я получаю при использовании const:

мой код выглядит так:

код работает нормально только JSHint предупреждает меня каждый раз.

10 ответов:

при использовании функций ECMAScript 6, таких как const , вы должны установить эту опцию, чтобы JSHint не вызывал ненужных предупреждений.

/ * jshint esnext: true */ (изменить 2015.12.29: обновленный синтаксис для отражения @Ольга)

эта опция, как следует из названия, сообщает JSHint, что ваш код использует ECMAScript 6 specific синтаксис. http://jshint.com/docs/options/#esversion

редактировать 2017.06.11: добавлена еще одна опция на основе ответ.

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

Вы можете добавить файл с именем .jshintrc в вашем приложении root со следующим содержимым, чтобы применить этот параметр для решение:

Джеймс’ ответ предполагает, что вы можете добавить комментарий /*jshint esversion: 6 */ на каждого, но это больше работы, чем необходимо, если вам нужно контролировать много файлов.

Я потратил годы, пытаясь исправить это. Каждое решение говорит о «настройке параметров». Я не знаю, что это значит. Наконец-то я все понял. Вы можете просто закомментировать строку в верхней части файла /*jshint esversion: 6 */ .

Я получил это же предупреждение при использовании инструкции экспорта. Я использую VS-код и использовал аналогичный подход к решению Wenlong Jiang.

1. Настройки Пользователя
2. JSHint config
3. «jshint.options»: <> (Edit)

использовать двойные кавычки при указании «esversion»

или скопируйте этот фрагмент в Настройки пользователя:

создание .jshintrc файл не нужен, если вы хотите настройка глобальных параметров jshint для вашего редактора

вы можете указать esversion:6 внутри объекта параметров jshint. Пожалуйста, смотрите изображение. Я использую плагин grunt-contrib-jshint.

• на предпочтения ->настройки ( cmd + , )
• тип jshint.options в строке поиска
• наведите на него курсор и нажмите на значок карандаша
• его теперь добавляется на правой стороне.
• добавить «esversion»: 6 параметры объекта.

или просто добавьте это в Настройки пользователя:

когда вы начинаете использовать ECMAScript 6 Эта ошибка, вызванная вашей IDE.

есть два варианта:

Если у вас есть только один файл и вы хотите использовать es6, просто добавьте нижнюю строку в верхней части файла.

или если у вас есть номер JS-файла или вы используете любую структуру(например, nodejs express), вы можете создать новый файл с именем .jshintrc в корневой каталог и добавить код ниже в файл:

Если вы хотите использовать версию es6 для каждого проекта, который вы можете настроить в своей среде IDE.

создайте файл с именем, скажем jshint_opts с этим содержимым:

затем вызовите jshint с чем-то вроде этой командной строки:

jshint —config jshint_opts lib/*.js

при использовании Sublime Text 3:

• на предпочтения ->настройки
• под настройки.sublime-настройки-пользователь добавить «esversion»: 6

Если вы используете Webstorm и если у вас нет собственного файла конфигурации, то просто включите EcmaScript.next в расслабляющих вариантах в in

Настройки / Языки И Фреймворки / JavaScript / Инструменты Качества Кода | JSHint

Источник

Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться (Часть 1)

Далеко не каждая строка моего кода получается идеальной с первого же раза. Ну, в некоторых случаях… Иногда… Ладно – практически никогда. Правда заключается в том, что я трачу значительно больше времени на исправление своих собственных глупых ошибок, чем мне хотелось бы. Именно поэтому я использую статические анализаторы практически в каждом написанном мной файле JavaScript.

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

В больших проектах и при работе в больших командах вам не помешает небольшая помощь в поиске таких «простых» багов, которые на самом деле оказываются не такими простыми, как кажутся.

JSLint, JSHint и Closure Compiler

Есть три основных варианта статических анализаторов для JavaScript: JSLint, JSHint и Closure Compiler.

JSLint был первым статическим анализатором для JavaScript. Его можно запустить на официальном сайте или использовать одну из надстроек, которые можно запускать в локальных файлах. JSLint находит много важных ошибок, но он очень жесткий. Вот яркий пример:

JSLint показывает в этом коде две ошибки:

Первая проблема – это определение переменной i в условиях цикла. JSLint также не принимает оператор ++ в конце определения цикла. Он хочет, чтобы код выглядел следующим образом:

Я ценю создателей JSLint, но как по мне – это перебор. Он оказался жестким и для Антона Ковалева, поэтому он создал JSHint.

JSHint работает так же, как и JSLint, но он написан в дополнение к Node.js, а потому он более гибкий. JSHint включает большое количество опций, что позволяет выполнять пользовательские проверки путем написания своего собственного генератора отчетов.
Запустить JSHint можно с сайта, но в большинстве случаев лучше установить JSHint в качестве локального инструмента командной строки с помощью Node.js. Как только вы установите JSHint, его можно запустить в ваших файлах с помощью такой команды:

JSHint также включает плагины для популярных текстовых редакторов, поэтому его можно запускать в процессе написания кода.

Closure Compiler от Google – это совсем другая разновидность программы. Как предполагает его название, он представляет собой не только программу для проверки, но и компилятор. Он написан на Java и основан на анализаторе Rhino от Mozilla. Closure Compiler включает простой режим для выполнения базовой проверки кода, и более сложные режимы, позволяющие выполнять дополнительную проверку и обеспечивать соблюдение определений отдельных видов.

Closure Compiler сообщает об ошибках в коде JavaScript, но также создает минимизированные версии JavaScript. Компилятор удаляет пустое пространство, комментарии и неиспользуемые переменные и упрощает длинные выражения, делая скрипт максимально компактным.

Google сделал очень простую версию компилятора, доступную в сети, но скорее всего, вы захотите скачать Closure Compiler и запустить его локально.

Closure Compiler после проверки кода выводит список файлов в один минимизированный файл. Таким образом, вы можете запустить его, скачав файл compiler.jar.

Выбираем правильную программу проверки

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

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

В этой статье для большинства примеров используется JSHint, но Closure Compiler обычно выдает похожие предупреждения.

JavaScript – это язык с динамической типизацией. Вам не нужно определять типы в процессе написания кода, при этом они существуют при запуске.

JavaScript предлагает два оператора сравнения для управления такими динамическими типами: == и ===. Давайте рассмотрим это на примере.

Оператор сравнения == — это остатки языка С, в который JavaScript уходит корнями. Его использование практически всегда является ошибкой: сравнивание значений отдельно от типов редко является тем, что разработчик на самом деле хочет сделать. На самом деле, число «сто двадцать три» отличается от строки «один два три». Эти операторы легко неправильно написать и еще легче неправильно прочесть. Проверьте этот код с помощью JSHint и вы получите следующее:

Неопределенные переменные и поздние определения

Давайте начнем с простого кода:

Видите баг? Я совершаю эту ошибку каждый раз. Запустите этот код, и вы получите ошибку:

Давайте сделаем проблему немного более сложной:

Запустите этот код, и вы получите следующее:

Этот второй пример работает, но у него есть очень неожиданные побочные действия. Правила для определения переменных JavaScript и области видимости оказываются, в лучшем случае, запутанными. В первом случае JSHint сообщит следующее:

Во втором случае он сообщит такое:

Первый пример поможет вам избежать ошибки времени выполнения программы. Вам не нужно тестировать свое приложение — JSHint найдет ошибку за вас. Второй пример хуже, так как в результате тестирования вы не найдете баг.

Проблема второго примера коварно незаметная и сложная. Переменная myVar теперь исчезла из своей области видимости и поднялась в глобальную область. Это означает, что она будет существовать и иметь значение Hello, World даже после запуска функции test. Это называется «загрязнение глобальной области видимости».

Переменная myVar будет существовать для каждой другой функции, которая будет запущена после функции test. Запустите следующий код после того, как выполните функцию test:

Вы все равно получите Hello, World. Переменная myVar будет висеть по всему вашему коду как шаблон, который приводит к сложным багам, которые вы будете искать всю ночь перед релизом, а все потому, что вы забыли вписать var.

Источник