Shopify / theme-check

The Ultimate Shopify Theme Linter
Other
333 stars 96 forks source link

Better code completion providers #729

Open timdmackey opened 1 year ago

timdmackey commented 1 year ago

Like many others, I've come to love the code completion abilities provided by previous Shopify extensions for VSCode. It's really nice to be able to type something as simple as "ca⇥" and have VSCode output a complete case tag/block.

With that in mind, I've been playing around with the language server in theme-check with the goal of implementing more extensive code completion. I have a long way to go, but I just finished my first proof of concept for context-sensitive tag completion. As you can see in the screen recording below, tags will autocomplete correctly both as regular tags, and as inline tags inside of a liquid block!

2023-05-02 17 04 47

This is my first time diving into the Language Server Protocol, and it's got me really excited for the possibilities. The extensions I've built in the past have been based on simpler Textmate grammars (as have other Liquid extensions), which provide a lot of functionality but aren't nearly as flexible as using Language Server Protocol. For example, the context-sensitive completion that I illustrated above just isn't possible with the older style of extension—in order to support both types of tags, the list of code completions that the user sees would have duplicates of ever single tag. Using Language Server is way better!

If anyone at Shopify wants to know specifics of how I'm implementing this, I'd be happy to share. For now I'm going to continue working on it, since even if it never gets published it will still make my own theme development way smoother!