VS Code If-End Marker

Never lose track of which if statement you're closing again! 🎯

A lightweight VS Code extension that displays subtle, inline markers showing the condition of if statements at their closing braces. Perfect for navigating complex conditional logic in JavaScript, TypeScript, C, and C++ projects.

Demo

Extension Screenshot

✨ Why If-End Marker?

Ever found yourself scrolling up to remember what condition that closing brace belongs to? If-End Marker solves this by displaying the original condition right where you need it - at the closing brace.

if (user.isAuthenticated && 
    user.hasPermission('admin') && 
    !user.accountLocked) {
    // ... 50 lines of code ...
    
    performAdminAction();
    updateAuditLog();
} // user.isAuthenticated && user.hasPermission('admin') &&...
  ↑ This appears automatically!

🚀 Features

🔍 Smart Detection: Automatically shows markers for multi-line if statements
🎨 Theme Integration: Markers adapt to your VS Code theme using native inlay hint colors
⚡ Blazing Fast: Optimized for large codebases with smart caching and viewport rendering
🛠️ Fully Configurable: Customize when and how markers appear
📝 Multi-language Support: Works with JS, TS, JSX, TSX, MJS, CJS, C, and C++ files

📦 Installation

From VS Code Marketplace

Open VS Code
Press Ctrl+P / Cmd+P to open the Quick Open dialog
Type ext install shipkit.vscode-if-end-marker
Press Enter

From VSIX Package

Download the latest .vsix file from the Releases page
Open VS Code
Press Ctrl+Shift+P / Cmd+Shift+P
Type "Install from VSIX" and select the command
Choose the downloaded .vsix file

Development Installation

Clone this repository:

git clone https://github.com/lacymorrow/vscode-if-end-marker.git
cd vscode-if-end-marker

Install dependencies:
```
npm install
```
Compile the extension:
```
npm run compile
```

Package and install:

npm run package
code --install-extension vscode-if-end-marker-*.vsix

💡 Usage

The extension activates automatically when you open JavaScript, TypeScript, C, or C++ files. Markers will appear at the end of if statements that span multiple lines.

Command Palette Commands

Access these commands through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

If-End Marker: Toggle Markers - Toggle the extension on/off
If-End Marker: Enable Markers - Enable the extension
If-End Marker: Disable Markers - Disable the extension

Example

if (userIsLoggedIn && 
    hasPermission &&
    !isExpired) {
    // Your code here
    performAction();
    updateUI();
} // userIsLoggedIn && hasPermission &&...

⚙️ Configuration

Configure the extension through VS Code settings (Ctrl+, / Cmd+,):

Setting	Type	Default	Description
`vscodeIfEndMarker.enabled`	boolean	`true`	Enable/disable the extension
`vscodeIfEndMarker.maxConditionLength`	number	`50`	Maximum characters to display from the condition
`vscodeIfEndMarker.maxFileSize`	number	`500000`	Maximum file size (in characters) to process
`vscodeIfEndMarker.debounceDelay`	number	`300`	Delay in milliseconds before updating decorations
`vscodeIfEndMarker.minLineCount`	number	`4`	Minimum lines an if statement must span

Example Configuration

{
  "vscodeIfEndMarker.enabled": true,
  "vscodeIfEndMarker.maxConditionLength": 60,
  "vscodeIfEndMarker.maxFileSize": 1000000,
  "vscodeIfEndMarker.debounceDelay": 400,
  "vscodeIfEndMarker.minLineCount": 3
}

🏃‍♂️ Performance

The extension is optimized for performance with:

Caching: Parse results are cached and reused when possible
Viewport-based rendering: Only processes visible code
Debouncing: Updates are delayed during rapid typing
File size limits: Large files can be automatically skipped
Optimized parsing: Uses efficient string operations and pre-compiled regex

Performance Tips

For very large files, increase maxFileSize or set to 0 to disable the limit
Increase debounceDelay if you experience lag during typing
Adjust minLineCount to control when markers appear

🧑‍💻 Development

Prerequisites

Node.js 16.x or higher
VS Code 1.74.0 or higher

Building from Source

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

# Run linting
npm run lint

# Package extension
npm run package

Testing

# Run tests
npm test

Publishing

This project uses automated versioning and changelog generation based on commit messages.

# Automatic version bump based on commits
npm run release

# Force specific version bump
npm run release:patch  # 1.0.0 -> 1.0.1
npm run release:minor  # 1.0.0 -> 1.1.0
npm run release:major  # 1.0.0 -> 2.0.0

Commit Message Format

Follow Conventional Commits:

feat: Add new feature → Minor version bump
fix: Fix bug → Patch version bump
feat!: Breaking change → Major version bump
perf: Improve performance → Patch version bump
docs: Update README → No version bump
chore: Update dependencies → No version bump

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines before submitting PRs.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Workflow

Make your changes
Run npm run compile to build
Press F5 in VS Code to launch a new Extension Development Host
Test your changes
Run npm run lint to check for issues

🐛 Known Issues

Complex nested if statements may not always be parsed correctly
The parser uses a regex-based approach which may miss some edge cases
Conditions containing string literals with parentheses might be truncated incorrectly

🔧 Troubleshooting

Markers not appearing

Check if the extension is enabled in settings
Ensure your if statement spans at least 4 lines (configurable)
Verify the file type is supported (JS/TS/JSX/TSX/C/C++)
Try reloading VS Code (Ctrl+R / Cmd+R)

Performance issues

If you experience performance issues with large files:

Consider increasing vscodeIfEndMarker.maxFileSize
Temporarily disable the extension for very large files
Report the issue with file details

📝 Releases

See the Releases page for a full changelog. Each release includes:

Automated changelog from commit messages
Pre-built .vsix file for manual installation
Source code archives

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Inspired by similar features in JetBrains IDEs
Built with the VS Code Extension API
Theme-aware styling adapted from VS Code's inlay hints

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Marketplace: VS Code Marketplace Page

Made with ❤️ by Shipkit • Lacy Morrow

Report Bug • Request Feature • Rate on Marketplace

If End Marker

Shipkit