Vue Lifecycle Radar

A Visual Studio Code extension that provides advanced function and service call analysis and visualization specifically designed for Vue.js components.

Features

🔍 Vue Component Analysis

• Lifecycle Hook Detection: Automatically identifies and analyzes Vue lifecycle hooks (mounted, created, updated, etc.)
• Method Analysis: Detects Vue component methods and their relationships
• Function Call Mapping: Visualizes the flow of function calls within Vue components

🎯 Smart Hover Information

• Detailed Function Info: Hover over any function to see comprehensive details including:
  • Function type (Lifecycle Hook, Vue Method, or regular Function)
  • Parameters with types (required and optional)
  • Return types
  • Context information (class methods, nested functions)
  • Call trace and relationships

📊 Interactive Visualization

• Visual Flow Diagrams: Generate interactive diagrams showing function call relationships
• Lifecycle Flow: Specialized visualization for Vue component lifecycle hooks
• Navigation Support: Click on functions in the visualization to navigate to their implementation

⚡ Performance Optimized

• Smart Analysis: Only processes Vue files for optimal performance
• Progress Indicators: Shows analysis progress for large files
• Cached Results: Efficient caching for repeated analysis

Installation

1. Open Visual Studio Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Vue Lifecycle Radar"
4. Click Install

Usage

Basic Commands

Visualize Vue Lifecycle Radar Extension

• Keyboard Shortcut: Ctrl+8 (Windows/Linux) or Cmd+8 (Mac)

Hover Information

Simply hover over any function name in your Vue component to see detailed information about:

• Function parameters and types
• Return values
• Function relationships
• Context information

Supported File Types

This extension only works with Vue files (.vue). When used with other file types, you'll see a warning message.

Vue-Specific Features

Lifecycle Hook Analysis

The extension provides specialized analysis for Vue lifecycle hooks:

• beforeCreate, created
• beforeMount, mounted
• beforeUpdate, updated
• beforeDestroy, destroyed

Component Method Detection

Automatically identifies:

• Vue component methods
• Services

Example

<template>
  <div class="task-manager">
    <h1>Task Manager</h1>
    
    <div class="task-form">
      <input v-model="newTaskTitle" placeholder="Nueva tarea" />
      <button @click="addTask">Agregar</button>
    </div>

    <ul class="task-list">
      <li v-for="task in tasks" :key="task.id" class="task-item">
        <span :class="{ completed: task.completed }">{{ task.title }}</span>
        <button @click="toggleTask(task.id)">
          {{ task.completed ? 'Desmarcar' : 'Completar' }}
        </button>
        <button @click="deleteTask(task.id)">Eliminar</button>
      </li>
    </ul>

    <div class="stats">
      <p>Total: {{ totalTasks }} | Completadas: {{ completedTasks }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SimpleTaskManager",

  data() {
    return {
      newTaskTitle: "",
      tasks: []
    };
  },

  created() {
    console.log('Component created');
    this.loadInitialTasks();
  },

  mounted() {
    console.log('Component mounted');
    this.setupEventListeners();
  },

  computed: {
    totalTasks() {
      return this.tasks.length;
    },

    completedTasks() {
      return this.tasks.filter(task => task.completed).length;
    }
  },

  methods: {
    loadInitialTasks() {
      this.tasks = [
        { id: 1, title: 'Tarea de ejemplo', completed: false }
      ];
    },

    setupEventListeners() {
      console.log('Setting up event listeners');
    },

    addTask() {
      if (this.newTaskTitle.trim()) {
        const task = this.createTask(this.newTaskTitle);
        this.tasks.push(task);
        this.newTaskTitle = "";
        this.notifyChange("Task added");
      }
    },

    createTask(title) {
      return {
        id: Date.now(),
        title: title,
        completed: false
      };
    },

    toggleTask(taskId) {
      const task = this.findTask(taskId);
      if (task) {
        task.completed = !task.completed;
        this.notifyChange("Task updated");
      }
    },

    deleteTask(taskId) {
      const index = this.tasks.findIndex(task => task.id === taskId);
      if (index !== -1) {
        this.tasks.splice(index, 1);
        this.notifyChange("Task deleted");
      }
    },

    findTask(taskId) {
      return this.tasks.find(task => task.id === taskId);
    },

    notifyChange(message) {
      console.log(message);
    }
  }
};
</script>

Configuration

Download the official Vue extension in advance (https://marketplace.visualstudio.com/items?itemName=Vue.volar)

Requirements

• Visual Studio Code 1.60.0 or higher
• Vue files (.vue extension)
• Vue - Official Extension (https://marketplace.visualstudio.com/items?itemName=Vue.volar)

Known Issues

• Extension only supports Vue files
• Large files (>100KB) may take longer to analyze
• Requires proper Vue syntax for accurate analysis

Release Notes

0.0.6

• Added new requirements

0.0.5

• Changed logo and description

0.0.4

• Added support for Windows and Linux

0.0.3

• Restricted functionality to Vue files only
• Improved error messaging
• Enhanced Vue component analysis
• Added specialized Vue lifecycle visualization

0.0.2

• Added hover provider functionality
• Improved function relationship detection
• Enhanced visualization features

0.0.1

• Initial release
• Basic function call analysis
• Vue component support

Contributing

This extension is designed specifically for Vue.js development. If you encounter issues or have suggestions for Vue-specific features, please report them through the appropriate channels.

Author

Carlos Miret Fiuza
LinkedIn: https://www.linkedin.com/in/carlos-miret-fiuza-87026a52