Hey there, fellow developers! 👋
I’m thrilled to share with you an exciting feature we’ve recently added to the Kapeta app – a simple way to jump straight from the plan to the source code for that block in your IDE with just a click. This is not just a cool trick; it significantly optimizes our workflow, making our development process more efficient and integrated.
The Inspiration
As developers, we often find ourselves toggling between the app interface and our coding environment. This constant switching, although seemingly trivial, can disrupt our flow and productivity. That’s where our new feature comes in, bridging the gap between viewing and coding.
The Mechanics
The core of this new feature in the Kapeta app is a clever little library: @kapeta/electron-ide-opener. Originally part of the GitHub Desktop repository, this code was repackaged by us as a standalone library. Designed primarily for Electron apps, its versatility extends to any Node.js application. The library excels at detecting and opening files or folders in a variety of local IDEs, making it an ideal choice for our click-to-code functionality.
Integrating electron-ide-opener
First things first, you need to install the library:
npm install --save @kapeta/electron-ide-opener
Then you can import and utilize the functionalities as shown:
import { getAvailableEditors, findEditorOrDefault } from '@kapeta/electron-ide-opener';
const editors = await getAvailableEditors();
const vsCode = findEditorOrDefault('Visual Studio Code');
const defaultEditor = findEditorOrDefault(null);
Implementing in Kapeta
In the Kapeta app, we approached the implementation of this feature with user preferences in mind. We added a dedicated section in the app settings, allowing users to select their preferred IDE. This selection determines which editor launches when they click the “open in external editor” button in the plan view.
By leveraging electron-ide-opener, we can detect the available editors on the user’s machine. Once a user selects their preferred IDE in the settings, this choice is remembered. Then, whenever they click on the designated button in the plan view, it seamlessly opens the relevant source code file in their chosen IDE. This approach not only streamlines the workflow but also respects the individual preferences of our users, making their development experience more personalized and efficient.
Wrapping Up
This feature is a testament to the power of simple solutions to everyday problems. By leveraging electron-ide-opener, we’ve created a more connected and efficient development environment. I hope this inspires you to explore similar integrations in your projects, streamlining your workflow and enhancing productivity.
Happy coding! 🤓
