Как автоматически улучшать стиль CSS перед коммитом?

У меня есть проект на React. Если быть точным, я создал его по шаблону gatsby-starter-default.

Перед коммитом изменённые файлы прогоняются через Prettier. Я сделал это с помощью lint-staged, husky и pretty-quick:
"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}


Теперь я хочу, чтобы изменённые SASS-файлы перед коммитом становились по гайдлайнам (например, с правильным порядком цсс-свойств) — прогонялись через CSScombJS.

Так делают в Яндексе. В своей статье они приложили следующий Гит-хук. Но как его добавить, не сломав Husky с Prettier? Может есть отдельный плагин для Husky?
#!/usr/bin/env bash

PATCH_FILE="working-tree.patch" 
NPM_BIN="./node_modules/.bin"

function cleanup {
    exit_code=$?
    if [ -f "$PATCH_FILE" ]; then
        patch -p0 < "$PATCH_FILE"
        rm "$PATCH_FILE"
    fi
    exit $exit_code
}

#Прибираемся при выходе из скрипта
trap cleanup EXIT SIGINT SIGHUP

# Создаем  патч
git diff > "$PATCH_FILE" --no-prefix
# Сбрасываем не застэйдженный изменения
git checkout -- .

# получаем список файлов в которых были изменения, которые мы хотим закоммитить
git_cached_files=$(git diff --cached --name-only --diff-filter=ACMR | xargs echo)
if [ "$git_cached_files" ]; then
    #Собственно натравливаем CSScomb.js
    $NPM_BIN/csscomb -v -l $git_cached_files || exit 1
fi


Или можно сделать так, чтобы Prettier заодно расставлял цсс-свойства в нужном порядке? А как это настроить?

Подскажите, пожалуйста.

UPD
Спасибо за ответы. В результате, я создал шаблон для Gatsby c Typescript, SCSS and Prettier & Stylelint Pre-commit Hook: github.com/ilyasidorchik/gatsby-starter-default-x
  • Вопрос задан
  • 1888 просмотров
Решения вопроса 2
Rushelex
@Rushelex
Frontend developer
У меня в проектах это так сделано:
"husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "!(_*).scss": [
            "csscomb --tty-mode",
            "stylelint --fix --color --config ./.stylelintrc",
            "git add"
        ],
        "*.js": [
            "eslint --fix --color",
            "prettier --write",
            "git add"
        ]
    },

И все отлично работает. Файлы с префиксом _, например _filename.scss, csscomb пропускает.

P.S. можно по-порядку указать, какие инструменты использовать перед коммитом, т.к. это просто cli-интерфейс, как будто командная строка.
Ответ написан
SeaInside
@SeaInside
15 лет пилю все эти штуки
Prettier не умеет расставлять порядок свойств. Это вообще очень простой инструмент, который заботится только о базовом форматировании.

То, что вам нужно, реализуется средствами stylelint и его плагина stylelint-order.
Вот очень толковая статья, после прочтения которой вопросов не должно остаться.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы