Syntax can be a big stumbling block when learning a new language. Even worse, it is often difficult to separate the syntax and semantics of a piece of code which makes Googling difficult. For example with the line of code below.

const [message, setMessage] = useState("Hello world!");

If you don't know what array destructuring is then you won't have much luck Googling to understand this code. You might find documentation for useState or for setMessage — but Google doesn't know you just want to understand the syntax.

What it does

GrokJS solves this problem by adding inline annotations about the syntax to the editor. And for when this is not enough you'll find links to informative documentation by hovering over highlighted syntax.

How we built it

GrokJS is a VS Code extension written in TypeScript. The wonderful package Acorn was used to parse the source code into an AST that we could then annotate the editor with. The ESTree Spec was used for the annotation schema and we used the Mozilla Developer Network as our primary documentation source.

Challenges we ran into

In our first implementation of the extension we attempted to use the Language Server Protocol. This was a mistake. Not only did it not offer the specific functionality our extension required, but it was also massive overkill. LSP is great when you are implementing some functionality that you want ported across numerous editor plugins, but in our case this was unnecessary.

Accomplishments that we're proud of

This is possibly the most polished project any of us have created in a hackathon. We're proud that we managed to publish a fully functioning and documented VS Code extension in under 24 hours.

It also works pretty well. The annotations are precise, the descriptions are informative, and the documentation is relevant. We believe GrokJS would be a very helpful tool for new and experienced programmers alike who need to learn JS.

What we learned

We learned lots. For two of us this was a first attempt at a serious project with TypeScript. Suffice to say we have both fell in love with the delightful typed experience it provides. It was the first time building a VS Code extension for all four of us. Although, the API has a few rough spots we were overall impressed with how easy it was to do. Finally, Acorn was a delight to work with. It made this project possible. And it's quick too! In some of our tests it was parsing ~5000 lines of JS in under 10 ms. Wow!

What's next for GrokJS

We live in a multi-language world. Developers are expected to be able to switch between different languages and projects at will. This presents obvious language learning challenges. The next step for GrokJS isn't just to improve the JS learning experience, but is rather to grow into a family of extensions that help developers learn any language.

Built With

Share this project: