Intuitive and Efficient VSCode Minimap Positioning Comments MARK

In modern development scenarios with fast iteration cycles, efficiency is always the core pursuit of front-end developers. As the business complexity of Vue projects increases, the number of lines of code grows. Single files with thousands of lines are already the norm—just after writing a long section of template logic, you need to go to the script to modify a deeply nested method. The process of dragging the scrollbar back and forth to find code directly interrupts the smooth development rhythm.

MARK Minimap Positioning Comments

I've tried many mainstream solutions before: Using VSCode's built-in outline view to jump is not intuitive—you have to scan the list for a long time to find a method; Manually adding bookmarks to mark frequently used positions becomes confusing when there are many methods in a project, and maintaining bookmarks takes extra time, adding an extra layer of redundancy. It wasn't until I fully understood the MARK comment that I maximized the efficiency of locating methods in long files.

Usage

1. Ensure Minimap (code thumbnail) is enabled. VSCode's right-side Minimap is the visual basis for quick positioning. If it's not displayed, check the setting: editor.minimap.enabled. If its value is true, it's on; false means it's off. VSCode defaults to true on startup.

2. Add MARK comments in the code

// MARK: User login logic processing
function handleLogin() {
  // ...
}

/**
 * MARK: - Get user detailed information
 */
async function fetchUserInfo() {
  // ...
}

<!-- MARK: Top navigation bar area -->
<nav>...</nav>

<!-- MARK: - Main data display table -->
<table>...</table>

At this point, the corresponding method font will appear on the VSCode minimap, and it supports Chinese;

Tips

You can also go to "Settings" > "Editor" > "Minimap" > "Mark Section Header Regular Expression" in the "Mark" section header regular expression. It can recognize the end of inline comments and remove trailing spaces.

Add separator lines: add "-" between MARK and the text

// MARK: xxxxxx 
// MARK: - xxxxxx 

Provide some regex examples

Default:

\bMARK:\s*(?<separator>-?)\s*(?<label>.*)$

\bMARK:\s*(?<separator>-?)\s*(?<label>.*?)(?:\s*(?:(?:[*]\/)|(?:-{2,}>)|(?:#>)|$))

\bMARK:\s*(?<separator>-?)\s*(?<label>\w*?)(?:\s*(?:(?!\w)|(?:[*]\/)|(?:-{2,}>)|(?:#>)|$))

Summary

By enabling Minimap and standardizing the use of // MARK: or <!-- MARK: --> comments, you will transform the originally boring code scrollbar into a "map" with clear road signs, completely solving the problem of locating methods in long files.