A VS Code extension for JavaFX development with FXML support.
Features
🎨 FXML Syntax Highlighting - Full syntax highlighting for .fxml files
🏗️ FXML Language Mode - To open .fxml file in Scene Builder, select 'Open in Scene Builder' from the context menu
🔧 Scene Builder Integration - Configure Scene Builder path and open FXML files directly in Scene Builder
📐 Formatter - You can use an XML formatter specifically designed for FXML
✏️ Linked Editing - Renaming an opening FXML tag also updates the matching closing tag
🚨 FXML Diagnostics - Surface missing controller classes and duplicate fx:id values directly in the Problems panel
💡 FXML Quick Fixes - Use the lightbulb on missing fx:id fields and missing onAction handlers to generate matching @FXML controller members
🔗 FXML → Controller & Resource Navigation - Ctrl+Click on fx:controller, onAction, fx:id, @image.png, or @style.css in FXML to jump to the corresponding controller code or referenced resource file
🔗 Controller → FXML Navigation - Ctrl+Click on @FXML annotated variables or methods in the Controller class to jump to the corresponding location in the FXML file
🔎 Find All References - Press Shift+F12 on an FXML fx:id to find $fxId usages in the current FXML file together with the matching controller field declaration
🔍 Workspace Symbols - Press Ctrl+T / Cmd+T to search fx:id values and matching @FXML field names across the workspace
💡 FXML Hover - Optionally show controller field and event handler comments on hover
🎨 JavaFX CSS IntelliSense - Get -fx- property completions, enum-like value suggestions, and hover details inside .css files and FXML style attributes, plus styleClass navigation/references/completion across workspace CSS files
📖 Built-in Help - Open a localized user guide from inside VS Code with the JavaFX: Show Help command
🌐 Internationalization - English, Chinese, Japanese language support
Usage
FXML Syntax Highlighting
Open any .fxml file and it will automatically use the FXML language mode with syntax highlighting.
Open in Scene Builder
Open an .fxml file in VS Code
Right-click in the editor or file explorer
Select "Open in Scene Builder"
FXML Formatting
Open an .fxml file
Use Shift+Alt+F (or your configured format shortcut) to format the document
Linked Editing
Rename an opening tag such as <Label> and VS Code will keep the matching closing tag </Label> in sync while you type
Linked editing is enabled by default for FXML files
Code Navigation
FXML → Controller:
Ctrl+Click on fx:controller="com.example.MyController" to open the controller class
Ctrl+Click on fx:id="myButton" to jump to the @FXML annotated field
Ctrl+Click on onAction="#handleClick" to jump to the @FXML annotated method
Ctrl+Click on image="@images/logo.png" or stylesheets="@styles/main.css" to open the referenced resource file relative to the current FXML file
Ctrl+Click on styleClass="primary-button" to jump to matching .primary-button selectors in workspace CSS files
Press Shift+F12 on fx:id="myButton" to list $myButton usages in the current FXML document and the matching controller field declaration
Controller → FXML:
Ctrl+Click on an @FXML annotated field to jump to the fx:id in the FXML file
Ctrl+Click on an @FXML annotated method to jump to the event handler in the FXML file
CSS → FXML:
Press Shift+F12 on a CSS selector such as .primary-button to list matching styleClass usages in workspace FXML files
Workspace Symbol Search
Press Ctrl+T (Windows/Linux) or Cmd+T (macOS)
Search for an FXML fx:id or a matching Java @FXML field name to jump to it from anywhere in the workspace
FXML Hover
Hovering fx:controller="com.example.MyController" shows the matching controller class comment
Hovering fx:id="myButton" shows the matching controller field comment, including inherited members
Hovering onAction="#handleClick" shows the matching controller method comment, including inherited members
Hover is disabled by default and can be enabled with a configurable delay
FXML Diagnostics
Missing fx:controller classes are reported as errors
fx:id values without matching controller fields are reported as warnings
Missing controller event handlers such as #handleClick are reported as errors
Duplicate fx:id values in the same FXML file are reported as errors
FXML Quick Fixes
Use Ctrl+. / Cmd+. on a missing fx:id warning to generate @FXML private <Type> <fxId>; in the controller
Use Ctrl+. / Cmd+. on a missing onAction handler error to generate @FXML private void <handler>(ActionEvent event) {} in the controller
JavaFX CSS IntelliSense
Type -fx- in a .css file or an FXML style attribute to see JavaFX-specific CSS properties such as -fx-background-color, -fx-font-size, and -fx-text-fill
Type inside an FXML styleClass="" attribute to complete CSS class names discovered from workspace .css files
After properties such as -fx-alignment:, completion suggests common enum-like values such as CENTER and TOP_LEFT
Selecting a JavaFX CSS value inserts one space after : and appends ;
Hover a JavaFX CSS property to see its syntax, default value, and where it applies
Help
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run JavaFX: Show Help
A localized user guide opens in the Markdown preview, matching your VS Code display language (English, Chinese, or Japanese) with an English fallback
