Your work deserves to be seen. Influence isn’t innate—it’s structured.

墨抒颖 — Thu, 28 May 2026 09:46:39 +0000

Sound familiar? Two weeks of shipping, five minutes of “so what?” Three days on decks, fifteen minutes in the room. Often it’s not the work—it’s how the story is told: activity logs, tech-first narratives, risks saved for the Q&A.

pitchcraft isn’t about “writing reports.” It’s about why your impact doesn’t get recognized.

In the AI era, execution is commoditized; persuasion compounds. pitchcraft turns persuasion from a gift into a repeatable workflow:

Pick a scenario (kickoff, status, wrap-up, pitch, solution selling)
AI prompts for missing inputs and audience context
Draft against a 5-part structure centered on why they should care
Run a checklist: metric definitions, risk calls, alignment language

Built for: engineering leads, PMs reporting up, founders and sales engineers who need decisions—not nods.

Unlike generic AI writers: persuasion over logging; outcomes over task lists; structured intake and review—not one-shot prompts.

Open source · github.com/moshuying/pitchcraft · Try triggers: project kickoff, status update, pitch deck

🚀 From Zero to One: Building Your VSCode Cyclomatic Complexity Analysis Plugin

墨抒颖 — Sat, 06 Sep 2025 06:42:11 +0000

Must-read for developers: How to build a professional-grade code quality analysis tool

The plugin has been published to the VSCode marketplace, welcome to download and use: Code Cyclomatic Complexity

📖 Preface

In the fast-paced world of frontend development, code quality is often overlooked. Complex functions, nested conditional statements, lengthy logic chains... These "technical debts" accumulate as projects grow, ultimately affecting development efficiency and code maintainability.

Today, we will dive deep into how to build a VSCode Cyclomatic Complexity Analysis Plugin from scratch, which not only helps developers monitor code quality in real-time but also provides visual code health indicators for team collaboration.

🎯 What is Cyclomatic Complexity?

Cyclomatic Complexity is an important metric for measuring code complexity:

Base complexity: Each function starts with a value of 1
Conditional branches: Each if, for, while, case, etc. adds 1
Logical operators: &&, ||, ? :, etc. add 1
Exception handling: catch, finally, etc. add 1

Complexity levels:

🟢 1-5: Simple, easy to understand and maintain
🟡 6-10: Moderate, needs attention
🔴 11+: Complex, recommended for refactoring

🛠️ Technical Architecture Design

Core Module Division

src/
├── extension.ts              # Plugin entry point, lifecycle management
├── complexityAnalyzer.ts     # Core analysis engine
├── fileTreeProvider.ts       # Tree view data provider
├── fileDecoratorProvider.ts  # File decorator (display complexity numbers)
└── fileTypeHandlers.ts       # Multi-language file type handlers

Key Technology Stack

TypeScript: Type-safe JavaScript superset
VSCode API: Core interfaces for plugin development
AST Parsing: Abstract Syntax Tree analysis
File System: Recursive project file traversal
Caching Mechanism: Improve analysis performance

🔧 Core Implementation Analysis

1. Plugin Activation and Lifecycle Management

export function activate(context: vscode.ExtensionContext) {
  // Create core components
  const complexityAnalyzer = new ComplexityAnalyzer();
  const fileTreeProvider = new FileTreeProvider(complexityAnalyzer);
  const fileDecoratorProvider = new FileDecoratorProvider(complexityAnalyzer);

  // Register commands and views
  registerCommands(context, complexityAnalyzer, fileTreeProvider);
  registerViews(context, fileTreeProvider, fileDecoratorProvider);

  // Auto-analyze workspace
  initializeAnalysis(complexityAnalyzer, fileTreeProvider);
}

2. Multi-language File Type Support

export class FileTypeManager {
  private handlers = new Map<string, FileTypeHandler>();

  constructor() {
    this.registerHandler('javascript', new JavaScriptHandler());
    this.registerHandler('typescript', new TypeScriptHandler());
    this.registerHandler('vue', new VueHandler());
    this.registerHandler('html', new HTMLHandler());
    this.registerHandler('css', new CSSHandler());
  }

  analyzeFile(filePath: string, content: string): number {
    const handler = this.getHandler(filePath);
    return handler ? handler.calculateComplexity(content) : 0;
  }
}

3. Intelligent File Filtering System

private async loadGitignoreRules(folderPath: string): Promise<GitignoreRule[]> {
  // Read .gitignore file
  const gitignorePath = path.join(folderPath, '.gitignore');

  // Get VSCode configuration exclusion rules
  const config = vscode.workspace.getConfiguration('codeComplexity');
  const excludeFolders = config.get<string[]>('excludeFolders', []);

  // Merge rules and parse
  return this.parseGitignoreRules(rules);
}

4. Performance Optimization Strategies

Incremental Analysis: Only analyze modified files
Caching Mechanism: Avoid duplicate calculations
Async Processing: Don't block UI thread
Progress Feedback: Real-time analysis status display

🎨 User Experience Design

1. Explorer Integration

Display complexity numbers next to files with color coding:

🟢 Green: Complexity ≤ 5
🟡 Yellow: Complexity 6-10
🔴 Red: Complexity > 10

2. Dedicated Analysis Panel

Tree View: Organized by folders, supports sorting
Quick Actions: Right-click menu, one-click file opening
Real-time Updates: Auto re-analyze after file modifications

3. Status Bar Feedback

$(sync~spin) Analyzing cyclomatic complexity (15/100) [src/components]

📦 Plugin Configuration and Publishing

package.json Configuration

{
  "name": "vscode-cyclomatic-complexity",
  "displayName": "Code Cyclomatic Complexity",
  "description": "Display cyclomatic complexity of code files",
  "version": "0.0.6",
  "publisher": "your-publisher-name",
  "engines": {
    "vscode": "^1.74.0"
  },
  "categories": ["Other"],
  "activationEvents": ["onStartupFinished"],
  "contributes": {
    "commands": [...],
    "viewsContainers": [...],
    "views": [...],
    "menus": [...],
    "configuration": {...}
  }
}

Publishing Process

# Install publishing tool
npm install -g @vscode/vsce

# Compile project
npm run compile

# Package plugin
vsce package

# Publish to marketplace
vsce publish

🚀 Advanced Feature Implementation

1. Custom Complexity Rules

interface ComplexityRule {
  pattern: RegExp;
  weight: number;
  description: string;
}

const rules: ComplexityRule[] = [
  { pattern: /if\s*\(/, weight: 1, description: 'if statement' },
  { pattern: /for\s*\(/, weight: 1, description: 'for loop' },
  { pattern: /while\s*\(/, weight: 1, description: 'while loop' },
  { pattern: /catch\s*\(/, weight: 1, description: 'exception handling' },
  { pattern: /&&|\|\|/, weight: 1, description: 'logical operators' }
];

2. Team Collaboration Support

Configuration Files: Unified configuration in .vscode/settings.json
CI/CD Integration: Command-line tool support
Report Generation: Export analysis results

3. Extensibility Design

Plugin Architecture: Support for custom file type handlers
Rule Engine: Configurable complexity calculation rules
Theme Adaptation: Support for VSCode dark/light themes

📊 Real-world Application Scenarios

1. Code Review

In Pull Requests, team members can quickly identify high-complexity files and focus on code that needs refactoring.

2. Technical Debt Management

Regular analysis runs generate complexity reports, helping teams plan refactoring work.

3. New Developer Training

Through visual indicators, help new developers understand the importance of code quality.

4. Performance Optimization

Identify complex functions to provide data support for performance optimization.

🎯 Best Practice Recommendations

1. Development Phase

Early Integration: Introduce complexity analysis at project inception
Continuous Monitoring: Set up CI/CD pipelines for automatic checking
Team Consensus: Establish complexity threshold standards

2. Refactoring Strategy

Priority Sorting: Start refactoring from high-complexity files
Incremental Improvement: Avoid large-scale rewrites
Test Coverage: Ensure adequate testing before refactoring

3. Tool Selection

VSCode Plugin: Real-time feedback during development
Command-line Tool: CI/CD integration
Web Dashboard: Team collaboration and reporting

🔮 Future Development Directions

1. Intelligent Analysis

AI Assistance: Machine learning-based complexity prediction
Auto Refactoring: Intelligent code simplification suggestions
Pattern Recognition: Identify common anti-patterns

2. Ecosystem Integration

Git Integration: Deep integration with GitHub/GitLab
Project Management: Integration with Jira, Trello, and other tools
Monitoring Alerts: Automatic notifications for complexity violations

3. Multi-language Support

Backend Languages: Java, Python, C#, etc.
Mobile Development: Swift, Kotlin, etc.
Emerging Languages: Rust, Go, etc.

💡 Summary

Building a professional code quality analysis tool requires not only solid technical skills but also a deep understanding of developer needs. Through this detailed analysis, you should now have mastered:

✅ Core concepts and calculation methods of cyclomatic complexity
✅ Complete process of VSCode plugin development
✅ Technical implementation of multi-language file type handling
✅ Best practices for user experience design
✅ Performance optimization and extensibility design

Start your plugin development journey now! Make code quality visible, make development more efficient, and make team collaboration smoother.

This article is based on the open-source project vscode-cyclomatic-complexity, welcome to Star and contribute code!