{"id":29806332,"url":"https://github.com/bartolli/claude-code-typescript-hooks","last_synced_at":"2025-07-28T14:08:07.528Z","repository":{"id":305606519,"uuid":"1023310957","full_name":"bartolli/claude-code-typescript-hooks","owner":"bartolli","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-21T02:59:50.000Z","size":17,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-21T04:27:13.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bartolli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-21T01:02:14.000Z","updated_at":"2025-07-21T04:21:27.000Z","dependencies_parsed_at":"2025-07-21T04:27:18.365Z","dependency_job_id":"13504577-0493-422f-ad33-af9ee68cb482","html_url":"https://github.com/bartolli/claude-code-typescript-hooks","commit_stats":null,"previous_names":["bartolli/claude-code-typescript-hooks"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bartolli/claude-code-typescript-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartolli%2Fclaude-code-typescript-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartolli%2Fclaude-code-typescript-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartolli%2Fclaude-code-typescript-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartolli%2Fclaude-code-typescript-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartolli","download_url":"https://codeload.github.com/bartolli/claude-code-typescript-hooks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartolli%2Fclaude-code-typescript-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267527835,"owners_count":24102019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-28T14:05:57.493Z","updated_at":"2025-07-28T14:08:07.505Z","avatar_url":"https://github.com/bartolli.png","language":"JavaScript","readme":"# Claude Code Quality Hooks\n\n![Claude Code](https://img.shields.io/badge/Claude_Code-Compatible-4A90E2?logo=anthropic\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-Powered-3178C6?logo=typescript\u0026logoColor=white)\n![Node.js](https://img.shields.io/badge/Node.js-Runtime-339933?logo=node.js\u0026logoColor=white)\n![Hooks](https://img.shields.io/badge/Hooks-PostToolUse-FF6B6B?logo=git\u0026logoColor=white)\n\nFast, intelligent quality checks for different project types.\n\n\u003e **📚 Official Documentation**: [Claude Code Hooks Guide](https://docs.anthropic.com/en/docs/claude-code/hooks)\n\n## Quick Start\n\n### 1. Choose Your Project Type\n\n```bash\n# React/Next.js/Vite apps\n.claude/hooks/react-app/\n\n# VS Code extensions\n.claude/hooks/vscode-extension/\n\n# More coming soon...\n```\n\n### 2. Configure Claude Code\n\nAdd to `.claude/settings.local.json`:\n\n```json\n{\n  \"hooks\": {\n    \"PostToolUse\": [\n      {\n        \"matcher\": \"Write|Edit|MultiEdit\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"node .claude/hooks/react-app/quality-check.js\"\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n### 3. Done!\n\nThe hook runs automatically when you edit files.\n\n## Why Claude Code Agents Love This\n\n- 🚀 **Catches errors before runtime** - No more \"undefined is not a function\" surprises\n- 🎯 **Uses the RIGHT config** - Browser code checked with browser rules (no more false \"window not defined\")\n- ⚡ **Auto-fixes trivial issues** - Agent focuses on logic, not semicolons\n- 🧠 **Project-aware intelligence** - React hooks allow console.log, VS Code extensions don't\n- 💡 **Instant feedback loop** - Agent knows immediately what needs fixing\n- 🛡️ **Prevents regressions** - Can't accidentally break working code\n\n## Project Types\n\n### ⚛️ React App\n\n- Console allowed in components\n- 'as any' warnings (not errors)\n- JSX support\n\n### 🔌 VS Code Extension\n\n- Console blocked in extension code\n- Console allowed in webview\n- Strict TypeScript\n\n## Configuration\n\nEach hook has `hook-config.json`:\n\n```json\n{\n  \"rules\": {\n    \"console\": {\n      \"severity\": \"info\", // or \"warning\", \"error\"\n      \"allowIn\": {\n        \"paths\": [\"src/components/\"]\n      }\n    }\n  }\n}\n```\n\n## Testing\n\n```bash\n# Test manually\necho '{\"tool_name\":\"Edit\",\"tool_input\":{\"file_path\":\"src/App.tsx\"}}' | node .claude/hooks/react-app/quality-check.js\n```\n\n## Creating New Hooks\n\n1. Copy existing hook folder\n2. Edit `hook-config.json`\n3. Customize rules as needed\n4. Share with community!\n\n## Exit Codes\n\n- `0` - All good ✅\n- `2` - Fix required ❌\n\n## How It Works\n\n### Hook Flow\n\n```mermaid\ngraph TD\n    A[File Edit Detected] --\u003e B[Hook Triggered]\n    B --\u003e C{Parse Tool Input}\n    C --\u003e D[Extract File Path]\n    D --\u003e E[Load Configuration]\n    E --\u003e F[Smart Cache Check]\n    F --\u003e G{Config Changed?}\n    G --\u003e|Yes| H[Rebuild TS Mappings]\n    G --\u003e|No| I[Use Cached Mappings]\n    H --\u003e J[Run Quality Checks]\n    I --\u003e J\n    J --\u003e K[TypeScript Check]\n    J --\u003e L[ESLint Check]\n    J --\u003e M[Prettier Check]\n    J --\u003e N[Common Issues Check]\n    K --\u003e O{Has Errors?}\n    L --\u003e O\n    M --\u003e O\n    N --\u003e O\n    O --\u003e|Yes| P[Exit Code 2 - Block]\n    O --\u003e|No| Q[Exit Code 0 - Pass]\n```\n\n### Smart TypeScript Config Cache\n\nThe hook uses an intelligent caching system to handle complex TypeScript configurations:\n\n**1. Config Discovery**\n\n- Finds all `tsconfig*.json` files in your project\n- Sorts by specificity (specific configs like `tsconfig.webview.json` take precedence)\n- Builds a mapping of file patterns to configs\n\n**2. SHA256 Change Detection**\n\n```javascript\n// Each config file gets a SHA256 hash\nconst hash = crypto.createHash('sha256').update(configFileContent).digest('hex');\n```\n\nThis creates a unique fingerprint for each config:\n\n- `tsconfig.json`: `c70342f6265640de2ba06a522870b4dc...`\n- `tsconfig.webview.json`: `55e05e47dc57fbdab2a2d30704f9ab1f...`\n\n**3. Cache Structure**\n\n```json\n{\n  \"hashes\": {\n    \"tsconfig.json\": \"c70342f6265640de2ba06a522870b4dc1a4737818abe862c41108014cf442735\",\n    \"tsconfig.webview.json\": \"55e05e47dc57fbdab2a2d30704f9ab1f6d9f312ee7c14e83b7a3613e73b4a230\"\n  },\n  \"mappings\": {\n    \"src/webview/**/*\": {\n      \"configPath\": \"tsconfig.webview.json\",\n      \"excludes\": [\"node_modules\", \"test\"]\n    },\n    \"src/protocol/**/*\": {\n      \"configPath\": \"tsconfig.webview.json\",\n      \"excludes\": [\"node_modules\", \"test\"]\n    },\n    \"src/**/*\": {\n      \"configPath\": \"tsconfig.test.json\",\n      \"excludes\": [\"node_modules\", \"gui\"]\n    }\n  }\n}\n```\n\n**4. Cache Lifecycle**\n\n```mermaid\ngraph LR\n    A[Hook Starts] --\u003e B{Cache Exists?}\n    B --\u003e|No| C[Build Cache]\n    B --\u003e|Yes| D[Load Cache]\n    D --\u003e E{Verify SHA256 Hashes}\n    E --\u003e|Changed| F[Rebuild Affected Mappings]\n    E --\u003e|Same| G[Use Cached Mappings]\n    F --\u003e H[Update Cache File]\n    C --\u003e H\n    G --\u003e I[Run Checks]\n    H --\u003e I\n```\n\n**5. Why SHA256?**\n\n- **Cryptographically secure** - Guarantees unique fingerprint\n- **Fast computation** - Native Node.js crypto module\n- **Collision resistant** - No two different configs will have same hash\n- **Deterministic** - Same content always produces same hash\n\n**6. Performance Impact**\n\n- First run: ~100-200ms to build cache\n- Subsequent runs: \u003c5ms to verify hashes\n- Config change: Only rebuilds affected mappings\n- Result: 95%+ faster on repeated runs\n\n**7. Cache Benefits**\n\n- ⚡ **Lightning fast** - Skip expensive file system operations\n- 🎯 **100% accurate** - SHA256 ensures cache validity\n- 🔄 **Auto-updates** - Detects any config change instantly\n- 🗂️ **Isolated** - Each hook maintains its own cache\n- 🧠 **Smart rebuilds** - Only reprocesses changed configs\n\n### Check Execution\n\n**1. TypeScript Compilation**\n\n- Uses the correct config for the edited file\n- Only shows errors for the edited file (not dependencies)\n- Respects JSX settings from config\n\n**2. ESLint Integration**\n\n- Auto-fixes issues when possible\n- Re-runs after fixes to verify\n- Respects project ESLint config\n\n**3. Prettier Formatting**\n\n- Auto-formats on save\n- Silent when successful\n- Uses project Prettier config\n\n**4. Common Issues Detection**\n\n- Console usage (configurable per project type)\n- `as any` usage (error vs warning)\n- TODO/FIXME comments (informational)\n\n### Output Channels\n\nWhen running via Claude Code hooks:\n\n- **Exit 0**: Silent success (no output shown)\n- **Exit 2**: Full error report shown to user\n\nWhen testing manually:\n\n- All `[INFO]`, `[OK]`, `[WARN]` messages visible\n- Useful for debugging hook behavior\n\n## Configuration\n\n### Hook Settings\n\nEach hook folder has a `hook-config.json` that controls behavior:\n\n```json\n{\n  \"typescript\": {\n    \"enabled\": true,\n    \"showDependencyErrors\": false,\n    \"jsx\": \"react\" // For React hooks\n  },\n  \"eslint\": {\n    \"enabled\": true,\n    \"autofix\": true\n  },\n  \"prettier\": {\n    \"enabled\": true,\n    \"autofix\": true\n  },\n  \"rules\": {\n    \"console\": {\n      \"severity\": \"info|warning|error\",\n      \"allowIn\": {\n        \"paths\": [\"src/components/\"],\n        \"fileTypes\": [\"component\", \"test\"]\n      }\n    }\n  }\n}\n```\n\n### Environment Variable Overrides\n\nYou can override any setting with environment variables:\n\n```bash\n# Disable specific checks\nexport CLAUDE_HOOKS_PRETTIER_ENABLED=false\n\n# Enable debug mode\nexport CLAUDE_HOOKS_DEBUG=true\n\n# Show dependency errors (not recommended)\nexport CLAUDE_HOOKS_SHOW_DEPENDENCY_ERRORS=true\n```\n\n### Understanding Exit Codes\n\n- **Exit 0**: All checks passed ✅\n  - File quality verified\n  - Auto-fixes applied if enabled\n  - Hook output suppressed by Claude Code\n\n- **Exit 2**: Issues found ❌\n  - TypeScript compilation errors\n  - ESLint errors that couldn't be auto-fixed\n  - Prettier issues (if auto-fix disabled)\n  - Full error report shown to agent\n\n### Troubleshooting\n\n**Cache issues?**\n\n```bash\n# Clear the hook's cache\nrm .claude/hooks/react-app/tsconfig-cache.json\n```\n\n**Want more details?**\n\n```bash\n# Run manually with debug output\nexport CLAUDE_HOOKS_DEBUG=true\necho '{\"tool_name\":\"Edit\",\"tool_input\":{\"file_path\":\"src/App.tsx\"}}' | node .claude/hooks/react-app/quality-check.js\n```\n\n**Hook not running?**\n\n```bash\n# Check if executable\nchmod +x .claude/hooks/*/quality-check.js\n```\n\n## Questions?\n\nCheck individual hook folders for more details.\n","funding_links":[],"categories":["SDKs \u0026 Development Kits","Hooks 🪝","AI Coding Agents"],"sub_categories":["General","Claude Code"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartolli%2Fclaude-code-typescript-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartolli%2Fclaude-code-typescript-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartolli%2Fclaude-code-typescript-hooks/lists"}