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 and TypeScript 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, and CJS 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 or TypeScript 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)
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