Vue Code Order Hover

Для связи рекомендую использовать телеграм: @ByEfimovv

VS Code extension that shows function categories when hovering over functions in Vue files with <script setup>. Perfect for maintaining clean and organized Vue.js code structure!

✨ Features

• 🎯 Instant categorization - Hover over any function to see its category
• 📊 Order visualization - Shows the recommended position of each group
• 🔧 ESLint integration - Uses the same categorization logic as eslint-plugin-vue-code-order
• ⚙️ Configurable - Toggle descriptions and functionality through VS Code settings
• 🚀 Smart detection - Works with destructuring, await expressions, and complex patterns
• 🎨 Beautiful tooltips - Rich hover information with emojis and descriptions

🎬 Demo

When you hover over functions in your Vue <script setup> blocks, you'll see helpful tooltips:

Hovering over useRoute():

Vue Code Order Category: framework-init
🔧 Framework initialization - Vue, Nuxt, and core composables
Order position: 3

Hovering over ref():

Vue Code Order Category: variables
📊 Variables - Reactive state and references
Order position: 9

📋 Supported Categories

🚀 Usage

1. Install the extension from VS Code Marketplace
2. Open a Vue file with <script setup> block
3. Hover over any function (useRoute, computed, ref, etc.)
4. See the category tooltip with helpful information!

⚙️ Settings

Configure the extension behavior in VS Code settings:

• vueCodeOrderHover.enabled - Enable/disable hover tooltips (default: true)
• vueCodeOrderHover.showDescription - Show category descriptions (default: true)

📋 Examples

Here's what you'll see when hovering over different functions:

<script setup lang="ts">
// Hover over these functions to see categories:
const route = useRoute(); // 🔧 Framework initialization - Order: 3
const userStore = useUserStore(); // 🏪 Stores - Order: 4
const message = ref("Hello"); // 📊 Variables - Order: 9
const fullName = computed(() => `${firstName} ${lastName}`); // 🔄 Computed & Hooks - Order: 11
const { data } = await useAsyncData("users", fetchUsers); // 🌐 Server Requests - Order: 10

const handleSubmit = () => {
  // ⚡ App Functions - Order: 12
  console.log("Form submitted");
};

watch(message, (newValue) => {
  // 👀 Watchers & Listeners - Order: 14
  console.log("Message changed:", newValue);
});

onMounted(() => {
  // 🔄 App Lifecycle - Order: 15
  console.log("Component mounted");
});
</script>

🔧 Requirements

• VS Code 1.74.0 or newer
• Vue files with <script setup> blocks
• Works with Vue 3 and Composition API

🤝 Related Projects

• eslint-plugin-vue-code-order - ESLint plugin for automatic code order checking
• Perfect companion - Use both tools together for the best Vue.js development experience

📝 License

MIT

🐛 Issues & Feedback

Found a bug or have a suggestion? Please create an issue on GitHub.

Enjoy cleaner Vue.js code organization! 🎉