Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Mark MapNew to Visual Studio Code? Get it now.
Mark Map

Mark Map

wujingtao

|
84 installs
| (0) | Free
mark注释大纲
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

描述 Mark Map

如果你使用 vue3,你会不会也会一时想不起:

  • 变量应该写在哪里?

  • 函数应该写在哪里?

  • 计算属性写在哪里?

  • watch 写在哪里?

到头来代码混乱不堪。想做点啥,无处落脚。

Mark Map 是一个 VS Code 扩展,用于在代码中管理注释,并以列表视图的形式显示,我称之为注释大纲视图。

功能

  • 自动解析代码中的

    // MARK: > // TODO > // TAG > // DONE

注释,并在大纲视图中显示。

  • 主要解决 vue3 程序文件结构混乱的问题。
  • 点击大纲视图中的项,可以快速跳转到对应的代码行。
  • 因此使用此插件需要在 vue 中使用注释划分代码块,例如:
<!--  -->
<template>
  <div></div>
</template>

<script lang="ts" setup>
// MARK: import
import { onMounted } from "vue";

// MARK: emits
// const emits = defineEmits([]);

// MARK: props
// const props=defineProps({});

// MARK:interface

// MARK: params
// const loading = ref(false);

// MARK: computed

// MARK: watch

// MARK: func
/** @description 更新 */
const rfsPage = async () => {};

// MARK: expose

// MARK: hooks
onMounted(() => {
  rfsPage();
});
</script>

<style lang="scss" scoped></style>

安装

  1. 打开 VS Code。
  2. 在插件商店中搜索 Mark Map。
  3. 点击安装按钮。

使用方法

  1. 打开一个包含 MARK: 注释的代码文件。
  2. 在活动栏中找到 Mark Map活动栏 (类似地图定位图标)并点击。
  3. 在大纲视图中查看解析出的注释,并点击跳转到对应的代码行。

图片1

图片2

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft