Tekkom Elektra

Version: 1.3.0 Publisher: tekkom VS Code Extension

Overview

Tekkom Elektra is a VS Code extension designed to make Flask development faster and easier by linking backend and frontend files seamlessly.

It provides:

1. Connected Files View: Quickly navigate between related .py, .scss, .js and .html files.
2. Live SCSS/JS Reload: Automatically recompiles SCSS and updates CSS and JS in the browser on save without refreshing.
3. File Decorations: Highlights active files and their connected siblings in the Explorer.

Features

Connected Files

• Detects and shows related files automatically when you open a Python, SCSS, JS or HTML file.
• Click on a connected file to open it; missing files can be created on the fly.

Live SCSS/JS Reload

• Automatically notifies your Flask server when .scss or .js files are saved (stylesheets live as .scss in frontend/css/; the server recompiles them with Dart Sass). Saving a partial like _variables.scss also triggers a reload.
• The browser updates connected CSS/JS immediately using Socket.IO, no refresh required.

File Decorations

• Active file: green dot.
• Connected siblings: yellow dot.

Usage

1. Open a Python file (or frontend file) in your workspace.
2. Open the Connected Files view in the Explorer panel.
3. Click on any connected SCSS/JS file to open it.
4. Edit SCSS/JS files—changes are pushed live to the browser.

Works out of the box with a Flask server running Flask-SocketIO.

Requirements

• VS Code ≥ 1.104.0
• Flask project with Python 3.10+
• Flask-SocketIO server running

Contributing

• Clone the repository.
• Make changes.
• Compile with npm install and npm run compile.
• Test in VS Code (F5) before publishing updates.

License

MIT License