prettier

Простым языком

Форматирование — это как расставить пробелы, отступы и переносы в коде. AI иногда пишет код с непоследовательным стилем: где-то одинарные кавычки, где-то двойные, где-то лишние пробелы. Prettier наводит порядок автоматически.

Раньше ты тратил время на ручное приведение кода к единому стилю. Теперь каждый раз как AI пишет код — Prettier сразу причёсывает его. Ты даже не замечаешь этот процесс.

Что делает

Хук prettier автоматически форматирует JavaScript и TypeScript файлы через Prettier после каждого Write или Edit. Код от AI приходит с непоследовательным форматированием — хук это исправляет без запроса.

Prettier — опиниэйтед форматтер: он не обсуждает стиль, он его навязывает. Это преимущество в командной работе и при работе с AI — споров о форматировании нет вообще.

Когда срабатывает

Триггер: PostToolUse — после Write или Edit. Условие: расширение .js, .ts, .jsx, .tsx, .css, .json. Действие: npx prettier --write тихо форматирует файл.

Установка

1. Установи Prettier в проект: npm install --save-dev prettier
2. Создай .prettierrc в корне проекта с конфигом (см. блок ниже)
3. Добавь хук PostToolUse в .claude/settings.json
4. Создай ~/.claude/hooks/prettier.sh с правами chmod +x

Конфиг settings.json

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "~/.claude/hooks/prettier.sh"
          }
        ]
      }
    ]
  }
}

Скрипт хука

#!/bin/bash
# prettier.sh — автоформатирование JS/TS файлов
# PostToolUse: Write | Edit

FILE="${CLAUDE_TOOL_INPUT_PATH:-}"
[ -z "$FILE" ] && exit 0

case "$FILE" in
  *.js|*.jsx|*.ts|*.tsx|*.css|*.scss|*.json|*.mdx) ;;
  *) exit 0 ;;
esac

case "$FILE" in
  */node_modules/*|*/dist/*|*/.next/*) exit 0 ;;
esac

if ! npx prettier --version &>/dev/null 2>&1; then
  exit 0
fi

npx prettier --write "$FILE" 2>/dev/null
exit 0

Рекомендуемый .prettierrc для TypeScript-проекта:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Примеры работы

Что пропускает

• Файлы в node_modules, dist, .next — автоматически
• Файлы в .prettierignore — уважает конфиг
• Файлы без известного расширения: .sh, .py, .go
• Проекты без Prettier — хук тихо пропускает

Что форматирует

• .ts, .tsx — TypeScript и React-компоненты
• .js, .jsx — JavaScript
• .css, .scss — стили
• .json — JSON-файлы (кроме package-lock.json)
• .mdx — MDX-документы

Настройка под себя

• Добавь расширения в case внутри скрипта под нужды проекта
• Создай .prettierignore для исключения генерируемых файлов
• Используй prettier --check вместо --write для режима только-проверки
• Комбинируй с ESLint через eslint-config-prettier для совместимости

Форматирование кода — не вопрос вкуса, когда есть автоматика. Prettier форматирует, AI пишет логику, человек думает об архитектуре.