К основному содержанию
хук

format-javascript-files — хук для Claude Code: как настроить

Хук запускает Prettier после каждого редактирования файлов .js, .ts, .jsx и .tsx в Claude Code. Код остаётся аккуратно оформленным без ручных правок стиля.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓
npx claude-code-templates@latest --hook post-tool/format-javascript-files
Открыть на GitHub

Что делает format-javascript-files

Хук перехватывает событие PostToolUse при вызове инструмента Edit. Скрипт проверяет путь файла в переменной $CLAUDE_TOOL_FILE_PATH по регулярному выражению. Под действие попадают файлы с расширениями .js, .ts, .jsx и .tsx.

Форматирование запускается через npx prettier --write. Глобальная установка пакета не требуется, так как вызов идёт через npx. Ошибки направляются в 2>/dev/null, а завершение перехвачено оператором || true.

Из-за подавления ошибок хук тихо пропустит форматирование, если Prettier отсутствует или упал со сбоем.

Какие задачи решает

  • форматировать код через Prettier сразу после правок ассистента
  • выравнивать синтаксис в файлах .js, .ts, .jsx и .tsx
  • сохранять единообразный стиль проекта без ручного запуска линтера

Примеры запросов агенту

  • Отредактируй компонент Button.tsx и добавь свойство disabled
  • Исправь экспорт функций в файле utils/helpers.js

Как установить format-javascript-files

1Через claude-code-templates

npx claude-code-templates@latest --hook post-tool/format-javascript-files

2Вручную: положить файлы

.claude/settings.json

Блок hooks: событие (PreToolUse, PostToolUse, Stop…) → команда. Личные — ~/.claude/settings.json

По шагам, с командами для каждой платформы: Хуки Claude Code: что это, где настраивать и как запретить опасную команду

Вопросы о format-javascript-files

Как установить format-javascript-files в Claude Code?

Выполните команду npx claude-code-templates@latest --hook post-tool/format-javascript-files. Конфигурация хука запишется в .claude/settings.json.

Что делает format-javascript-files?

Хук отслеживает инструмент Edit и форматирует изменённые файлы JavaScript и TypeScript с помощью Prettier.

Что произойдёт, если Prettier не установлен в проекте?

Команда использует конструкцию 2>/dev/null || true. Редактирование завершится без сообщений об ошибках, даже если Prettier недоступен.

Исходный текст

format-javascript-files.json · MIT
{
  "description": "Automatically format JavaScript/TypeScript files after any Edit operation using prettier. This hook runs 'npx prettier --write' on any .js, .ts, .jsx, or .tsx file that Claude modifies, ensuring consistent code formatting. Uses npx so prettier doesn't need to be globally installed. Includes error suppression so it won't fail if prettier is not available.",
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "if [[ \"$CLAUDE_TOOL_FILE_PATH\" =~ \\.(js|ts|jsx|tsx)$ ]]; then npx prettier --write \"$CLAUDE_TOOL_FILE_PATH\" 2>/dev/null || true; fi"
          }
        ]
      }
    ]
  }
}

© davila7 · MIT · davila7/claude-code-templates

Похожие хуки

Всё по теме «Фронтенд и UI» →

Из того же набора804

Весь набор →
query-clarifier Разбирает исследовательский запрос, находит расплывчатые места и решает, нужны ли уточнения до начала работы. 782установок mcp-protocol-specialist Субагент для работы со спецификацией Model Context Protocol: транспорт, JSON-RPC 2.0, версионирование и совместимость реализаций. 781установок conventional-commits Хук проверяет сообщения Git-коммитов по формату Conventional Commits. Он пригодится, когда история проекта должна подходить для changelog и semantic versioning. 773установок supabase-realtime-monitor Команда разбирает realtime-подключения Supabase: ищет код подписок, анализирует производительность и помогает отлаживать ошибки. 764установок tag-agent Приводит теги базы знаний к единой иерархии и устраняет дубли. Пригодится для поддержания порядка в заметках Obsidian. 746установок visual-analysis-ocr Извлекает текст из PNG, распознаёт структуру документа и переводит её в markdown. Нужен для работы с изображениями и сканами. 742установок setup-docker-containers Настраивает Docker для разработки и production, включая multi-stage сборки, Compose и рабочие процессы контейнеров. 740установок comprehensive-researcher Субагент для Claude, который разбирает тему на вопросы, ищет источники и собирает отчёт со ссылками. Пригодится, когда нужен обзор, а не ответ по памяти. 735установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой