Share My Creation [VS Code B4X IDE Companion]: Supercharging VS Code for B4X - How It Works & Why I Need It, You Might Too

Hi Fam

Let's unbox (and perhaps build together) this monster to be.

1773792414309.png


Quickly get it from your VS Code Extensions

1773793123071.png


Hello Fam!👋

This has been generated with AI. For now it focuses on b4a, will adopt it for other frameworks soon.

I've had myself into a pickle, I find myself using VSCode more with AI to work on my projects, so let's see this new B4X IntelliSense Extension for Visual Studio Code. It’s time to pull back the curtain. If you love the B4X framework (B4A, B4i, B4J, B4R) but want to leverage the massive ecosystem, layout, and speed of Visual Studio Code, this extension bridges the gap. bla bla bla bla...

This isn't just a basic syntax highlighter; it is a full-featured Language Server Protocol (LSP) integration that understands the B4X language structure. Here is a deep dive into what it does, how it works under the hood, and why it will revolutionize your workflow.

🧠 1. Smart Type Inference & Auto-Complete

Why use it: Writing code is much faster when your editor accurately predicts what properties, methods, and variables belong to the object you are typing.
How it works: The extension doesn't just guess; it actively reads your workspace and installation files to build a massive in-memory API index.
  • XML & B4X Library Parsing: It parses the xml, b4xlib in your Libraries/Additional Libraries files directly from your B4A installation and configured additional folders. It decodes the XML nodes (like <class>, <method>, and <property>) into a searchable index.
  • Workspace Scanning: It reads your .b4a project file to determine exactly which libraries and external shared modules your specific project uses.
  • Inference Engine: As you type, the extension tracks your Dim, Public, and Private declarations, as well as Sub parameters, to constantly infer the types of your variables. When you type a dot (.), it resolves the known class and instantly provides accurate member completion.
🚨 2. Real-Time Code Diagnostics & "Quick Fixes"

Why use it: Catch compilation errors before you even hit compile, saving you round-trip debugging time.
How it works: The extension continuously analyzes your active document. For example, B4X requires Type declarations to be placed inside Sub Class_Globals or Sub Process_Globals. The extension's diagnostic engine scans your lines, detecting if a Type is declared outside of these specific subroutines. If it finds a misplaced type, it throws a warning and offers a Code Action (Quick Fix) that will literally edit your document to automatically move the Type block into the correct Globals subroutine. It also supports modern refactoring features like "Extract Method".

(In most cases where AI generates the code, usually it created the Type outside of these subroutines, some AI tools still miss this part. So far thats the only compilation error it fixes, I hope more can come.)

🎨 3. Native IDE Theme Importing

Why use it: You want the modern power of VS Code, but your eyes are perfectly accustomed to your customized B4X IDE colors.
How it works: The extension includes a .vssettings theme importer that reads directly from the Themes folder in your B4A installation. It parses the XML color data from the B4X theme and maps specific B4X scopes (like 'User Types - Methods' or 'Keyword') directly into VS Code's textMateRules and token color customizations. It seamlessly generates and applies a native VS Code .json theme file that matches your B4X environment perfectly.

⚙️ 4. Seamless "Main" Code Syncing

Why use it: B4X .b4a files mix UI designer metadata with basic code, making them messy to edit in standard text editors.
How it works: The extension safely separates the code from the metadata. It reads your .b4a file and extracts everything after the @EndOfDesignText@ marker, saving it into a temporary .b4x file in your workspace. You edit this clean .b4x file in VS Code. When you save, a file system watcher automatically syncs your newly written code back into the original .b4a file, safely preserving the designer metadata while keeping a timestamped backup just in case.

🛠️ 5. Integrated Building & Auto-Backups

Why use it: You can compile, install, and backup without leaving the VS Code window.
How it works:
  • Auto-Backups: The extension reads your system-wide b4xV5.ini configuration. If AutoBackup is enabled, it spawns a hidden background PowerShell script that automatically backs up your B4A folder at the exact intervals specified in your INI file.
  • Building: By running the b4xIntellisense.installProject command, the extension locates your B4ABuilder.exe and your adb.exe paths, and executes a PowerShell build script to compile and push your app directly to your device or emulator.
To Do

  • Tick off some wishful thinking
  • Tick off bugs discovered during unboxing
  • Tick off AI intergration
  • Tick off some other dreams...

THIS HAS BEEN FUN & PAINFUL... ha ha ha..

#SharingTheGoodness


 

mrserv0

New Member
Hi Fam

Let's unbox (and perhaps build together) this monster to be.

View attachment 170662

Quickly get it from your VS Code Extensions

View attachment 170663

Hello Fam!👋

This has been generated with AI. For now it focuses on b4a, will adopt it for other frameworks soon.

I've had myself into a pickle, I find myself using VSCode more with AI to work on my projects, so let's see this new B4X IntelliSense Extension for Visual Studio Code. It’s time to pull back the curtain. If you love the B4X framework (B4A, B4i, B4J, B4R) but want to leverage the massive ecosystem, layout, and speed of Visual Studio Code, this extension bridges the gap. bla bla bla bla...

This isn't just a basic syntax highlighter; it is a full-featured Language Server Protocol (LSP) integration that understands the B4X language structure. Here is a deep dive into what it does, how it works under the hood, and why it will revolutionize your workflow.

🧠 1. Smart Type Inference & Auto-Complete

Why use it: Writing code is much faster when your editor accurately predicts what properties, methods, and variables belong to the object you are typing.
How it works: The extension doesn't just guess; it actively reads your workspace and installation files to build a massive in-memory API index.
  • XML & B4X Library Parsing: It parses the xml, b4xlib in your Libraries/Additional Libraries files directly from your B4A installation and configured additional folders. It decodes the XML nodes (like <class>, <method>, and <property>) into a searchable index.
  • Workspace Scanning: It reads your .b4a project file to determine exactly which libraries and external shared modules your specific project uses.
  • Inference Engine: As you type, the extension tracks your Dim, Public, and Private declarations, as well as Sub parameters, to constantly infer the types of your variables. When you type a dot (.), it resolves the known class and instantly provides accurate member completion.
🚨 2. Real-Time Code Diagnostics & "Quick Fixes"

Why use it: Catch compilation errors before you even hit compile, saving you round-trip debugging time.
How it works: The extension continuously analyzes your active document. For example, B4X requires Type declarations to be placed inside Sub Class_Globals or Sub Process_Globals. The extension's diagnostic engine scans your lines, detecting if a Type is declared outside of these specific subroutines. If it finds a misplaced type, it throws a warning and offers a Code Action (Quick Fix) that will literally edit your document to automatically move the Type block into the correct Globals subroutine. It also supports modern refactoring features like "Extract Method".

(In most cases where AI generates the code, usually it created the Type outside of these subroutines, some AI tools still miss this part. So far thats the only compilation error it fixes, I hope more can come.)

🎨 3. Native IDE Theme Importing

Why use it: You want the modern power of VS Code, but your eyes are perfectly accustomed to your customized B4X IDE colors.
How it works: The extension includes a .vssettings theme importer that reads directly from the Themes folder in your B4A installation. It parses the XML color data from the B4X theme and maps specific B4X scopes (like 'User Types - Methods' or 'Keyword') directly into VS Code's textMateRules and token color customizations. It seamlessly generates and applies a native VS Code .json theme file that matches your B4X environment perfectly.

⚙️ 4. Seamless "Main" Code Syncing

Why use it: B4X .b4a files mix UI designer metadata with basic code, making them messy to edit in standard text editors.
How it works: The extension safely separates the code from the metadata. It reads your .b4a file and extracts everything after the @EndOfDesignText@ marker, saving it into a temporary .b4x file in your workspace. You edit this clean .b4x file in VS Code. When you save, a file system watcher automatically syncs your newly written code back into the original .b4a file, safely preserving the designer metadata while keeping a timestamped backup just in case.

🛠️ 5. Integrated Building & Auto-Backups

Why use it: You can compile, install, and backup without leaving the VS Code window.
How it works:
  • Auto-Backups: The extension reads your system-wide b4xV5.ini configuration. If AutoBackup is enabled, it spawns a hidden background PowerShell script that automatically backs up your B4A folder at the exact intervals specified in your INI file.
  • Building: By running the b4xIntellisense.installProject command, the extension locates your B4ABuilder.exe and your adb.exe paths, and executes a PowerShell build script to compile and push your app directly to your device or emulator.
To Do

  • Tick off some wishful thinking
  • Tick off bugs discovered during unboxing
  • Tick off AI intergration
  • Tick off some other dreams...

THIS HAS BEEN FUN & PAINFUL... ha ha ha..

#SharingTheGoodness


What was your biggest pain point with the B4X extension by Jansen? It's hard to hear from the audio. the other one seems to cover most bases! Love your work btw
 

Mashiane

Expert
Licensed User
Longtime User
What was your biggest pain point with the B4X extension by Jansen?
Hi, I have not used Jansen's extension as yet. I did take a look a peek at his github repo though after, I coded mine and it is interesting and his is more simpler.

My initial thought about my extension was to make it dynamic, it should be able to build intellisense based on existing xml and b4xlibs (both internal & external libraries folder) and also including shared folders. It should also be able to build intellisense based on existing bas files in your project e.g. you have classes and code modules. I have custom view "classes" and static code modules that are referenced in my demo. So being able to have my custom views code showing up in intellisense when checking my demos was my ultimate goal.

I've also updated it now to work with b4j project files as I needed to ensure that b4a files work properly.

Its been an interesting learning curve anyway. Some kind of bucket-list tick off thing for me.

Ta!
 

Sandman

Expert
Licensed User
Longtime User
This isn't just a basic syntax highlighter; it is a full-featured Language Server Protocol (LSP) integration that understands the B4X language structure.
Can you explain on bit what this actually means? As we all know, B4X natively doesn't support LSP, what have you done to make your own LSP?
 

thetrueman

Active Member
This is wonderful... if it happens then it is same as effective as after AI the scene has been changed in every aspect for developers... great to see further pain outcome. Thanks.
 

Mashiane

Expert
Licensed User
Longtime User
Hi Fam!

A new version has been released, works with all platforms now, b4a, b4i, b4j and b4r.

1775549683759.png


Test it out and send word of your "wishes" and or bug reports. Please ensure you backup your project.

Important Note


You need to open a platform project first, the extension WILL NEVER WORK if you just open a single .bas file, it's not built for that.

Why? It scans your platform project file for all Modules & Libraries and only loads those to intellisense. It shows the progress of doing this on the bottom left status bar.

1775551689013.png


Ensure its "Ready" before you use.

1775551737213.png


Remember, this is just a companion tool (due to AI Agentic coding in VS Code), it's not a replacement of the b4x IDEs.

To access commands go to View > Command Pallete and type B4x...

1775551546740.png


#SharingTheGoodness
 
Top