Gherkin Syntax Highlighting in Visual Studio Code

Visual Studio Code is an incredible code editor that’s on the rise. It offers the power of an IDE with the speed and simplicity of a lightweight text editor, similar to Sublime, Atom, and Notepad++. If you’re a BDD addict, then VS Code is a great choice for writing Gherkin features, too! There are a number of extensions for Gherkin. Which one is the best? Below is my recommendation.


Install both:

Extension #1

VS Code has a few free extensions to support Gherkin. The first one I tried was Cucumber (Gherkin) Full Support. This one had the highest number of installs. When I started writing feature files, it provided snippets for each section and syntax colors. The documentation said it could also provide step suggestions (meaning, I type “Given” and it shows me all available Given steps) and navigation to step definition code, but since it looked like it only worked for JavaScript, I didn’t try it myself. that left me with no step suggestions. The indentation looked off, too. Not perfect. I wanted a better extension.

This slideshow requires JavaScript.

Extension #2

The second one I tried was Snippets and Syntax Highlight for Gherkin (Cucumber). It provides colorful syntax highlighting and a few three-letter snippets for Gherkin keywords. When I typed “fea”, a full template for a Feature section appeared with user story stubs (“In order to ___, As a ___, I want ___”). Nice! Good practice. The “sce” snippet did the same thing for the Scenario section with Given, When, and Then steps. Each section was indented nicely, too. The only downside was the lack of a snippet for Examples tables. Nevertheless, tables were still highlighted. But again, no step suggestions.

This slideshow requires JavaScript.

Extension #3

The third extension I tried was Feature Syntax Highlight and Snippets (Cucumber). It was very similar to the previous extension, but it used different colors. The snippet shortcuts were also not as intuitive – they used the letter “f” for feature followed by the first letter of the section. For example, “ff” was a Feature section, and “fs” was a Scenario section. Unfortunately, this extension did not provide step suggestions. Comments and example table rows did not get highlighted, either. Personally, I preferred the previous extension’s color scheme.

This slideshow requires JavaScript.

Extension #4

The fourth extension I tried was Gherkin step autocomplete. This one promised step suggestions! However, I had some trouble setting it up. When I enabled the extension by itself, feature files did not show any syntax highlighting, and the steps had no suggestions. What? Lame. What the README doesn’t say is that it relies on a separate extension for feature file support. So, I enabled extension #2 together with this one. Then, I had to move my feature file into a project-root-level directory named “features.” (This path could be customized in the extension’s settings, but “features” is the default.) And, voila! I got pretty colors and step suggestions.

This slideshow requires JavaScript.

But Wait, There’s More!

There were even more extensions for Gherkin. I was happy with #2 and #4, so I didn’t try others. The others also didn’t have as many installations. If anyone finds goodness out of others, please post in the comments!


  1. Do you know of an extension that will allow expanding/collapsing of the Examples table (aka: Where:)?
    I tried Snippets and Syntax Highlight for Gherkin (Cucumber) and Gherkin step autocomplete, and was able to fold the Scenario (scenario, given, when, and then lines) but the examples table doesn’t have the fold option.


  2. Hi Andy,

    Do you know any extension that could run .feature file? I’m looking for plugins but did not find any.

    We are using Java as our programming language. In Intellij, there is Cucumber for Java plugin that you could just right click and run a specific scenario. Did Visual Studio Code has plugin same with that?



      1. I see, thanks so much Andy! I think it’s one of the advantage of IntelliJ. But VS code is really much lighter.


  3. Hey , Andy,

    I have tried the first extension and actually the plugin give step suggestions.

    You just need to configure the setting right because by default this autocomplete is set to false.

    The steps are:

    1. Create file settings.json in .vscode folder;
    2. Open the file and put the settings listed below:

    “cucumberautocomplete.steps”: [
    “cucumberautocomplete.syncfeatures”: “features/scenarios/**/*.feature”,
    “editor.quickSuggestions”: {
    “comments”: false,
    “strings”: true,
    “other”: true

    3. Go to feature file and start writing. In order already created steps to be listed. you should not be in highlighted mode, because the extension is taking it as part of the title or comment.

    Please give it a try 😉



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s