Vento plugin

for JetBrain's WebStorm & IntelliJ IDEA Ultimate IDE

Provides support for the VentoJs template engine. Vento is used in the SSG Lume framework to generate HTML sites.

key features:

1. `*.vto` file type
2. Syntax highlighting
3. Syntax checking
4. auto-completion
5. support for front-matter
6. support for the fragment plugin
7. formatting
8. filepath auto-completion and validity checking
9. comment toggling

For more information visit Vento.

It's still early days with this plugin. auto-complete and formatting support and a few other features are still to come. Check the issues for details

Table of Contents

• About The Project
• Installation
• Usage
• Built With
• Code of Conduct
• Contributing
• License

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.

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

• Using JetBrains Marketplace:

  • In the IDE go to Settings/Preferences > Plugins > Marketplace > Search for "WebStorm-Vento" > Install

• Manually:

  • Download from GitHub Releases, or from the JetBrains Marketplace, or build it yourself.
  • In your IDE go to Settings/Preferences > Plugins > ⚙️ > Install plugin from disk...

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 2025.2.*)
• JDK v21
• Gradle v9
• Jetbrains JavaScript & TypeScript plug-in v251.27812.49

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

▲