Codemarks — Swift‑style `// MARK:` Sections for JS/TS

Scan files faster with foldable MARK sections, clean visual separators, and customizable label styling for JavaScript, TypeScript, and React (JSX/TSX).

Features

Region folding with // MARK: comments (code folding / region folding).
Open a section with // MARK: - Section and close with // MARK: Section -.
Draw visual separators with configurable borders and style the // MARK: label.
Updates live as you type; lightweight, zero config, theme‑aware defaults.

How It Works

Codemarks looks for lines that start with // MARK: and interprets leading/trailing dashes:

// MARK: - Section opens a foldable region.
// MARK: Section - closes a region with the same label.
// MARK: - Section - draws both top/bottom borders and opens a new region.

Sections fold until the next // MARK: or the end of file, unless you explicitly close the matching section with the trailing dash form.

Example (TypeScript):

// MARK: - API
export async function fetchUser() {}

// MARK: - UI -
// MARK: - Components
function Header() {}

// MARK: Utilities -
function formatName() {}

Supported Languages

typescript, javascript, typescriptreact (TSX), javascriptreact (JSX)

Commands

codemarks.toggle — Toggle Codemarks highlighting on/off.

Settings

Add any of the following to your settings.json:

{
  "codemarks.enable": true,
  // Empty value falls back to theme color
  "codemarks.borderColor": "#3b82f6",
  "codemarks.labelColor": "#111827",
  // Accepts CSS values e.g. "bold", "600", "normal"
  "codemarks.labelFontWeight": "700"
}

Note: Leave a field empty to inherit sensible theme defaults.

Installation

Install from the VS Code Marketplace: search for "Codemarks" or visit the link above.

Why Codemarks?

Familiar, Swift‑style // MARK: sections without changing your stack.
Clear visual separators that make large files scannable.
Simple, fast, and focused on JS/TS workflows.

Contributing

Feedback and PRs are welcome. Use GitHub Issues for bugs and feature requests.

License

AGPL‑3.0. See LICENSE or https://github.com/omerasafyildirim/codemarks-vscode/blob/HEAD/LICENSE

Codemarks

Ömer Asaf Yıldırım

Codemarks — Swift‑style // MARK: Sections for JS/TS