Mike Slinn
Mike Slinn

Visual Studio Code Extensions for Jekyll Development

Published 2022-02-20.
Time to read: 2 minutes.

This page is part of the ruby collection, categorized under Jekyll, Visual Studio Code.

If you use Visual Studio Code, and you maintain Jekyll websites, you might find the following VS Code extensions to be helpful.

  1. Liquid provides syntax highlighting, formatting and snippet support for the liquid template language. Supports both Jekyll and Shopify variations.
  2. jekyll-run VS Code plugin.
  3. Jekyll snippets for Visual Studio Code is a combination of both the the sublime-jekyll package by @23maverick23. and the atom-jekyll package by @jasonhodges.
  4. jekyll-post makes it easier to create new blog posts for Jekyll-based websites using the Visual Studio Code editor. Using this extension, a user can create new post file with pre-filled "front matter". The template for front matter can either be provided by the user or the extension will use its built-in template.
  5. Ruby Solargraph Solargraph is a language server that provides intellisense, code completion, and inline documentation for Ruby.
    • Context-aware suggestions and documentation for the Ruby core
    • Detection of some variable types and method return values (e.g., String.new. returns String instance methods)
    • Identification of local, class, and instance variables within the current scope
    • Find references and rename symbols (experimental as of solargraph gem v0.22.0)
    • Support for gems
    • Near-complete support for the Ruby core and stdlib
    • Partial support for Ruby on Rails
  6. Visual Studio Code Remote Development Extension Pack allows you to open any folder in a container, on a remote machine, or in the Windows Subsystem for Linux (WSL) and take advantage of VS Code's full feature set. Since this lets you set up a full-time development environment anywhere, you can:
    • Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.
    • Quickly swap between different, separate development environments and make updates without worrying about impacting your local machine.
    • Help new team members / contributors get productive quickly with easily spun up, consistent development containers.
    • Take advantage of a Linux based tool-chain right from the comfort of Windows from a full-featured development tool.
    No source code needs to be on your local machine to gain these benefits since Remote Development runs commands and extensions directly on the remote machine.
  7. bust-a-gem adds "Go to Definition" for Ruby projects in VS Code. It will create a TAGS file using the ripper-tags gem, and then use the tags for Go to Definition. Fast and easy. Bust A Gem provides two additional handy features:
    1. An "Open Gem..." command for quickly opening a gem from your Gemfile. This opens a new window in VS Code.
    2. Limited support for "Go to Symbol in File..." for Ruby projects. Note: Bust A Gem relies on bundler and only works with Ruby projects that have a Gemfile.