eslint-config-webpractik

Подключение ESLint к проекту.

Установка пакета

В корневой папке или в папке /local/static/ (в зависимости от проекта) устанавливаем пакет с нашей конфигурацией eslint.

npm i eslint-config-webpractik --save-dev

Далее нужно создать в этой же директории файл с именем .eslintrc и добавить в гит. Это можно сделать командой:

echo '{"extends": ["webpractik"]}' >> .eslintrc && git add .eslintrc

Если нужно дописать свои правила, следует добавить секцию rules ниже. Например:

"rules": {
    "no-mixed-operators": "error"
}

Если вы используете свои глобальные переменные, вы можете добавить в .eslintrc

"globals": {
        "globalVar": true
    }

Полный список правил и документацию по настройке можно найти на сайте https://eslint.org/

Интеграция с PhpStorm

Eslint по-умолчанию уже установлен в PhpStorm, остается лишь его включить и настроить.

Заходим в:

Settings -> Language & Frameworks -> JavaSctipt -> Code Quality Tools -> Eslint

• Ставим настройку Manual ESLint configuration
  
• Выбираем Node Interpreter и ESLint package (если до этого все сделали правильно, то Storm подскажет варианты)
• В Configuration file указываем путь к файлу .eslint

В eslint есть возможность работать с консольной утилитой. Установить ее можно командой:

npm i -g eslint

В помощью этой утилиты возможно исправление code-style во многих файлах разом. Для этого используется команда:

eslint --fix **/*.js

Не используйте эту команду за пределами папки local, иначе он пойдет по всем js-файлам битрикса.

Пакеты правил

- **eslint:recommended** - рекомендуемые правила. Здесь сборка просто хороших практик написания кода на JS.
- **google** - настройки линтера, которыми пользуются в компании Google.
- **plugin:react/recommended** - правила линтинга для react-приложений.

Дополнительные правила, которые подстраивают под наш код-стиль, плюс те, которые показались полезными для внедрения:

indent: 4 - Отступ выставлен в 4 пробела.
Подробнее: https://eslint.org/docs/rules/indent#enforce-consistent-indentation-indent

no-var: off - выключен запрет на var (сейчас у нас много легаси на es5).
Подробнее: https://eslint.org/docs/rules/no-var#require-let-or-const-instead-of-var-no-var

no-duplicate-imports - держим код в чистоте, не дублируем импорты.
Подробнее: https://eslint.org/docs/rules/no-duplicate-imports#disallow-duplicate-imports-no-duplicate-imports

max-len - допускается 120 символов в строке, размер таба - 4 пробела.
Подробнее: https://eslint.org/docs/rules/max-len#enforce-a-maximum-line-length-max-len

lines-between-class-membersЫ - улучшаем читаемость, ставим отступ между членами класса.
Подробнее: https://eslint.org/docs/rules/lines-between-class-members#require-or-disallow-an-empty-line-between-class-members-lines-between-class-members

yoda - пишем условия так, чтобы не было затруднений в чтении (без 24 == a).
Подробнее: https://eslint.org/docs/rules/yoda#require-or-disallow-yoda-conditions-yoda

comma-dangle - не оставляем "висящих" запятых в аргументах функций и при объявлении объектов.
Подробнее: https://eslint.org/docs/rules/comma-dangle#require-or-disallow-trailing-commas-comma-dangle

block-scoped-var - проверка на то не выходит ли var за пределы блока.
Подробнее: https://eslint.org/docs/rules/block-scoped-var#treat-var-as-block-scoped-block-scoped-var

no-empty-pattern - не деструктурируем по типу var {} = foo;
Подробнее: https://eslint.org/docs/rules/no-empty-pattern

no-inner-declarations - декларируем функции и переменные на вернем уровне.
Подробнее: https://eslint.org/docs/rules/no-inner-declarations#disallow-variable-or-function-declarations-in-nested-blocks--no-inner-declarations

use-isnan - используем isNaN, когда проверяем является ли что-либо числом.
Подробнее: https://eslint.org/docs/rules/use-isnan#require-calls-to-isnan-when-checking-for-nan-use-isnan

no-dupe-class-members - следим за дублированием в классах.
Подробнее: https://eslint.org/docs/rules/no-dupe-class-members#disallow-duplicate-name-in-class-members-no-dupe-class-members

no-unused-vars - держим код в чистоте, удаляем неиспользуемые переменные.
Подробнее: https://eslint.org/docs/rules/no-unused-vars#disallow-unused-variables-no-unused-vars

no-magic-numbers - избавляемся от литералов, выносим в константу. Исключение: индексы массива и числа -1, 0, 1, 2.
Подробнее: https://eslint.org/docs/rules/no-magic-numbers#disallow-magic-numbers-no-magic-numbers

no-use-before-define - читаемость лучше, если объявления переменной происходит до ее использования.
Подробнее: https://eslint.org/docs/rules/no-use-before-define#disallow-early-use-no-use-before-define

padded-blocks - выключена проверка на отступы в блоках.
Подробнее: https://eslint.org/docs/rules/padded-blocks#require-or-disallow-padding-within-blocks-padded-blocks

arrow-parens - Разрешаем объявлять стрелочные функции с одним аргументом без скобок.
Подробнее: https://eslint.org/docs/rules/arrow-parens#require-parens-in-arrow-function-arguments-arrow-parens

no-trailing-spaces - Выключена ошибка "лишних пробелов".
Подробнее: https://eslint.org/docs/rules/no-trailing-spaces#disallow-trailing-whitespace-at-the-end-of-lines-no-trailing-spaces


В глобальных переменных обозначены:

• Переменные браузера
• Jquery
• BX (на проектах без битрикса можно отключать)