Vue Comment Blocks

Stylish comment block snippets for Vue Composition API files.

1. Features

• Quickly add structured block comments to your Vue files
• Predefined blocks for Imports, Setup, State, etc.
• Empty block snippet for custom block titles

2. Why Use Block Comments?

In Vue 2, using the Options API naturally separated code into blocks like data, computed, methods, and watch.
However, the Composition API in Vue 3 is much more flexible: ref, computed, watch, onMounted, etc. can all be used inside a single setup() function.

This flexibility can make it easy for code responsibilities to get mixed together, making it harder to understand the structure—especially as your project grows or you use many composables.

Using Composition API block comments helps logically separate the code inside setup(), improving readability and maintainability.
You can quickly understand how this works by looking at the example below!

3. Example

<script setup lang="ts">
// ===================================================
// 🧠 Vue Core
// ===================================================
import { ref, computed, watch, onMounted } from "vue";
import { useRouter } from "vue-router";

// ===================================================
// 🧩 Components
// ===================================================
import Example1 from "@/components/Example1.vue";
import Example2 from "@/components/Example2.vue";
import Example3 from "@/components/Example3.vue";

// ===================================================
// 📐 Types / Interfaces
// ===================================================
interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
}

// ===================================================
// 🌐 API / Server Data
// ===================================================
import { getUserInfo, login, logout } from "@/api/example";

// ===================================================
// 📦 State
// ===================================================
const router = useRouter();
const userInfo = ref<User | null>(null);
const showTooltip = ref(false);

// ===================================================
// 🧮 Computed
// ===================================================
const userName = computed(() => userInfo.value?.name);

// ===================================================
// 🛠️ Actions
// ===================================================
async function init() {
  userInfo.value = await getUserInfo();
}

// ===================================================
// ⚙️ Methods
// ===================================================
function toggleTooltip() {
  showTooltip.value = !showTooltip.value;
}

// ===================================================
// 👀 Watchers
// ===================================================
watch(
  () => userName,
  (newVal) => {
    console.log("userName : ", newVal);
  }
);

// ===================================================
// 🚀 Lifecycle Hooks
// ===================================================
onMounted(async () => {
  await init();
});
</script>

4. Snippets

Section comments are recommended to be written in the following order to make code flow easier to understand:

1. Define Data

   • Imports
   • Props / Emits
   • State / Computed

2. Transform Data

   • Actions
   • Methods
   • Watches

3. Use Data

   • Lifecycle

The available block types are as follows:

📦 Imports

📥 Props / Emits

📦 State

🔨 Transform Data

🚀 Use Data

5. Installation

Using VS Code Marketplace

1. Open VS Code
2. Go to the Extensions panel
3. Search for Vue Comment Blocks
4. Click Install

Using CLI

You can also install the extension via the command line:

code --install-extension Y0UNGBLUD.vue-comment-blocks

6. Usage

1. Open a .vue file in VS Code.
2. Type the snippet prefix (e.g., block-imports, block-state, block-empty) and press Tab.
3. The snippet will expand into the corresponding block comment.

Note: All snippet prefixes start with block-.