Displaying EOL Symbol in Visual Studio Code

As soon as I started playing with Visual Studio Code a bit more, I found it's whitespace rendering function lacking. While it does render spaces and tabs, I found it hard to deal with the absence of EOL marking. Yes, Visual Studio Code does show that information in status line and the whole thing is not really per line setting as Code will "normalize" line endings upon load but I simply missed those buggers.

I did find a couple extensions doing it but none really worked seamlessly as I wanted them. For one, they had a separate setting for turning them on/off. While I do love my EOL characters, I don't want to see them all the time and I definitely don't want to go into settings to change their state when there's perfectly good Toggle Render Whitespace menu option available. Moreover, I wanted color of EOL to fit with the existing whitespace theme rendering instead configuring it separately.

I guess it was time to make my own extension.

Well, first, there is a really good guide through building simple extension. While it might not go deep into the topic, you will have both working extension and knowledge how to debug it by the time you're done.

Secondly, if you go into %USERPROFILE%\.vscode\extensions directory (on Windows), you will see all extensions there - including their source code. I might not be the biggest fan of JavaScript (or TypeScript) but I am definitely the fan of learning by example. If you see some other extension doing something really close to what you need, you can see how it's working and start from there.

Lastly, publishing extension is easy too. Assuming you got your package setup correctly, you're just a few lines away from having it in the wild world.

To sum it up, creating and publishing extension was rather interesting and easy experiment. While JavaScript and occasionally flaky documentation did cause me to spend way too much time on this, it wasn't all too bad. Debugging experience is acceptable and it feels nice to actually make something you'll use. Not sure I'll repeat it any time soon but I will definitely keep it in mind.

If it sounds interesting, you can install extension from within Visual Studio Code if you search for Render CRLF, check it's marketplace page, or take a look at the source code.

Leave a Reply

Your email address will not be published. Required fields are marked *