BlockVSCode

Matthew Lee, Grade 12

Inspiration

Scratch and other visual based programming languages enjoy great popularity at the K-12 CS education level. Despite this, my peers and I have found that the skills of working with Scratch's IDE don't translate well into programming at a more professional level.

What it does

BlockVSCode allows any student to use Visual Studio Code as a tool to code at the beginner level. Users can interact visually with the extension; they can also view the corresponding "Javascript" code.

How I built it

I used the Visual Studio Code Extensions tutorial to learn how to use Webview. I used a library called React-Blockly to implement the block code aspect of the extension.

Challenges I ran into

The React app was difficult to manipulate and I often had trouble rendering the extension.

Accomplishments that I'm proud of

I'm proud to have gone through the process of making and VSCode extension and look forwards to making more.

What I learned

I learned that it is difficult to integrate a web framework like React with VSCode extensions.

What's next for BlockVSCode

• GitHub integration: share code with others!

Built With

• node.js
• vscode