Немного "pre-commit"-а для правильного фронтендера.

Стандартизируем синтаксис Javascript, ReactJS и SASS от проекта к проекту, проверяем на ошибки перед git commit

Что такое "pre-commit"?

Не залезая далеко в чулан в поисках толкового словаря В.Даля, pre-commit - это маленький скрипт, который Git запускает перед исполнением команды "commit". В миру, такие плюшки называют "hooks".

Устанавливать "hooks" не надо, ибо они уже идут вместе с git-репозиторием.

git init
ll .git/hooks/

Что это нам даёт?

Мы будем использовать pre-commit для запуска анализатора для js-файлов и scss-файлов. В том случае, если анализатор находит ошибку в файлах, то git нам об этом вежливо сообщает, а "commit" не производится. 

git add src/myclass.js
git commit --message "Test pre-commit"

В качестве анализатора для js(jsx)-файлов, используется eslint, а для scss-файлов - стандартный scss-lint.

Устанавливаем "pre-commit" для фронтендера.

Шаг 1.

Для начала, добавим в наш NodeJS проект пакеты eslint и scss-lint:

npm install eslint scss-lint --save-dev

Шаг 2.

Теперь, установим пакетом frontend-pre-commit-rule, что ребята из @schibstedspain создали, включив в него сконфигурированные .eslintrc и .scss-lint:

npm install @schibstedspain/frontend-pre-commit-rules --save-dev

Менее ленивым, предпочитающие конфигурировать "под себя", можно воспользоваться eslint --init и поиграться с пакетом precommit-hook

Шаг 3.

Если все прошло успешно, то редактируем файл package.json, добавляя в него наш pre-commit с командами, которые мы хотим выполнять перед "commit":

 "pre-commit": [
    "lint:eslint",
    "lint:eslint"
  ],

По желанию, можно добавить выполнение тестов.

Шаг 4.

Отлично. Последний шрих - добавить lint:eslint и lint:eslint в раздел scripts:

"scripts": {
    ...
    "lint:eslint": "eslint --ext=.jsx --ext=.js ./src/",
    "lint:sass": "scss-lint ./src/"
    ...
}

Шаг 5.

Сделано!