CSS was not loading on my website and other strange errors. I found a bug in Visual Studio Code.

I spent more than half a day trying to figure out why my website suddenly looked broken. It didn’t load the CSS file and also the header name that were supposed to go to home, added an extra forward slash, therefore leading to an error page.

After many hours, I learned that the static generation of HTML was adding an initial forward slash at the beginning of the CSS file location. Such as / /main.css and it threw errors that it couldn’t find the CSS. While the header showed as tomordonez.com// which led to an error page.

Since this blog is generated with Jekyll, it uses the directory _includes with two files head.html and header.html.

(The code below has double curly braces, but they weren’t rendering so I removed one).

The head.html loaded the CSS file like this:

<link rel="stylesheet" href="{ "/assets/main.css"...

However, when editing the line in Visual Studio Code. It would add a leading space:

<link rel="stylesheet" href="{ " /assets/main.css"...

When Jekyll generated the HTML, it created a unicode space:

/%20/assets/main.css

Then header.html added the anchor on the top left of my website:

<a class="site-title" rel="author" href="{ "/" | relative_url...

However, whenever I opened the file in Visual Studio Code, it auto formatted the href to href="{ " /". Adding a space before the forward slash. Also, when Jekyll generated the HTML it was adding a %20 and the anchor would have a double forward slash like this: tomordonez.com//

Oh boy.

This is a Visual Studio Code bug

Do I get a prize? Do I submit it to Microsoft?

The bug is generated by Visual Studio Code, in Settings, Format on Save (enabled). Whenever I opened those files, it would autoformat and add those spaces, which ended up breaking my website on deployment.