# Eslint

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

Для того, чтобы упростить ее придумывают разные линтеры, которые проверяют ваш javascript код и показывают вам частые ошибки и неправильный кодстайл.

Самый популярный инструмент на сегодняшний день для этого - это eslint. Вы просто вызываете eslint с командной строки либо встраиваете его в watch таску, например в вебпак. И каждый раз, когда вы изменяете файл, eslint перезапускается и выводит вам ошибки.

Давайте его установим

npm install eslint --save-dev

Мы устанавливаем пакет только для девелопмента, так как в продакшене он не нужен.

Теперь давайте добавим команду lint и в ней вызовем eslint на файл main.js

"lint": "eslint main.js"

Теперь давайте выполним в консоли

npm run lint

Как мы видим, у нас вывалилась ошибка, что у нас нет конфигурационного файла eslint и чтобы это пофиксить нужно написать

eslint --init

Но так как мы установили eslint локально, как обычно делают в нормальных проектах, то эта команда нам скажет что eslint не найден. Давайте выполним команду используя локальный eslint

./node_modules/.bin/eslint --init

У нас открылся список вопросов.

1. Выбираем Inspect javascript files
2. Указываем main.js
3. Формат конфиг файла javascript
4. Es6 фичи нам не нужны
5. Будем ранить код только в браузере
6. Common JS не используем
7. И JSX тоже

Мы видим сообщение, что у нас создался .eslintrc.js и в него добавилось 244 правила. Если мы откроем этот файл, то увидим, что у нас там создалось огромное количество правил.

Если мы запустим npm run lint еще раз, то ошибок у нас не найдет, так как у нас пустой файл.

Давайте попробуем написать обычный console.log

console.log('main.js')

Как вы видите, мне в Atome уже подсветились ошибки eslint, так как у меня установлен для него плагин. Вы можете установить расширение eslint практически для любого редактора.

Давайте вызовем eslint еще раз в консоли. И мы получили кучу ошибок

1:1   error  Unexpected console statement        no-console
1:13  error  Strings must use doublequote        quotes
1:23  error  Missing semicolon                   semi
2:1   error  Newline not allowed at end of file  eol-last

Оно нам говорит, что у нас в коде не должно быть console.log вообще. Строки должны быть в двойных кавычках. Пропущена точка с запятой и в файле не должно быть висячих строк.

Обычно, когда люди видят такое количество ошибок, то сразу реакция "О черт, зачем мне это надо. Это ж все ошибки нужно постоянно фиксить и вообще console.log не ошибка".

Для этого есть несколько вариантов:

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

Если мы посмотрим в eslintrc, то там есть секция extends, где у нас указано eslint:recommended. То есть у нас могло бы вообще не быть правил в файле, а мы просто указали бы extends и получили бы чей то конфиг.

Давйте попробуем перекрыть правила, которые нам не нравятся. Вот, например, у нас была ошибка "Strings must use doublequote". То есть строки должны быть в двойных кавычках. А я всегда пишу в одинарных. Как вы видите, справа от ошибки написан ее алиас и мы можем ее найти в нашем конфиге

Как вы видите, у нас указан

"quotes": "error"

Как же нам узнать что писать, чтобы у нас eslint валидировал одинарные кавычки, а не двойные? Для этого заходим на сайт eslint.org в раздел rules и прямо в url можем найти по алиасу правило

http://eslint.org/docs/rules/quotes

И там на каждое правило есть отличная документация с примерами. И в данном случае мы видим, что мы можем написать

"quotes": ["error", "single"]

Если мы откроем консоль, то увидим, что ошибка про кавычки у нас исчезла, но если мы попробуем поставить сейчас двойные кавычки, то она опять появится.

Таким образом вы можете менять каждое правило на свой вкус

В eslint по умолчанию нет watch мода и обычно он вставляется в момент транспайла js. Но если вы хотите просто запустить eslint в watch моде, то можете установить плагин eslint-watch

npm i eslint-watch --save-dev

Теперь можем добавить еще один скрипт в package.json

"lint:watch": "esw main.js -w"

это запустит eslint в watch моде и теперь все ошибки в консоли будут показываться на лету

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.