B4J Tutorial [B4X] VS Code B4X IDE Companion — A Complete Tutorial for Cross Platform

Greetings...​

Introduction​

For a long time, developing with B4X meant staying inside the native B4X IDE. It is a great tool, but if you are one of the many developers who prefer Visual Studio Code as your daily editor, you were left without IntelliSense, proper navigation, code formatting, or any of the modern IDE features that make coding faster and more enjoyable.

VS Code B4X IDE Companion changes that. It is a VS Code extension that brings the full B4X development experience into Visual Studio Code — auto-complete, hover documentation, Go to Definition, Find All References, structural code formatting, build integration, and much more. Everything runs completely offline, reading directly from your existing B4X installation. Nothing to configure from scratch.

This tutorial will walk you through every major feature so that by the end you can use the extension to its full potential.

---

Requirements​

Before you install, make sure you have:

• Visual Studio Code version 1.95 or later
• An installed B4X platform — B4A, B4i, B4J, or B4R (or any combination)
• A B4X project with .bas / .b4x source files

That is all. You do not need to install Node.js separately, and you do not need to configure any library paths manually. The extension discovers everything automatically from your B4X installation.

---

Installation​

1. Open Visual Studio Code.
2. Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X).
3. Search for B4X IDE Companion.
4. Click Install.

Alternatively, download the .vsix file and install it manually via: Extensions panel → ⋯ menu → Install from VSIX…

Once installed, the extension activates automatically whenever you open a .bas or .b4x file.

---

Opening Your First B4X Project​

The most important first step is to open your project through the extension — not just drag-and-drop a folder into VS Code.

1. Press Ctrl+Shift+P to open the Command Palette.
2. Type B4X Companion: Open B4X Project… and press Enter.
3. A file picker opens. Navigate to your project and select the project file:
   • .b4a for Android projects
   • .b4i for iOS projects
   • .b4j for Java/Desktop projects
   • .b4r for Arduino/Raspberry Pi projects

After selecting your project, wait until the extension finishes loading. A status indicator shows on bottom left of your VSCode app.

Wait until this is indicating ...Ready before you can use the extension

Highlight: Context Menu (right click in code window)

When your .bas file is opened (click on left treeview, you can right click to show the context menu and access the B4X Companion context menu)

Rule #1: Always Backup your code first (the extension back-ups your project every 10 minutes)

The extension then performs several things automatically in sequence:

• Adds the project folder to your VS Code workspace
• Scans %APPDATA%\Anywhere Software\ to find your platform INI files
• Reads library folder paths from those INI files
• Parses the <Libraries> section of your project file to know which libraries to load
• Loads XML library descriptors for all declared libraries
• Extracts and indexes .b4xlib archives
• Starts the local Language Server in the background
• Applies your B4X IDE font and color theme as hints in VS Code

Tip: You only need to open your project this way once per session. The extension remembers the last opened project and automatically reloads IntelliSense on the next VS Code launch.

---

IntelliSense: Auto-Complete​

Once your project is loaded, auto-complete is available throughout your .bas files.

Keyword completions​

Start typing any B4X keyword and the completion list appears. All 70+ keywords are covered — If, For, Select, Try, Dim, Return, ExitSub, and more. Each completion includes a description of what it does.

Class and method completions​

When you type a class name followed by a dot, the extension resolves the type via the cross-file type inference engine and shows all available methods, properties, and fields from the matching library descriptor or workspace module.

Dim btn As Button
btn. ' <- completion list shows all Button methods and properties

Local variable and Sub completions​

Variables declared with Dim in the current Sub, and all Subs declared in the current file, are included in the completion list automatically. You do not need to be in the same scope — the extension indexes the entire current file.

Workspace-wide completions​

Classes and modules declared in other .bas files in your workspace are also available. If you define a custom class module and reference it in another file, completions for that class appear correctly.

Preprocessor directive completions​

Type # and a completion list appears for all B4X preprocessor directives: #If B4A, #Region, #End Region, AdditionalJar:, Event:, and more — immediately usable without memorising the exact syntax.

Triggering completions manually​

If the suggestion list does not appear automatically, press Ctrl+Space to trigger it at any time.

---

IntelliSense: Hover Documentation​

Hover your mouse cursor over any symbol — a Sub name, a class name, a method call, a variable — and a tooltip appears with full documentation.

For library classes and methods, the hover tooltip shows:

• The method signature with all parameters
• Return type
• A description from the library descriptor

For workspace Subs, the hover tooltip shows:

• The Sub signature
• Its location (file and line)
• Links to Go to Definition, Find All References, and Search Online

You can click those links directly from inside the hover tooltip without closing it or moving your cursor.

For B4X primitive types (String, Int, Boolean, Long, Float, Double, Byte), hover shows type documentation explaining the range and purpose of each type.

---

IntelliSense: Signature Help​

When you are typing arguments inside a Sub call, the extension shows a parameter hint bar at the top of the cursor. As you move through each argument separated by commas, the current parameter is highlighted.

ac.Initialize("ac", Me)
' ^-- hint shows: MessageSender As Object
This works for both library methods and workspace-defined Subs. It is triggered automatically when you type ( or ,. You can also trigger it manually with Ctrl+Shift+Space.

---

Code Navigation​

Go to Definition — F12​

Press F12 (or right-click → B4X Companion → Go to Definition) on any symbol to jump to its definition.

The extension resolves in the following order:

1. Local Sub or Type in the current file
2. Sub defined in another .bas module in the workspace
3. Method in an XML library descriptor
4. Class defined in the workspace
5. Class defined in an XML library

This means that pressing F12 on a Sub from another module, a library class, or your own custom class module all work correctly.

Peek Definition — Alt+F12​

Press Alt+F12 to open an inline peek window showing the definition without navigating away from your current position. The definition appears embedded in the editor. Press Escape to close it.

Find All References — Shift+F12​

Press Shift+F12 on any symbol to find every place it is used. Unlike many editors, this extension searches all .bas and .b4x files on disk in your workspace — not just the files you currently have open. Results appear in VS Code's native References panel, grouped by file with exact line numbers.

Document Symbol Outline — Ctrl+Shift+O​

Press Ctrl+Shift+O to open a fuzzy-searchable outline of the current file. It lists every Sub, Type, Region, and global variable in the file with their line positions. Selecting an entry jumps directly to it. This is the fastest way to navigate to a specific Sub in a large module.

Workspace Symbol Search — Ctrl+T​

Press Ctrl+T to search symbols across the entire workspace and all loaded XML libraries at once. Type any part of a name and matching Subs, classes, methods, and properties appear in a scrollable picker. Up to 500 symbols are returned, covering both your own code and library APIs together.

---

Rename Symbol — F2​

Press F2 on any Sub name, Type name, or variable to rename it across all project files in one step.

The rename is case-preserving: if the original symbol is written as MYVAR in one place and MyVar in another, each occurrence is renamed in the matching case style automatically. You will see a preview of all affected files before the rename is applied.

---

Code Lens — Inline Reference Counts​

Above each Sub declaration you will see a small line like:

3 references (document) · 8 references (workspace)
This is the Code Lens display. It shows how many times that Sub is called in the current file and across the full workspace. Clicking the count triggers Find All References immediately, opening the full reference list in the panel below.

This is especially useful for identifying unused Subs or understanding how widely a Sub is used across a large project.

---

Code Formatting​

Format Document — Shift+Alt+F​

Press Shift+Alt+F (or right-click → B4X Companion → Format Document) to apply structural formatting to the entire file.

The formatter handles:

• Block indentation for Sub/End Sub, If/Else If/Else/End If, For/Next, Select Case/Case/End Select, Try/Catch/End Try, Do/Loop, While/Loop, #Region/#End Region, and #If/#End If
• Keyword casing — normalises end sub to End Sub, dim to Dim, if to If, etc. ALLCAPS identifiers (like SQL_QUERY) are left unchanged
• Blank line management — collapses multiple consecutive blank lines into one, and ensures one blank line before each Sub
• String and comment protection — content inside "double-quoted strings" and 'comment lines is never modified

If your project has a designer-generated #EndOfDesignText@ header at the top, the formatter leaves everything above that line untouched.

Format Selection​

Select a range of lines and use right-click → B4X Companion → Format Selection to format only the selected block.

Un-Format Document​

Right-click → B4X Companion → Un-Format Document removes all leading indentation from every line, left-aligning the entire file. This is useful if you need to paste code into the native B4X IDE which has its own indentation engine.

Remove Blank Lines​

Right-click → B4X Companion → Remove Blank Lines removes every empty line in the file, compacting it into a single continuous block. You can follow this with Format Document to re-apply spacing and indentation cleanly.

Remove Comments​

Right-click → B4X Companion → Remove Comments deletes every line that begins with ' (B4X comment style). The formatter is applied automatically afterward. This is useful for sharing clean production code without leaving debug notes behind.

---

Block Comments​

Select one or more lines and use:

• Block Comment — adds ' to the start of each selected line
• Un-Block Comment — removes the leading ' from each selected line

Blank lines and lines that are already commented/uncommented in the opposite direction are skipped gracefully. These are available in the right-click B4X Companion submenu.

---

Code Snippets​

The extension includes over 100 code snippets for common B4X patterns. Type the snippet prefix and press Tab to expand it.

Some of the most useful ones:

Prefix	Expands to
sub	Basic Sub / End Sub block
pubsub	Public Sub template
privsub	Private Sub template
eventsub	Event Sub template
if	If / End If block
ife	If / Else / End If block
foreach	For Each … In … Next loop
select	Select Case / Case / End Select block
try	Try / Catch / End Try block
type	Type declaration block
b4xpage	Full B4XPage template
customview	Custom view template

Experiment with short prefixes followed by Tab — there are snippets for the entire B4X toolkit.

---

Auto-Close Keywords​

When you finish typing a block opener and press Enter, the extension automatically inserts the matching closing keyword on a new line below:

You type	Auto-inserted
Sub MySub + Enter	End Sub
If condition Then + Enter	End If
For i = 1 To 10 + Enter	Next
Select sVar + Enter	End Select
Try + Enter	End Try

This keeps your blocks closed and ready to fill in without manual typing.

---

Diagnostics and Code Actions​

Type Placement Validation​

B4X requires that Type declarations be placed inside Class_Globals or Process_Globals. If you accidentally place a Type block outside those scopes, the extension will underline it with a warning in the editor.

Press Ctrl+. (or click the lightbulb icon) and choose Move Type to Class_Globals to let the extension automatically move the block to the correct location with a single click.

CallSub Validation​

When you use CallSub, CallSubDelayed, or CallSub3 to invoke a Sub by name (as a string), the extension validates that the target Sub actually exists in your project. If not, a warning is shown under the call.

CallSub(Me, "Button1_Click") ' <- warned if Button1_Click doesn't exist
This catches a common source of silent runtime errors — calling a Sub that was renamed or deleted — before you ever run the app.

Extract Method​

Select a block of code you want to refactor into its own Sub, then press Ctrl+. and choose Extract Method. The extension:

1. Analyses the selected code to infer which variables need to be passed as parameters
2. Creates a new Sub with the inferred parameter list
3. Shows a preview of the result before applying

This is available in both the context menu under B4X Companion → Quick Fix and via the Ctrl+. shortcut.

---

Code Folding​

The editor lets you collapse and expand any of the following block types by clicking the fold gutter arrow or pressing Ctrl+Shift+[:

• Sub / End Sub
• If / End If
• For / Next
• Select Case / End Select
• Try / Catch / End Try
• Do / Loop
• While / Loop
• Type / End Type
• #Region / #End Region

Large files with many Subs become much easier to navigate when you can fold down the Subs you are not currently working on.

---

Search Online​

Right-click on any word in your code and choose B4X Companion → Search Online. This opens a browser tab with a B4X forum search pre-filtered for your platform (B4A, B4J, B4i, or B4R) and the word under the cursor as the search query. It is the fastest way to look up how a library class or method is used by the community.

---

Build and Install​

Once your project is open, you can trigger a full build and device install without leaving VS Code.

Press Ctrl+Shift+P → B4X Companion: Build & Install Project.

• For B4A projects: calls B4ABuilder.exe, compiles the project, and pushes the resulting APK to a connected Android device via adb
• For B4J projects: calls B4JBuilder.exe and builds the JAR

The build output appears in the VS Code terminal panel. Build errors are shown inline. This requires that your B4X platform installation path is correctly detected (or set via b4xIntellisense.b4aInstallPath in settings).

---

Developer Tools​

Capture GIF from Device​

Ctrl+Shift+P → B4X Companion: Capture GIF from Device

Records a GIF video from a connected Android device using adb and ffmpeg. Useful for creating demo videos or bug reports. The GIF is saved to your project folder.

Requires adb to be on your system PATH and ffmpeg installed.

Capture Screenshots​

Ctrl+Shift+P → B4X Companion: Capture Screenshots (Scroll)

Captures a sequence of screenshots from a connected Android device, intended for scrolling content. Screenshots are saved to your project folder.

---

Theme Import from B4X IDE​

If you have customised the color theme inside your native B4X IDE and want the same colours in VS Code:

1. Press Ctrl+Shift+P → B4X Companion: Import Theme From B4A Install
2. A picker shows all .vssettings theme files from your B4A installation's Themes/ folder
3. Select a theme and it is imported and applied to VS Code

Note: Theme import is best-effort. Most standard B4A themes translate well, but some custom colour mappings may not have a direct VS Code equivalent.

---

Settings Reference​

All settings are available at File → Preferences → Settings → search B4X Companion. Here are the key ones to know:

Setting	What it controls
b4aIniPath	Override the auto-detected B4A INI path. Leave blank for automatic detection.
b4jIniPath	Override the auto-detected B4J INI path.
b4iIniPath	Override the auto-detected B4i INI path.
b4rIniPath	Override the auto-detected B4R INI path.
b4aInstallPath	Path to B4A installation folder (needed for Build & Install and theme import).
autoApplyIni	Whether to apply font/theme hints from INI automatically. Options: prompt, always, never.
autoAddProjectFolderOnOpen	Add the project folder to the workspace when opening a project. Default: true.
autoLoadProjectAssets	Automatically load libraries and start the LSP after opening a project. Default: true.
autoBackupInterval	How often (in milliseconds) to auto-backup the project folder. Default: 600000 (10 minutes).
extractMethod.previewBehavior	How Extract Method shows results: prompt, autoApply, or alwaysPreview.
preferLiveSources	Use live workspace and XML sources rather than the bundled API index. Default: true.
debug	Enable a timestamped debug log file for diagnosing extension issues.

For most users, the defaults work without any changes. You only need to touch these settings if your B4X installation is in a non-standard location.

---

How Auto-Discovery Works​

You may wonder how the extension finds your libraries without any configuration. Here is what happens under the hood:

When you open a project, the extension scans %APPDATA%\Anywhere Software\ and looks for each platform's INI file:

Platform	Folder	INI File
B4A	Basic4android\	b4xV5.ini
B4i	B4i\	b4xV5.ini
B4J	B4J\	b4xV5.ini
B4R	B4R\	b4xV5.ini

From each INI file it reads the LibrariesFolder and AdditionalLibrariesFolder paths, then loads XML descriptors for only the libraries declared in your project's <Libraries> section. It does not load the entire library catalogue — only what your project actually uses — which keeps IntelliSense fast and relevant.

Parsed library metadata is cached in a persistent SQLite database so subsequent loads are near-instant.

---

Known Limitations​

• The XML parser does not currently process <event>, <objectwrapper>, or <owner> elements from library descriptors. Some specialised library metadata may not appear in completions.
• Theme import from .vssettings is best-effort. Highly customised B4A themes may not translate perfectly.

---

Conclusion​

VS Code B4X IDE Companion brings the complete developer toolkit that B4X developers deserve: real IntelliSense, reliable navigation, structural formatting, safety diagnostics, effortless refactoring, and build integration — all working offline from your existing installation with zero manual configuration.

Open your project, start typing, and let the extension handle the rest.

If you encounter any issues or have feature requests, post in the B4X forum thread or open an issue on the extension repository. The extension is actively developed and community feedback directly shapes what comes next.

Happy coding.