Adding Shakespeare support in VS Code

Posted onby

Visual Studio Code is a great customizable IDE. There are even good tools for Haskell support. Unfortunately there is no Yesod or Shakespeare extension yet which could support the hamlet file extension. In this blog post we will see how to enable *.hamlet file extension support in VS Code.

First of all, lets have a look how a hamlet file will look like if you start VSCode without hamlet (or Shakespeare) support:

Shakespeare Hamlet Template without syntax highlighting

Yuk! This is quite difficult to read, since we have absolutely no syntax highlighting. Fortunately we can easily apply the default HTML syntax highlighting in VSCode for Shakespeare. Here is how to do it:

Step 1

Open the settings screen:

VSCode Settings Location

Step 2

In the Settings Screen you can see the override options of the default settings. You can apply settings changes for all of your personal projects (User Settings), for a whole Workspace (more specific) or even more fine grained to a folder. In this blog post we will apply the changes to all of our projects.

We would like to make the following mapping:

  • Hamlet files (with the .hamlet file extension) should be syntax highlighted as HTML files
  • Julius files (with the .julius file extension) should be syntax highlighted as JavaScript files
  • Cassius files (with the .cassius file extension) should be syntax highlighted as CSS files

The settings are defined in JSON, a very common data structure which makes it pretty simple for any developer to adapt. Let's add the following entry:

"files.associations": {
  "*.hamlet": "html",
  "*.julius": "js",
  "*.cassius": "css"

Congratulations! You managed to add Shakespeare Templates support to your VSCode installation. If you open one of the files with the mentioned file extension, your code should be syntax highlighted. (Even if hamlet structure does not require the closing tags, the syntax highlighting works surprisingly well. As well do the flow keywords.)

Shakespeare Hamlet Template with syntax highlighting

If you have any questions or comments to this blog post, don't hesitate to use the area below.