Qalab (قالب) - VS Code Extension

Qalab (Arabic for "Template") is a modern, high-performance templating engine extension for VS Code, specifically designed for Qumra Cloud storefront development. Inspired by the flexibility of Nunjucks, Qalab provides a rich set of features to streamline your e-commerce development workflow.

🚀 Features

💎 Intelligent Autocomplete

Get instant, context-aware suggestions for Nunjucks-style tags ({% %}), output blocks ({{ }}), and comments ({# #}).

🏷️ Custom Tag Support

Deep integration for specialized Qumra tags, including:

• UI Components: {% ui 'component_name' %} with automatic file discovery.
• Forms: {% form 'form_type' %} with predictive type suggestions.
• Templates: {% template 'template_name' %} for modular rendering.
• Widgets & Pages: Accurate suggestions for widget and page blocks.

📦 Rich Variable Tree

Full autocomplete support for the entire Qumra data model:

• Products & Collections: Access titles, prices, images, and metadata.
• Cart & Orders: Real-time suggestions for cart items, totals, and statuses.
• Customer Profiles: Quick access to customer names, emails, and address fields.
• Localization: Intelligent keys for multi-language support.

🛠️ Powerful Filters

Comprehensive documentation and autocomplete for all supported Nunjucks filters, ensuring data transformation is seamless.

📝 Smart snippets

Speed up your development with built-in snippets for common logic:

• if/else conditions
• for loops
• set variables
• block/extends inheritance

🔍 JSON Settings Validation

Validation and autocomplete support for templates-settings.json, ensuring your store configuration is always valid.

🎨 Professional Syntax Highlighting

Enjoy a beautiful coding experience with custom TextMate grammars designed to make your Nunjucks and HTML structure clear and readable.

⌨️ Installation

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Search for Qalab.
4. Click Install.
5. Restart VS Code or reload the window to activate the language support.

🏗️ Development

To build the extension locally:

# Install dependencies
npm install

# Compile the TypeScript source
npm run compile

# Run the extension
# Press F5 in VS Code to open a new window with the extension loaded.

🌐 Community & Support

• Publisher: Qumra
• Website: Qumra.cloud
• Email: support@qumra.cloud

📄 License

This extension is licensed under the MIT License.