ESLint: Проверяем Javascript в коммандной строке и PHPStorm

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

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

Устанавливать и тестировать будем на Mac Os X (Yosemite). 

Нам понадобятся:

  • терминал
  • PHPStorm
  • криво отформатированный код
  • node.js

Итак, начнем

Ставим ESLint

npm i -g eslint

Создаем проект

Я создал тестовый проект и положил в корень файл .eslintrc, в котором описаны правила валидации

{
  "rules": {
    "brace-style": 2,
    "comma-dangle": [2, "never"],
    "comma-spacing": [2, {"before": false, "after": true}],
    "curly": 2,
    "eol-last": [1],
    "indent": [2, 4, {"SwitchCase": 1}],
    "linebreak-style": [2, "unix"],
    "no-cond-assign": 2,
    "no-dupe-args": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-else-return": 2,
    "no-empty": 2,
    "no-extra-semi": 2,
    "no-fallthrough": 1,
    "no-func-assign": 2,
    "no-irregular-whitespace": 2,
    "no-multi-spaces": 2,
    "no-negated-in-lhs": 2,
    "no-sparse-arrays": 2,
    "no-trailing-spaces": [2, { "skipBlankLines": true }],
    "no-unexpected-multiline": 2,
    "no-unreachable": 2,
    "semi": 2,
    "space-after-keywords": [2, "always"],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "valid-jsdoc": 2
  }
}

Делаем чуток стилистических ошибок в js файле

Запускаем консольную проверку

Переходим в папку приложения и выполняем:

eslint index.js

В итоге получаем все стилистические ошибки в консоль

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

3

Это, конечно, круто, но не очень удобно. Лучше это делать на этапе написания кода. Для этого можно интегрировать инструмент проверки кодстайла в вашу любимую IDE PHPStorm :)

Настраиваем PHPStorm

Открываем настройки и включаем ESLint

PHPStorm должен сам подхватить и прописать пути, где лежит node и eslint. Если все прошло гладко, то у редактора должна появиться алергия на плохой кодстайл, которая лечится на лету.

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

И наблюдать результат в самой IDE

На этом, пожалуй, все.

Интересное

Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....

Комментарии

    Чтобы оставлять комментарии, авторизируйтесь

    Войти через OpenID

    рейтинг0+-
    Популярные
    Точки входа
    Наверх