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

Download and install

JSHint runs in a number of different environments; installation is different for each.

Browser-like environments

A standalone files is built for browser-like environments with every release. You’ll find it in the dist directory of the download. Download the latest release here.

Rhino

A standalone files is built for Mozilla’s Rhino JavaScript engine with every release. You’ll find it in the dist directory of the download. Download the latest release here.

Node.js

Each release of JSHint is published to npm, the package manager for the Node.js platform.

You may install it globally using the following command:

npm install -g jshint

After this, you can use the jshint command-line interface.

It is common to install JSHint as a development dependency within an existing Node.js project:

npm install --save-dev jshint

Plugins for text editors and IDEs

VIM

• jshint.vim, VIM plugin and command line tool for running JSHint.
• jshint2.vim, modern VIM plugin with extra features for running JSHint.
• Syntastic, supports JSHint both older/newer than 1.1.0.

Emacs

• jshint-mode, JSHint mode for GNU Emacs.
• Flycheck, on-the-fly syntax checking extension for GNU Emacs, built-in JSHint support.
• web-mode, an autonomous major-mode for editing web templates supports JSHint.

Sublime Text

• Sublime-JSHint Gutter, JSHint plugin for graphically displaying lint results in ST2 and ST3.
• sublime-jshint, JSHint build package for ST2.
• Sublime Linter, inline lint highlighting for ST2.

Atom

• linter-jshint, JSHint plugin for Atom’s Linter.
• JSHint for Atom, JSHint package for Atom.

TextMate

• JSHint Bundle for TextMate 2
• JSHint TextMate Bundle.
• JSLintMate (supports both JSHint and JSLint).
• JSHint-external TextMate Bundle

Visual Studio

• SharpLinter (supports both JSLint and JSHint).
• JSLint for Visual Studio (supports both JSLint and JSHint).
• Web Essentials (Runs JSHint automatically).

Visual Studio Code

• VS Code JSHint extension, integrates JSHint into VS Code.

Brackets

• Brackets JSHint plugin
• Brackets Interactive Linter

Other

• ShiftEdit IDE has built-in support for JSHint.
• Komodo 7 now ships with built-in support for JSHint.
• JSHint integration for the Eclipse IDE
• JSHint integration for the NetBeans IDE
• JetBrains IDE family supports realtime code inspection with both JSHint and JSLint out of the box.
• JSLint plugin for Notepad++ now supports JSHint.
• JSHint plugin for Gedit.

Other cool stuff

• JSHintr is a web tool that allows you to set your own code standards, easily review a file against these standards, and share the output with other developers.
• FixMyJS is a tool that automatically fixes mistakes—such as missing semicolon, multiple definitions, etc.—reported by JSHint.
• A ruby gem for JSHint.
• Another ruby gem but without Java dependency.
• pre-commit checks your code for errors before you commit it.
• Dedicated Ant task to easily automate JSHint in Ant Maven.
• QHint — JSHint in QUnit. Check for errors in your code from within your unit tests. Lint errors result in failed tests.
• Grunt, a task-based command line build tool for JavaScript projects, supports JSHint out of the box.
• overcommit is an extensible Git hook manager with built-in JSHint linting, distributed as a Ruby gem. Read more about it.
• jshint-mojo, a plugin for Maven.
• JSXHint, a wrapper around JSHint to allow linting of files containing JSX syntax.

С кодом будь строг. Настройка jshint

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

['1'] == 1; // true ['1'] === 1; // false month === '7'; // очевидно, что month содержит строку 

forin : true

Ошибочным считает перебор свойств объекта без проверки hasOwnProperty (этого метода нет в ie7). Особенно полезно создателям 3-d party библиотек или встраиваемых скриптов. Подобная проверка ограничит код от удовлетворенных порывов к monkey patching.

immed : true

Обязывает оборачивать моментально вызываемые функции в скобки. Таким образом читающему становится ясно, что фишка в вызове функции, а не в ее определении (при этом ясно как читая с начала, так и с конца определения).

latedef : true

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

newcap : true

Стимулирует использование заглавных первых букв в именах конструкторов.

noarg : true

Негодует при использовании arguments.calle, arguments.calle.caller (см. strict mode).

noempty : true

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

if (document) <> // вероятнее всего описка 

plusplus : true

Поощряет использование += и -= вместо ++ и —. Запись чуть длиннее, зато понятно что происходит и в каком порядке.

undef : true

Присвоение неопределенной переменной выдаст ошибку. В нестрогом режиме в таком случае создает глобальная переменная (см. strict mode).

asi : false

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

var obj = < prop : 'val' >(function () < // полезная функция >()); // ошибка 

funcscope : false

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

if (true) < function a () <>> else < function b () <>> b(); 

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

Как установить и настроить 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.

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

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

Введение — Редактор VSCode — Плагин Jshint и файл .jshintrc

Когда-то я изучил основы языка JavaScript и не знал, что делать дальше. Как его применить на практике? Об этом я писал здесь.

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

Недавно я решил вернуться к языку JavaScript и приступил к обзору англоязычного курса. Небольшая часть его отражена в разделах НЕ Рунет — Часть 1 и НЕ Рунет — Часть 2. Но со временем понял, что прохождение курса на иностранном языке займет слишком много времени.

Кроме этого рекомендации статьи (которым я следовал), как изучать JavaScript: делюсь своим опытом, не во всем справедливы. В частности, в ней говорится о том, что на просторах РУнета нет курсов и преподавателей достойных внимания. Думаю, что на сегодняшний день это не верная информация. Хотя возможно когда-то так и было.

Есть хороший сайт learn.javascript.ru и на мой взгляд замечательный курс Полный курс по JavaScript + React — с нуля до результата на сайте udemy.com . Автор Иван Петриченко.

Мне нравится то как Иван ведет курс и как преподносит материал. А сравнить мне есть с чем. Поэтому сейчас я решил остановится на нем. К англоязычному курсу я буду возвращаться, но позже. Думаю, что он еще пригодится и будет полезен.

Что понадобится для работы?

Первое, что нам потребуется – это редактор Visual Studio Code и программная платформа Node.js. Установить это программное обеспечение легко и трудностей здесь быть не должно.

Что касается настройки редактора Visual Studio Code, то здесь есть ссылка на статью о подробной настройке и установке плагинов для начинающих.

Установка плагинов для VCcode

Список необходимых плагинов :

— All Autocomplete
— Auto Close Tag
— Auto Complete Tag
— Auto Rename Tag
— Beautify
— Code Runner
— Import Cost
— JavaScript (ES6) code snippets
— JShint
— Live Server
— Multiple clipboards for VSCode
— Reactjs code snippets
— Sass
— Theme — Oceanic Next
— vscode-icons
— ESLint

Плагин JShint — Терминал Windows PowerShell

Для чего нужен плагин jshint?

Он помогает избежать ошибок в коде при работе в редакторе Visual Studio Code. Ошибки совершают все. Не только начинающие разработчики.

Итак, после установки плагина JShint его необходимо настроить, чтобы он правильно работал.

1. Должна быть установлена среда Node.js.

2. Устанавливаем npm (англ. Node Package Manager) — менеджер пакетов, входящий в состав Node.js.

• открываем терминал. Для пользователей ОС Window необходимо вызвать командную строку комбинацией клавиш WIN + R и в ней набрать команду PowerShell . Так мы попадаем в окно терминалаWindows PowerShell. Терминал есть и в редакторе Visual Studio Code. Для работы подойдет любой вариант.
• В терминале вводим команду npm install -g jshint . Возможно, для выполнения этой команды потребуется ввести пароль, который установлен в системе. Если пароль не показывается, то его придется ввести вслепую и нажать Enter .

После выполнения этих действий плагин JShint должен нормально работать. Теперь если мы забудем поставить точку с запятой или совершим какую-либо другую ошибку в коде, то проблемные места будут выделяться волнистой линией, а во вкладке PROBLEMS редактора VScode будут отображаться такие сообщения об ошибках :

— «Missing semicolon. (W033) jshint(W033)[12,17]» — jshint сообщает, что в строке 12, позиция 17 пропущена точка с запятой;

— «‘result’ is not defined. (W117) jshint(W117)[15,13]» — переменная result не определена.

Подробнее о плагине JShint — Файл .jshintrc

После того, как плагин JShint установлен и работает желательно его до настроить, так как по умолчанию он работает по старым стандартам .

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

«camelcase» : true,
«indent»: 2,
«undef»: true,
«quotmark»: false,
«maxlen»: 120,
«trailing»: true,
«curly»: true,
«strict»: false,
«browser»: true,
«devel»: true,
«jquery»: true,
«esversion»: 9,
«node»: true
>

Это оптимальные настройки файла .jshintrc. Подробнее о структуре этого файла будет сказано в дальнейшем. А пока вот ссылка на документацию файла .jshintrc .

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

Например, параметр «maxlen»: 120 говорит о том, что максимальная длина строки составляет 120 символов.

Теперь о том, где располагать файл настроек .jshintrc?

Файл .jshintrc должен располагаться в общей рабочей папке, в которой содержатся все проекты — это глобальная настройка и для начала рекомендуется сделать именно так .

Либо файл .jshintrc следует поместить в корневую папку конкретного проекта. Это локальная настройка . В этом случае к данному проекту будут применяться настройки именно этого файла .jshintrc .

Неверная настройка или отсутствие фала .jshintrc.

При неправильной настройке файла .jshintrc , его отсутствии или неверном расположении, во вкладке PROBLEMS редактора Visual Studio Code будут отображаться подобные сообщения:

— ‘let’ is available in ES6 (use ‘esversion: 6’) or Mozilla JS extensions (use moz). (W104) — ‘let’ доступна в версии ES6;

— ‘const’ is available in ES6 (use ‘esversion: 6’) or Mozilla JS extensions (use moz). (W104) — ‘const’ доступна в версии ES6.

Если быть внимательным, то настройка плагина JShint проходит успешно.

Как подключить JavaScript к странице

Теперь немного о том, как подключить JavaScript к странице?

1. Внешний js-файл — основной способ

2. Внутренние скрипты

Используются для небольших скриптов, но не в реальных проектах. Об этом способе работы со скриптами JavaScript читайте здесь.

3. Подключение скрипта/вызов функции через атрибут onclick.

 
Hellow world
 

Это не очень хороший способ. Смотрите здесь. Используется редко/в исключительных случаях.

Далее о переменных и способах их объявления.

Читайте также.

Что нужно для изучения javascript?

Англоязычный курс по JavaScript — Введение