Typescript Quality Hooks

Claude Code Quality Hooks

Quality checks for different project types.

[Official Documentation](https://docs.anthropic.com/en/docs/claude-code/hooks)

Quick Start

1. Choose Your Project Type

# React/Next.js/Vite apps
.claude/hooks/react-app/

# VS Code extensions
.claude/hooks/vscode-extension/

# Node.js TypeScript projects
.claude/hooks/node-typescript/

# More coming soon...

2. Configure Claude Code

Add to `.claude/settings.local.json` and customize "command" quality-check.js path according to your project type (react-app, vscode-extension, node-typescript):

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "node $CLAUDE_PROJECT_DIR/.claude/hooks/react-app/quality-check.js"
          }
        ]
      }
    ]
  }
}

3. Done

Hook runs automatically when you edit files.

Features

• Catches errors before runtime
• Uses project-specific TypeScript configurations
• Auto-fixes trivial issues
• Project-aware rules (React hooks allow console.log, VS Code extensions don't)
• Immediate feedback during editing
• Prevents regressions

Project Types

React App

• Console allowed in components
• 'as any' warnings (not errors)
• JSX support

VS Code Extension

• Console blocked in extension code
• Console allowed in webview
• Strict TypeScript

Node.js TypeScript

• Console allowed (acceptable for CLI tools)
• 'as any' warnings (not errors)
• Optimized for server/client transport code

Configuration

Each hook has `hook-config.json`:

{
  "typescript": {
    "enabled": true,
    "showDependencyErrors": false,
    "jsx": "react" // For React hooks
  },
  "eslint": {
    "enabled": true,
    "autofix": true
  },
  "prettier": {
    "enabled": true,
    "autofix": true
  },
  "rules": {
    "console": {
      "severity": "info|warning|error",
      "allowIn": {

...