Table of Contents
About The Project
webstorm-vento is the plugin which integrates the Vento Template Engine with JetBrain's
IntelliJ Ultimate and WebStorm IDEs.
Features
Implemented
- syntax highlighting
- syntax checking
- auto-completion (experimental and needs improvement)
- front-matter support (disableable in settings if not wanted)
- fragments support
- formatting (basic indenting support)
- filepath auto-completion and validity verification for layout, include, and import blocks
- comment toggling vento blocks. Use
⌥+⇧+⌘+/ on OSX, or ⌥+⇧+ctrl+/ on Windows.
- support for destructured variables in
set blocks in Vento 2.2
- support for the
default block in Vento 2.3
- support for data references in
layout and include blocks in Vento 2.3
[!IMPORTANT]
Note to plugin developers:
- You can use IntelliJ Community or Ultimate edition for development.
- Installing the built plugin in IntelliJ Ultimate edition or Webstorm.
- The plugin is tested with Webstorm 2024 and 2025 and IntelliJ IDEA Ultimate 2024 and 2025.
Installation
Usage
Design
The plugin is based on the JetBrains Platform Plugin Template. The Jetbrains Plugin SDK is a valuable place to understand how to build a plugin for IntelliJ IDEA.
Thanks to the opensource Handlebars plugin, I was able to learn and resolve some issues with the syntax highlighting. To be honest, I shamelessly coppied some code from the plugin before I understood how it worked!
The best entry point into the implementation is the plugin.xml.
Lexer
The JFlex implementation of the lexer is located in the src/main/jflex directory. The Lexer gets generated at build time in src/main/gen. It is based on JFlex. Be careful to understand how Jetbrains uses the lexer that is generated. There are some significant differences. See Lexer Implementation in SDK docs.
Vento lexing design diagrams
Parsing
Conceptually, parsing is split into two parts. The base of a vento file is assumed to be an HTML document. All processing is handed over to the built-in Jetbrains HTML support. The Vento plugin takes over when the vento specific syntax is encountered.
Dependencies
Most of the following dependencies are provided automatically when Gradle is used to build the plugin.
- Vento >= v2
- Deno >= v2.3
- IntelliJ IDEA Community or Ultimate (for now only tested with 2026.2.*)
- JDK v21
- Gradle v9
- Bundled JetBrains JavaScript & TypeScript plug-in
Recommended
- install ktlint and the prePushHook to make sure your code
is formatted correctly.
Build
- Clone the repository
- Run
./gradlew buildPlugin
- The plugin will be built in
build/distributions
- Install the plugin archive found in the
build/distributions directory
run tests
./gradlew test
verify Jetbrains platform compatibility
./gradlew verifyPlugin
build without caches
./gradlew clean buildPLugin --no-build-cache --no-configuration-cache
clearing caches
[!TIP]
The Jetbrains SDK depends on a lot of magical dependencies to be able to run its own IDE's in development mode. So
sometimes there is no choice but to use the nuclear option to get a clean slate. This is likely to happen if you start
switching the platform being targeted by the plugin in gradle.properties or if you change the version of the
JetBrains SDK in build.gradle.kts.
./gradlew --stop ## stop the gradle daemon
rm -rf ~/.gradle/caches/ ## delete all caches
AI Disclosure
Development of this project incorporated assistance from AI tools including OpenAI, and JetBrains AI tooling.
These tools are used for:
- Prototyping and generating initial drafts of code
- Refactoring and optimization suggestions
- Writing or improving documentation
- Exploring design patterns and solving technical issues
Humans perform all final decisions, implementations, and code validations.
Built With
