Extending Visual Studio Code, part two

In a recent blog post, I described how I addressed a shortcoming in Visual Studio Code by creating a custom extension. Not long after that, I found myself needing 1 to build another one.

My first Visual Studio Code extension

I built my first Visual Studio Code extension,2 Recent Files (All), because I was frustrated by VS's inability to easily retrieve recently viewed files. In the few weeks since I built it, I've found it indispensible. There are two interrelated benefits:

1. The extension will store up to 500 files. This is vastly more than most applications "remember" (typically between 10 and 50 files).
2. You access the list using the VS Command Palette, which progressively filters as you type, making it easy to retrieve files that might be far down the list.

The importance of clean HTML

The World Wide Web has been around for over 30 years now, and there's a vast number of HTML files out there, of widely varying quality. The early and rapid success of the Web is due in part to the highly forgiving nature of web browsers, most of which tolerate invalid and poor quality HTML: Load a poorly written page in any browser and it will do a remarkably good job of making it at least legible. That said, it's worth making the effort to write clean and valid HTML, for several reasons:

1. Valid HTML is usually as concise as possible, with minimal bloat, with consequent benefits for performance, legibility, maintainability, and so on.
2. Properly written HTML will be accessible to the widest possible range of devices, not just the most familiar web browsers. Assistive devices will recognise the structure of the page, and will be able to identify headings, paragraphs, lists, and so on. Similarly, search engine robots will do a better job of indexing correctly marked up pages, which helps with search engine optimisation (SEO).
3. Standards-compliant HTML is more likely to render properly in future browsers and yet-to-be-invented devices: if you view a web page written 30 years ago in any current browser, it should look almost the same now as it did when it was first written.

Time for another extension

I frequently need to edit poorly written web pages. These might have been created long ago using crude tools, or maybe just exported from a current program such as Microsoft Word. Such pages are frequently a mess: bloated and invalid HTML that's difficult to read and edit, and difficult to debug.

A good first step when dealing with such pages is to run them through a processor that attempts to remove the worst errors and brings them up to a usable baseline. 3 HTML Tidy is a mature tool that does exactly that. It has been around since the early 1990s and describes itself as the "grandaddy of HTML tools."

Its sheer power and configurability comes with a weakness, however: it can only be used on the command line. So if you're not doing bulk editing, it's a hindrance to have to jump out of your editor, fire up a command window, and return to your editor to inspect the results.

There are a vast number of VS extensions to do all kinds of routine HTML tasks, yet nobody has thought to build a simple extension that can run HTML Tidy directly in the editor. This made it a perfect candidate for another extension project.

Introducing Tidy HTML

4 Tidy HTML is an extension I built that runs HTML Tidy inside Visual Code Studio. Open up any HTML file, call the Tidy HTML: Run command, and HTML Tidy attempts to clean up the file. Unlike the original command line version, Tidy HTML won't save the file until you tell it to, ensuring you don't perform any unwanted edits.

Limitations

Back when I used 5 HomeSite, I wrote a long and complicated script named Codesweeper, named after HomeSite's own HTML cleanup utility. It worked quite well, and could bring any HTML file up to a decent standard, as long as it didn't have any egregious errors.

Things have moved on, of course, and I now use a two-step approach, my Tidy HTML extension for the initial cleanup, and another script or extension to polish the presentation of the code to my own standards, in terms of general layout, whitespace, indentation, quotation marks, character encoding, and more besides. Sometimes, for a larger project, I'll use a third step involving a specialised custom script to transform the HTML in specific ways.

I haven't yet settled on an optimum solution for the second step. There are several reputable extensions available for that, 6 Prettier being a good example, however I haven't found one I'm completely happy with, and I suspect I'll want to create an updated version of my HomeSite Codesweeper, which will give me all the customisability I might need. I will post about that when I get to that point.

In the meantime, if you use Visual Studio Code and need to edit existing HTML files, regardless of how they were created, please give Tidy HTML a try. You can download it for free at the Visual Studio Marketplace (link below).