Code Patrol - VS Code Extension

A VS Code extension that tracks custom metrics in your repository through configurable patterns and scripts.

Features

📊 Custom Metrics Dashboard: Visualize your repository metrics in a clean, webview-based dashboard
🎯 25+ Preset Metrics: Ready-to-use metrics for code quality, testing, security, and more
🔍 Multiple Metric Types: Support for regex patterns, inline commands, and custom shell scripts
🖱️ Click to View Details: Click any metric to see all findings in the terminal
⚙️ Flexible Configuration: YAML-based configuration file in your repository
🔄 Auto-refresh: Configurable refresh intervals or manual refresh
📝 Custom Scripts: Write custom scripts for complex metric calculations
🎨 Visual Progress Tracking: Donut charts and colored indicators for targets

Installation

Clone or download this extension
Run npm install in the extension directory
Press F5 in VS Code to run the extension in a new Extension Development Host window

Usage

1. Create Configuration File

Create a .code-patrol.yaml file in your workspace root:

refreshInterval: manual  # Options: manual, 30s, 5m, 10m, etc.
respectGitignore: true   # Default: true - exclude node_modules, .git, etc.
metrics:
  - name: "Database Connections"
    type: regex
    pattern: "createConnection\\(|new.*Connection\\("
    filePattern: "**/*.{js,ts}"
    
  - name: "Redis Usage"
    type: inline
    command: "grep -r 'redis' src/ | wc -l"
    
  - name: "API Endpoints"
    type: script
    scriptPath: ".scripts/count-endpoints.sh"

2. Add Metrics (Two Ways)

Option A: Use Preset Metrics (Recommended)

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
Type "Code Patrol: Add Preset Metric"
Select a category (Code Quality, Testing, Security, etc.)
Pick from 25+ pre-configured metrics!

Option B: Configure Manually

Edit .code-patrol.yaml directly (see below)

3. View the Dashboard

The dashboard appears in two ways:

Sidebar Tree View (Automatically Visible)

The "Code Patrol" tree view appears in the left sidebar Explorer panel
Shows all metrics with colored progress indicators
Click to expand/collapse sections

Full Dashboard Panel

Press Ctrl+Shift+D (or Cmd+Shift+D on Mac)
OR: Command Palette → "Code Patrol: Open Dashboard"
Opens a full dashboard with animated donut charts

4. Configure Metrics Manually

Regex Type

Searches for patterns in files using regular expressions:

- name: "Database Connections"
  type: regex
  pattern: "createConnection\\(|new.*Connection\\("
  filePattern: "**/*.{js,ts}"  # Optional, defaults to **/*

Fields:

name: Display name for the metric
type: Must be regex
pattern: Regular expression to search for
filePattern: Glob pattern for files to search (optional)
target: Optional target value. Shows warning icon and red text if exceeded
outputCommand: Optional command to run when metric is clicked (shows details in terminal)

Inline Type

Executes shell commands directly:

- name: "Lines of Code"
  type: inline
  command: "find src -name '*.js' -type f | xargs wc -l | tail -1"

Fields:

name: Display name for the metric
type: Must be inline
command: Shell command to execute
target: Optional target value. Shows warning icon and red text if exceeded
outputCommand: Optional command to run when metric is clicked (shows details in terminal)

Script Type

Runs custom shell scripts for complex calculations:

- name: "API Endpoints"
  type: script
  scriptPath: ".scripts/count-endpoints.sh"

Fields:

name: Display name for the metric
type: Must be script
scriptPath: Path to the script relative to workspace root
target: Optional target value. Shows warning icon and red text if exceeded
outputCommand: Optional command to run when metric is clicked (shows details in terminal)

Custom Script Contract

Scripts must follow this contract:

Exit Code: Must exit with code 0 for success
Output: Must output a single number to stdout (the last line will be parsed)
Arguments: Receives workspace path as first argument ($1)

Example Script:

#!/bin/bash
# count-endpoints.sh
WORKSPACE=$1

# Your custom logic here
count=0
for file in "$WORKSPACE"/src/routes/*.js; do
    if [ -f "$file" ]; then
        # Count exports or route definitions
        count=$((count + $(grep -c "router\\|app\\.get\\|app\\.post" "$file" 2>/dev/null || 0)))
    fi
done

echo $count

Make your script executable:

chmod +x .scripts/count-endpoints.sh

Target Values and Visualization

Add a target field to any metric to enable progress tracking:

- name: "Database Connections"
  type: regex
  pattern: "createConnection\\("
  target: 5  # Warning when exceeded

Visual Indicators:

When value > target: Warning icon and red text displayed
Progress shown in tooltip: value / target (percentage%)
Tree view shows: ⚠️ Metric Name with red value/target text

Example:

- name: "Console Logs"
  type: regex
  pattern: "console\\.log"
  target: 10  # Alert if more than 10 console.log statements found

Click to View Details

Add an outputCommand to any metric to make it clickable. When clicked, it runs the command in a terminal showing all findings:

- name: "TODO Comments"
  type: regex
  pattern: "TODO|FIXME|HACK"
  outputCommand: 'grep -rn "TODO\\|FIXME\\|HACK" --include="*.js" --include="*.ts" | head -50'

Features:

🔍 Clickable metrics show a magnifying glass icon
Terminal opens automatically with command results
All 25 preset metrics include outputCommands
View file paths, line numbers, and context for each finding

Refresh Intervals

Configure how often metrics are refreshed:

refreshInterval: manual  # Manual refresh only

refreshInterval: 30s     # Every 30 seconds
refreshInterval: 5m      # Every 5 minutes
refreshInterval: 10m     # Every 10 minutes

Format: {number}{s|m} where s = seconds, m = minutes

Available Preset Metrics

Code Patrol includes 25 ready-to-use metrics across 6 categories:

Code Quality (7 metrics)

TODO Comments - Track technical debt (TODO, FIXME, HACK)
Console Logs - Debug statements left in code
Commented Code Blocks - Blocks of commented-out code
Debugger Statements - Debugger statements in code
Magic Numbers - Hardcoded numbers without constants
Any Types - TypeScript any types (reduces type safety)
ESLint Disables - Disabled linting rules

Dependencies (4 metrics)

Import Statements - Total import statements
Require Statements - CommonJS require usage
External API Calls - HTTP requests (fetch, axios)
Deprecated Imports - Usage of deprecated packages

Database & Backend (3 metrics)

Database Queries - SQL queries and ORM calls
API Endpoints - REST API endpoint definitions
Environment Variables - Environment variable usage

Testing (4 metrics)

Test Files - Number of test files
Skipped Tests - Tests marked as skipped
Test Assertions - Number of test assertions
Mock Usage - Mock and stub usage

Performance (3 metrics)

Large Files - Files over 500 lines
Inline Styles - Style attributes in JSX/HTML
TODO Files - Files with TODO in their name

Security (4 metrics)

Hardcoded Credentials - Potential security issues
HTTP URLs - Non-HTTPS URLs
eval() Usage - Dangerous eval statements
innerHTML Usage - Potential XSS vulnerabilities

To add any preset:

Command Palette → "Code Patrol: Add Preset Metric"
Or add multiple at once → "Code Patrol: Add Multiple Preset Metrics"

Configuration Options

Top-Level Settings

respectGitignore (boolean, default: true)

When true: Excludes common ignored directories (node_modules, .git, dist, build) from regex searches
When false: Searches all files matching the pattern
Recommended to keep this true for faster, cleaner results

refreshInterval (string)

Controls how often metrics auto-refresh
Format: manual, 30s, 5m, 10m, etc.

Commands

code-dashboard.open: Open the dashboard panel
code-dashboard.refresh: Manually refresh all metrics
code-dashboard.reload-config: Reload the config file

Development

Prerequisites

Node.js (v14 or higher)
VS Code
npm or yarn

Building

npm install
npm run compile

Debugging

Open this folder in VS Code
Press F5 to launch a new Extension Development Host window
In the new window, open a workspace with a .code-patrol.yaml file

Project Structure

code-patrol/
├── src/
│   ├── extension.ts        # Main extension entry point
│   ├── configParser.ts     # YAML config parser
│   ├── metricCollector.ts  # Metric collection engine
│   ├── dashboardProvider.ts # Webview dashboard
│   └── types.ts            # TypeScript interfaces
├── media/
│   ├── dashboard.html      # Dashboard UI
│   └── styles.css          # Dashboard styles
├── package.json            # Extension manifest
└── tsconfig.json           # TypeScript config

Troubleshooting

Dashboard shows "No metrics configured"

Ensure .code-patrol.yaml exists in your workspace root
Check the YAML syntax is valid
Look at the VS Code developer console (Help > Toggle Developer Tools) for errors

Metric shows "Error"

For regex metrics: Check your pattern and file pattern syntax
For inline metrics: Test the command manually in your terminal
For script metrics:
- Verify the script exists at the specified path
- Ensure the script is executable: chmod +x .scripts/your-script.sh
- Test the script manually: bash .scripts/your-script.sh /path/to/workspace
- Check that the script outputs only a number to stdout

Auto-refresh not working

Verify the refreshInterval syntax is correct (e.g., 30s, 5m)
Use manual for manual-only refresh
Check VS Code developer console for errors

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Code Patrol

Anup Kashyap

Code Patrol - VS Code Extension

Features

Installation

Usage

1. Create Configuration File

2. Add Metrics (Two Ways)

3. View the Dashboard

4. Configure Metrics Manually

Regex Type

Inline Type

Script Type

Custom Script Contract

Target Values and Visualization

Click to View Details

Refresh Intervals

Available Preset Metrics

Code Quality (7 metrics)

Dependencies (4 metrics)

Database & Backend (3 metrics)

Testing (4 metrics)

Performance (3 metrics)

Security (4 metrics)

Configuration Options

Top-Level Settings

Commands

Development

Prerequisites

Building

Debugging

Project Structure

Troubleshooting

Dashboard shows "No metrics configured"

Metric shows "Error"

Auto-refresh not working

Contributing

License