ModCodePattern - Keep Your Files in Sync with Interactive Todo List

📖 ModCodePattern User Guide

Complete guide to master ModCodePattern and maintain codebase consistency with intelligent adaptive patterns.

⚡ Interactive guide with smart navigation

🌟

Introduction

🎯 What is ModCodePattern?

ModCodePattern is a revolutionary VS Code extension that automatically maintains code consistency across your project. Instead of manually remembering to update exports, create tests, or maintain documentation when you add new files, ModCodePattern watches your codebase and reminds you through an intelligent Todo system.

🤔 What is a "Pattern"?

A pattern in ModCodePattern is a rule that defines what should happen when certain events occur in your codebase. Think of it as an "if-then" automation rule:

You create a new React component in src/components/

THEN

Remind me to:

Add the export to src/components/index.ts
Create corresponding tests in tests/components/
Update the component documentation

📂 Configuration File Structure

All patterns must be defined in a .mod-patterns.jsonfile at your project root, and patterns must be inside a "patterns" array:

Basic Configuration

json

{
  "patterns": [
    {
      "onCreateFile": "src/components/**/*.tsx",
      "notify": ["src/components/index.ts"],
      "description": "📦 Add component export"
    }
  ]
}

⚠️ Don't just put patterns in random JSON objects - they must be in the "patterns" array!

🚀 Why ModCodePattern?

❌ Without ModCodePattern

Forget to export new components
Inconsistent file organization
Missing tests for new features
Outdated documentation
Manual code reviews to catch these issues
Time wasted fixing consistency issues

✅ With ModCodePattern

Automatic reminders for consistency
Adaptive patterns that fit your architecture
Never forget to add exports or tests
Maintains documentation automatically
Works silently in the background
Focus on coding, not maintenance
Smooth onboarding - New developers follow pre-defined patterns
Guided workflows - Chained patterns create step-by-step tutorials

🎮 How Does It Work?

Install & Configure

Install the extension and create a .mod-patterns.json file at your project root with a "patterns" array containing your automation rules

Work Normally

Code as usual - create files, modify components, add features

Get Smart Reminders

ModCodePattern detects changes and shows you a Todo list of consistency tasks

Stay Consistent

Check off completed tasks and maintain perfect codebase consistency

🎯 Perfect for

👥 Teams

Ensure all team members follow the same patterns and conventions

🏗️ Large Projects

Maintain consistency in complex codebases with multiple modules

⚡ Rapid Development

Focus on features while ModCodePattern handles maintenance

📚 Bibliothèque de Patterns Prêts à l'Emploi

Accédez à des centaines de patterns pré-configurés et testés

Découvrez notre repository officiel contenant des patterns prêts à l'emploi pour React, Node.js, TypeScript, Vue.js, Angular et bien plus. Plus besoin de créer vos patterns depuis zéro !

🎯 Patterns organisés par technologie (React, Node.js, Vue, Angular...)

⚡ Prêts à l'emploi - Importez et utilisez immédiatement

🧪 Testés sur de vrais projets

🔧 Entièrement personnalisables

📖 Documentation complète pour chaque pattern

🆓 Open source et gratuit

📋

Pattern Structure Overview

🏗️ General Pattern Syntax

Every ModCodePattern configuration follows this basic structure:

General Structure

json

{
  "variables": {
    // Custom variables (optional)
    "PROJECT_NAME": "MyApp",
    "CUSTOM_DIR": "lib/special"
  },
  "imports": [
    // Import other pattern files (optional)
    ".mod-patterns/react.json",
    ".mod-patterns/api.json"
  ],
  "patterns": [
    // Array of pattern objects (required)
    {
      // TRIGGERS (what activates the pattern)
      "onChange": "src/**/*.ts",        // File modification
      "onCreateFile": "src/**/*.tsx",   // File creation
      "onCreateFolder": "src/components/", // Folder creation
      "onDeleteFile": "src/**/*.old",   // File deletion
      "onStart": true,                  // Manual trigger
      
      // NOTIFICATIONS (what to remind)
      "notify": [
        {
          "file": "src/index.ts",
          "description": "📦 Update exports"
        },
        {
          "folder": "tests/",
          "description": "🧪 Create tests"
        },
        {
          "commands": ["npm test", "npm run lint"],
          "description": "🚀 Run quality checks"
        }
      ],
      
      // DESCRIPTION (what this pattern does)
      "description": "🔧 API files modified"
    }
  ]
}

🎯 Main Components

🔧 Variables

Define reusable values for your patterns. Can be custom or auto-detected by the extension.

📥 Imports

Include pattern definitions from other files to organize complex configurations.

⚡ Patterns

The core array containing all your monitoring rules and automation logic.

🎮 Pattern Components

Triggers (Event Detection)

Define what file system events will activate this pattern:

Trigger	Description	Example
onChange	File is modified/edited	Edit an existing component
onCreateFile	New file is created	Create a new React component
onCreateFolder	New folder is created	Add a new feature module
onDeleteFile	File is deleted	Remove component and clean up
onDeleteFolder	Folder is deleted	Remove feature module
onStart	Manual trigger/educational	Onboarding guidance

Notifications (Actions to Remind)

Three types of actions you can be reminded to perform:

📄 File Notifications

{
  "file": "src/components/index.ts",
  "description": "📦 Add component export"
}

Remind to modify or create a specific file

📁 Folder Notifications

{
  "folder": "tests/components/",
  "description": "🧪 Create tests in this directory"
}

Remind to work in a specific directory

⚡ Command Notifications

{
  "commands": ["npm test", "npm run lint", "git add ."],
  "description": "🚀 Run quality checks and commit"
}

Remind to execute specific commands

Description (Pattern Purpose)

A clear description of what this pattern does and when it triggers:

"description": "🔧 API endpoint modified - update types and tests"

💡 Best Practice

Start with simple patterns and gradually add complexity. Each pattern should have a single, clear purpose.

🧠

Adaptive Patterns - Revolutionary!

🆕 REVOLUTIONARY!

Adaptive patterns automatically adapt to your project architecture!

The Problem with Fixed Patterns

❌ Rigid pattern - only works for ONE architecture

{
  "onCreateFile": "src/components/**/*.tsx",
  "notify": ["src/components/index.ts"]
}

Problems:

❌ What if your components are in app/ui/?
❌ What if your export file is lib/index.ts?

Solution: Adaptive Variables

✅ Adaptive pattern - works for ALL projects!

{
  "onCreateFile": "{{COMPONENTS_DIR}}/**/*.tsx",
  "notify": ["{{COMPONENTS_DIR}}/index.ts"],
  "description": "📦 Add component export"
}

🔧 Adaptive Variables (Automatically Detected)

Variable	Description	Examples
{{SRC_DIR}}	Main source directory	src, lib, app
{{COMPONENTS_DIR}}	Components directory	src/components, app/ui
{{HOOKS_DIR}}	Hooks/composables directory	src/hooks, src/composables
{{API_DIR}}	API/services directory	src/api, src/services
{{TESTS_DIR}}	Tests directory	tests, __tests__
{{DOCS_DIR}}	Documentation directory	docs, documentation
{{CONFIG_DIR}}	Configuration directory	config, configs
{{CONFIG_FILE}}	Configuration file	config/index.ts
{{TYPES_FILE}}	Types file	src/types/index.ts

Automatic Detection

The extension analyzes your project and detects:

📁 Folder structure (src/, app/, lib/)
🛠️ Framework used (React, Vue, Angular, etc.)
⚙️ Build tools (Vite, Webpack, Next.js)
📝 Naming conventions

Runtime Variables - New Feature!

🆕 NEW FEATURE!

Runtime variables allow you to use information about the file that triggers the pattern.

⚡ Runtime Variables (New!)

Variable	Description	Examples
{{TRIGGER_PATH}}	Trigger file path	src/components/Button.tsx
{{TRIGGER_TYPE}}	Event type	onCreateFile, onChange, onStart
{{TRIGGER_FILE}}	Trigger file name	Button.tsx
{{TRIGGER_DIR}}	Trigger file directory	src/components
{{TRIGGER_NAME}}	Trigger file name without extension	Button (from Button.tsx)

Usage in Descriptions

{
  "onChange": "{{COMPONENTS_DIR}}/**/*.tsx",
  "notify": [
    {
      "file": "{{COMPONENTS_DIR}}/index.ts",
      "description": "📦 Add export for {{TRIGGER_NAME}} component ({{TRIGGER_FILE}}) from {{TRIGGER_DIR}}"
    }
  ],
  "description": "🔧 Component {{TRIGGER_NAME}} ({{TRIGGER_FILE}}) modified in {{TRIGGER_PATH}}"
}

Usage in Paths

{
  "onCreateFile": "src/components/**/*.tsx",
  "notify": [
    {
      "file": "{{TRIGGER_DIR}}/{{TRIGGER_NAME}}.test.tsx",
      "description": "🧪 Create test for {{TRIGGER_NAME}} component"
    },
    {
      "folder": "docs/components/{{TRIGGER_NAME}}/",
      "description": "📝 Document {{TRIGGER_NAME}} component"
    }
  ]
}

Usage in Commands

{
  "onChange": "src/**/*.ts",
  "notify": [
    {
      "commands": [
        "echo 'File modified: {{TRIGGER_PATH}}'",
        "code {{TRIGGER_PATH}}",
        "git add {{TRIGGER_PATH}}"
      ],
      "description": "🚀 Actions for {{TRIGGER_NAME}} ({{TRIGGER_FILE}})"
    }
  ]
}

Complete Example with Mixed Variables

{
  "onCreateFile": "{{COMPONENTS_DIR}}/**/*.tsx",
  "notify": [
    {
      "file": "{{COMPONENTS_DIR}}/index.ts",
      "description": "📦 Add export for {{TRIGGER_NAME}} component"
    },
    {
      "file": "{{TESTS_DIR}}/{{TRIGGER_NAME}}.test.tsx",
      "description": "🧪 Test for {{TRIGGER_NAME}} component from {{TRIGGER_DIR}}"
    },
    {
      "commands": ["pnpm test {{TRIGGER_PATH}}"],
      "description": "🚀 Test {{TRIGGER_NAME}} component"
    }
  ],
  "description": "🆕 New component {{TRIGGER_NAME}} ({{TRIGGER_FILE}}) created in {{TRIGGER_PATH}}"
}

🔍 View Detected Variables

Ctrl+Shift+P → "ModCodePattern: View Adaptive Variables"

🔗

Chained Patterns - Automatic Workflows

🚀 Revolutionary Advanced Feature!

Chained patterns allow you to create automatic workflows where each pattern triggers the next in cascade.

The Concept

Instead of isolated patterns, create smart pipelines:

Pattern 1: Create Component
       ↓
Pattern 2: Create Story
       ↓
Pattern 3: Create Tests
       ↓
Pattern 4: Run Tests

🚀 Vision: AI-Guided Development

Imagine this scenario: Your AI assistant generates a complex React component with hooks, state management, and API calls. Instead of leaving you to figure out the implementation details, it automatically creates chained patterns that guide you step-by-step through:

📝 Understanding the component's architecture
🧪 Setting up the corresponding tests
📚 Adding proper TypeScript types
🔗 Integrating with your existing state management
📖 Documenting the new patterns for your team

"Your AI doesn't just generate code—it creates a personalized learning path through chained patterns, turning every AI-generated feature into a guided tutorial that teaches your team the 'why' behind the 'what'."

Basic Example

{
  "patterns": [
    {
      "onCreateFile": "{{COMPONENTS_DIR}}/**/*.tsx",
      "notify": [
        {
          "folder": "src/stories/",
          "description": "📖 Create Storybook Story"
        }
      ],
      "description": "🆕 Component created → Story to create"
    },
    {
      "onCreateFile": "src/stories/**/*.stories.tsx",
      "notify": [
        {
          "folder": "{{TESTS_DIR}}/stories/",
          "description": "🧪 Create Story tests"
        }
      ],
      "description": "📖 Story created → Tests to create"
    },
    {
      "onCreateFile": "{{TESTS_DIR}}/stories/**/*.test.tsx",
      "notify": [
        {
          "commands": ["pnpm run test:stories"],
          "description": "🚀 Run Story tests"
        }
      ],
      "description": "🧪 Tests created → Auto execution"
    }
  ]
}

Scenario in Action

You create `src/components/Button.tsx`
ModCodePattern detects → Notification "📖 Create Storybook Story"
You create `src/stories/Button.stories.tsx`
ModCodePattern detects → Notification "🧪 Create Story tests"
You create `tests/stories/Button.stories.test.tsx`
ModCodePattern triggers → "🚀 Run pnpm run test:stories"

Workflow Advantages

✅ Zero forgetting: Each step triggers the next
✅ Standardization: Identical workflows for the whole team
✅ Forced consistency: Impossible to bypass steps
✅ Massive acceleration: Completely automated processes
✅ Ensured quality: Integrated tests and validations

Popular Workflow Types

🎨 Frontend Component Pipeline

Component → Story → Tests → Documentation

🛠️ API Backend Pipeline

Route → Types → Tests → Documentation

📦 Feature Pipeline

Feature → Component → Hook → E2E Tests

🚀 DevOps Pipeline

Code → Lint → Tests → Build → Deploy

Best Practices

✅ Do's

Short chains (3-4 steps max)
Atomic actions at each step
Descriptive names for traceability
Individual tests for each link

❌ Don'ts

Infinite chains creating loops
Complex actions in a single pattern
Circular dependencies
Too generic patterns

Debugging Workflows

# See all active patterns
Ctrl+Shift+P → "ModCodePattern: View Adaptive Variables"

# Observe todo list after each action
Ctrl+Shift+P → "ModCodePattern: Open Todo List"

🎯 ProTip

Start with a simple workflow then gradually enrich according to your needs!

🎯

JSON Auto-completion

✨ Automatic Feature!

ModCodePattern includes a complete JSON Schema that enables auto-completion in VS Code.

How it Works

In your `.mod-patterns.json` file:

✅ Automatic auto-completion - Type `Ctrl+Space`
✅ Real-time validation - Underlined errors
✅ Integrated documentation - Hover over properties
✅ Contextual suggestions - Ready-to-use examples

Usage Example

{
  "p|" ← Type "p" then Ctrl+Space
}

Automatic suggestions:

patterns ✨ - List of monitoring patterns
imports ✨ - Configuration files to import
variables ✨ - Custom variables

Automatic Validation

{
  "patterns": [
    {
      "onChange": "src/*.ts",
      "notify": 123  ← ❌ Detected error: must be string or array
    }
  ]
}

Advantages

🚀 Facilitated learning for new users
⚡ Fast configuration with suggestions
🔍 Error prevention by validation
📚 Living documentation integrated

📁

Basic Configuration

1. Main File

Create `.mod-patterns.json` at the root of your project:

.mod-patterns.json

json

{
  "patterns": [
    {
      "onChange": "src/api/**/*.ts",
      "notify": [
        {
          "file": "src/types/api.ts",
          "description": "📘 Update types"
        },
        {
          "folder": "tests/api/",
          "description": "🧪 Create/update tests"
        }
      ],
      "description": "🔧 API modified"
    }
  ]
}

2. Custom Variables

Define your own variables:

Custom variables

json

{
  "variables": {
    "PROJECT_NAME": "MyApp",
    "API_VERSION": "v2",
    "CUSTOM_DIR": "lib/special"
  },
  "patterns": [
    {
      "onChange": "{{CUSTOM_DIR}}/**/*.ts",
      "notify": ["docs/{{PROJECT_NAME}}/{{API_VERSION}}/changelog.md"],
      "description": "📋 Update changelog {{PROJECT_NAME}}"
    }
  ]
}

🔄

Modular Configuration

For complex projects, organize your patterns into modules:

Main File

{
  "imports": [
    ".mod-patterns/react.json",
    ".mod-patterns/api.json",
    ".mod-patterns/testing.json"
  ],
  "patterns": [
    {
      "onChange": "package.json",
      "notify": ["README.md"],
      "description": "📦 Dependencies modified"
    }
  ]
}

React Module (`.mod-patterns/react.json`)

{
  "patterns": [
    {
      "onCreateFile": "{{COMPONENTS_DIR}}/**/*.tsx",
      "notify": [
        {
          "file": "{{COMPONENTS_DIR}}/index.ts",
          "description": "📦 Add component export"
        },
        {
          "folder": "{{TESTS_DIR}}/components/",
          "description": "🧪 Create tests"
        }
      ],
      "description": "🆕 New React component"
    }
  ]
}

🌍

Multilingual Support

Interface

The extension automatically detects your IDE language and adapts the interface accordingly:

🔍 Automatic Detection

French IDE → French interface
English IDE → English interface
Other languages → English interface (default)

Multilingual Patterns

Your descriptions can be translated:

{
  "description": {
    "fr": "📦 Composant modifié",
    "en": "📦 Component modified"
  },
  "notify": [
    {
      "file": "src/components/index.ts",
      "description": {
        "fr": "📦 Ajouter l'export du composant",
        "en": "📦 Add component export"
      }
    }
  ]
}

🔕

Silent Mode

Disable popup notifications while keeping essential features:

Temporary

Ctrl+Shift+P → "ModCodePattern: Toggle Notifications"

Permanent

// settings.json
{
  "modcodepattern.notifications.enabled": false
}

Silent Mode Advantages

✅ Todo list always active
✅ Status bar functional
✅ Background detection
❌ No interruption popups

🎯

Complete Lifecycle

ModCodePattern manages all lifecycle events:

Manual Trigger

{
  "onStart": true,
  "notify": [
    {
      "file": "{{TRIGGER_PATH}}/README.md",
      "description": "📚 Start by reading project guide {{TRIGGER_FILE}}"
    }
  ],
  "description": "🚀 Startup guidance for {{TRIGGER_FILE}}"
}

Creation

{
  "onCreateFile": "src/components/**/*.tsx",
  "notify": ["{{COMPONENTS_DIR}}/index.ts"],
  "description": "🆕 New component created"
}

Modification

{
  "onChange": "src/api/**/*.ts",
  "notify": ["src/types/api.ts"],
  "description": "🔧 API modified"
}

Deletion

{
  "onDeleteFile": "src/components/**/*.tsx",
  "notify": [
    {
      "file": "{{COMPONENTS_DIR}}/index.ts",
      "description": "🗑️ Remove component export"
    }
  ],
  "description": "🗑️ Component deleted"
}

🚀

Recommended Workflow

1. Project Startup

Install ModCodePattern
Create `.mod-patterns.json` with basic patterns
Test with simple modifications
Iterate and enrich patterns

2. Daily Development

Modify your files normally
Watch notifications/status bar
Open todo list (`Ctrl+Shift+P` or click bar)
Process actions one by one
Check completed tasks

3. Project Evolution

Analyze missed patterns
Add new adaptive patterns
Organize into modules if necessary
Share with team

💡

Best Practices

Efficient Patterns

✅ Specific

{
  "onChange": "src/api/user.ts",
  "notify": ["src/hooks/useUser.ts"]
}

❌ Too broad (generates too many notifications)

{
  "onChange": "src/**/*",
  "notify": ["README.md"]
}

Adaptive vs Fixed Variables

✅ Adaptive (reusable)

{
  "onChange": "{{API_DIR}}/**/*.ts",
  "notify": ["{{TYPES_FILE}}"]
}

❌ Fixed (project-dependent)

{
  "onChange": "src/api/**/*.ts",
  "notify": ["src/types/index.ts"]
}

Modular Organization

✅ Organized by domain

{
  "imports": [
    ".mod-patterns/components.json",
    ".mod-patterns/api.json"
  ]
}

🔍

Pattern Identification & Debugging

⚠️ Why IDs are Important

If you have multiple patterns that trigger on the same event and same file type, the extension cannot distinguish them without unique IDs. Without IDs, only the last pattern will work!

Multiple Patterns on the Same Event

❌ Without ID - Only the last pattern works

{
  "patterns": [
    {
      "onCreateFile": "src/components/**/*.tsx",
      "notify": [
        {
          "file": "index.ts", 
          "description": "Add export"
        }
      ]
    },
    {
      "onCreateFile": "src/components/**/*.tsx",  // ← Same event!
      "notify": [
        {
          "file": "README.md", 
          "description": "Document"
        }
      ]  // ← This pattern overwrites the previous one!
    }
  ]
}

✅ With ID - All patterns work

{
  "patterns": [
    {
      "id": "export-component",
      "onCreateFile": "src/components/**/*.tsx",
      "notify": [
        {
          "file": "index.ts", 
          "description": "Add export"
        }
      ]
    },
    {
      "id": "doc-component",
      "onCreateFile": "src/components/**/*.tsx",
      "notify": [
        {
          "file": "README.md", 
          "description": "Document"
        }
      ]
    }
  ]
}

🎯 Simple Rule

As soon as you have 2+ patterns with the same onCreateFile, onChange, etc. on the same files → Use unique IDs!

💡 Best Practices for IDs

✅ Good Practices

Descriptive: export-component rather than pattern1
Kebab-case: api-endpoint-update rather than apiEndpointUpdate
Unique: Each pattern must have a different ID
Stable: Don't change the ID once in production

❌ Avoid

Generic names: pattern1, test
Spaces or special chars: my pattern!
Duplicate IDs: Two patterns with same ID
Frequent changes: Modifying IDs in production

💡

Inline Hints 🆕

✨ NEW FEATURE!

ModCodePattern can now display reminders directly in your files!

🎯 How it Works

When a pattern triggers, descriptions are automatically displayed:

📍 In the trigger file : General pattern description
📍 In target files : Specific action descriptions

👁️ Visual Appearance

// Your normal code
export const Button = () => {
  return <button>Click me</button>;
};

// 📝 🔄 API modified - synchronize types

• 🎨 Green color to harmonize with the extension

• 📝 Descriptive icon to identify hints

• ✨ Italic style to distinguish from code

⚙️ Configuration

Control hint display with the showInlineHint property:

{
  "patterns": [
    {
      "onChange": "src/api/**/*.ts",
      "notify": [
        {
          "file": "src/types/api.ts",
          "description": "📘 Update types"
        }
      ],
      "description": "🔧 API modified",
      "showInlineHint": true // ← Show hints (default)
    },
    {
      "onChange": ".env",
      "notify": [
        {
          "file": "docker-compose.yml",
          "description": "🐳 Update Docker"
        }
      ],
      "description": "🔧 Configuration modified",
      "showInlineHint": false // ← Hide hints
    }
  ]
}

📋 Display Rules

✅ Behavior

Files only : Hints only display in files (not folders)
Until completion : Hints disappear when task is checked
Enabled by default : showInlineHint: true if not specified
Target respect : Each description appears in its corresponding file

💡 Usage Tips

Use short and clear descriptions
Add emojis for better visibility
Disable for very frequent patterns
Perfect for team onboarding

🔗

Linked Tasks

This revolutionary feature allows you to create automatic workflows where one pattern can automatically trigger another pattern after completion. Perfect for creating chains of tasks that execute in sequence.

💡 Pattern IDs for Chaining

Linked tasks use the same id property described in the Pattern Identification & Debugging section above. This means you get both pattern identification benefits AND chaining capabilities with a single ID!

💡 How it works

Each pattern can have a unique id and use triggerNext to automatically trigger the next pattern. The following pattern uses onTrigger: true to be activated by another pattern.

Configuration in .mod-patterns.json

{
  "patterns": [
    {
      "id": "component-created",
      "onCreateFile": "{{COMPONENTS_DIR}}/**/*.tsx",
      "notify": [
        {
          "file": "{{COMPONENTS_DIR}}/index.ts",
          "description": "📦 Add component export"
        }
      ],
      "description": "🆕 New component created",
      "triggerNext": "component-exported"
    },
    {
      "id": "component-exported",
      "onTrigger": true,
      "notify": [
        {
          "folder": "src/stories/",
          "description": "📖 Create Storybook story"
        }
      ],
      "description": "📦 Export added → Create story",
      "triggerNext": "story-created"
    },
    {
      "id": "story-created",
      "onTrigger": true,
      "notify": [
        {
          "folder": "{{TESTS_DIR}}/components/",
          "description": "🧪 Create component tests"
        }
      ],
      "description": "📖 Story created → Create tests"
    }
  ]
}

Linked Tasks Properties

🆔 id (Unique identifier)

Unique identifier of the pattern for linking

"id": "component-created"

⚡ triggerNext (Trigger next)

ID of the pattern to trigger after completion of this task

"triggerNext": "component-exported"

🎯 onTrigger (Triggered by another)

Pattern activated automatically by another pattern

"onTrigger": true

Linked Tasks Benefits

✅ Automated workflows - Patterns activate in cascade automatically
✅ Guaranteed sequences - Impossible to skip important steps
✅ Clear logic - Each pattern has a precise role in the chain
✅ Simplified maintenance - Easy modification of existing workflows

🌐

External Links

Integrate external resources directly into your notifications! This feature allows you to automatically open URLs, external files, or specific applications from your ModCodePattern tasks.

🎯 Perfect use cases

Open React documentation when creating a component
Launch Figma to verify a design
Access an external guidelines file
Open a Jira ticket or GitHub Issue
Consult specifications in a PDF file

Configuration with External Links

{
  "patterns": [
    {
      "onCreateFile": "src/components/**/*.tsx",
      "notify": [
        {
          "url": "https://docs.react.dev/reference/react",
          "description": "📚 Check React documentation"
        },
        {
          "externalFile": "/Users/dev/shared/component-guidelines.md",
          "description": "📋 Read component guidelines"
        },
        {
          "application": "figma://file/design-system",
          "description": "🎨 Check design in Figma"
        }
      ],
      "description": "🆕 New component → External resources"
    }
  ]
}

External Link Types

🌐 url (Web URL)

Opens a URL in the default browser

{
  "url": "https://docs.react.dev/hooks",
  "description": "📚 React hooks documentation"
}

📄 externalFile (External file)

Opens an external file (outside VS Code) with the default application

{
  "externalFile": "/Users/dev/Documents/specs/api-spec.md",
  "description": "📋 API specifications"
}

🚀 application (Application URI)

Launches a specific application with a custom protocol

{
  "application": "figma://file/abc123",
  "description": "🎨 Open design in Figma"
}

Supported Applications Examples

🎨 Design

figma://file/abc123
sketch://document/xyz
adobe-xd://open/design

💬 Communication

slack://channel?team=T123&id=C456
discord://channels/guild/channel
teams://l/chat/conversation

🛠️ Development

vscode://file/path/to/file
jetbrains://idea/navigate/reference
postman://collection/import

📋 Management

notion://www.notion.so/page
obsidian://open?vault=notes
linear://issue/PROJ-123

External Links Benefits

✅ Immediate context - Direct access to relevant resources
✅ Smooth workflow - No need to manually search for links
✅ Native integration - Works with all installed applications
✅ Time saving - Automatic opening of necessary tools

🎯

Content Filter

This advanced Premium feature allows you to monitor specific changes in your file content. Instead of simply detecting file modifications, you can monitor precise patterns, keywords, or specific code structures.

💎 Premium Feature Only

contentFilter is a Premium feature that requires a $6/month subscription. It enables precise monitoring with regex, JSON-path, and advanced contexts.

Configuration with contentFilter

{
  "patterns": [
    {
      "onChange": "src/config/api.ts",
      "contentFilter": {
        "pattern": "baseURL.*=.*['\"](.*)['\""]",
        "type": "regex"
      },
      "notify": [
        {
          "file": "README.md",
          "description": "📚 Update URL in documentation"
        }
      ],
      "description": "🔗 API URL modified"
    },
    {
      "onChange": "package.json",
      "contentFilter": {
        "pattern": "dependencies",
        "type": "line-contains"
      },
      "notify": [
        {
          "commands": ["npm install"],
          "description": "📦 Install new dependencies"
        }
      ],
      "description": "📦 Dependencies modified"
    }
  ]
}

contentFilter Properties

🔍 pattern (Pattern to search)

The pattern to search in content (regex or text depending on type)

"pattern": "baseURL.*=.*['\"](.*)['\""]"

📝 type (Filter type)

Type of filter to apply: regex, text, line-contains, json-path

"type": "regex" | "text" | "line-contains" | "json-path"

⚙️ Advanced options

Options to customize filter behavior

{
  "ignoreCase": true,     // Ignore case
  "multiline": false,     // Multiline mode for regex
  "context": {            // Optional context
    "startLine": 10,
    "endLine": 50,
    "function": "handleSubmit",
    "block": "class"
  }
}

Available Filter Types

🔤 text

Simple text search

{
  "pattern": "DATABASE_URL",
  "type": "text",
  "ignoreCase": true
}

🔍 regex

Advanced regular expression

{
  "pattern": "export\s+const\s+(\w+)",
  "type": "regex",
  "multiline": true
}

📄 line-contains

Line containing the pattern

{
  "pattern": "dependencies",
  "type": "line-contains"
}

🗂️ json-path

Specific JSON path

{
  "pattern": "dependencies.react",
  "type": "json-path"
}

Advanced Usage Examples

🔐 Security Monitoring

{
  "onChange": ".env",
  "contentFilter": {
    "pattern": "DATABASE_URL",
    "type": "text",
    "ignoreCase": true
  },
  "notify": [
    {
      "file": "docker-compose.yml",
      "description": "🐳 Update Docker configuration"
    }
  ],
  "description": "🔧 Database URL modified"
}

📊 Context-based Monitoring

{
  "onChange": "src/components/**/*.tsx",
  "contentFilter": {
    "pattern": "useState|useEffect",
    "type": "regex",
    "context": {
      "function": "MyComponent",
      "startLine": 1,
      "endLine": 100
    }
  },
  "notify": [
    {
      "file": "src/hooks/index.ts",
      "description": "🪝 Hooks detected in component"
    }
  ],
  "description": "🎯 React hooks detected"
}

contentFilter Benefits

✅ Precise monitoring - Detection based on actual content, not just file names
✅ Maximum flexibility - Full support for regex and JSON-path
✅ Advanced context - Limitation by function, line, or code block
✅ Optimized performance - Intelligent filtering to avoid false positives
✅ Enhanced security - Proactive detection of security issues

🔗

Useful Links