Visual Studio Code as a Writing Tool (Premium)

I've long wanted to switch to Markdown for all of my writing, but I have struggled to find an editor that meets my needs. That struggle continues, frankly. But I've recently found myself--and not for the first time--intrigued by the possibility of using the Visual Studio Code developer editor for this purpose.

That it was not designed for this purpose is not a concern: one of Visual Studio Code's core strengths is its extensibility model, and there are numerous free extensions that help transform this already-versatile tool into something that feels more natural for general-purpose writing.

What you don't really get, however, is the WYSIWYG-style of editing that you're familiar with from Microsoft Word and other similar mainstream word-processing apps. Obviously, that will be a deal-breaker for most. But if you're interested in a WYSIWYG Markdown editor, take a look at Typora. It's not perfect, but it's about as good as these things get on Windows.

But I don't really have mainstream needs. More to the point, I've also spent the past several years writing books entirely in Markdown using a code-based editor. For my past three books, I've used an out-of-date and abandoned editor called MarkdownPad 2 that, frankly, I really like. And I even switched to using that tool for all of my writing--including the articles I wrote for Thurrott.com--over a long period of time. The theory there was that it was awkward to use MarkdownPad 2 for the books and Microsoft Word for the rest.

That theory is still valid, I think. Maybe more so now than ever: today I use several different writing "editors"--some combination of Word, Typora, MarkdownPad 2, Notepad, and Notion--depending on what I'm doing. It'd be nice to reduce that count. Maybe not down to just one app, though one can dream. But less is better, for sure.

But what about Visual Studio Code? This product is free and fast, and it's versatile in ways that I suspect most--especially non-developers--don't realize. In Windows Everywhere is Now Available!, for example, I wrote about how I used Visual Studio Code to make several hundred edits across hundreds of Markdown files that make up my book Windows Everywhere in literally one second, thanks to its ability to open a folder and undertake actions (in this case Find and Replace) across all of the compatible files it contains. I also made similar edits to the Windows 11 Field Guide once I belatedly found out about this use case.

But writing? Writing is different, right?

Well, yes. It is. But, as noted, I've already been writing in Markdown, and Visual Studio Code natively supports Markdown. Surely doing so in Visual Code would be possible. Would it be as efficient/easy as doing so with MarkdownPad 2?

The last time I experimented with this, I didn't think so. I did install a few extensions that made this process better, but it just didn't click. (I can't recall how when this was, exactly. It is possible that Visual Studio Code did not at that time support Markdown fully and that one of the extensions I used at that time enabled that functionality.)

But after discussing Visual Studio Code with Rafael while troubleshooting Windows Everywhere, I started talking myself into looking into this again. The first and most obvious step was to consider using VS Code, instead of MarkdownPad 2, for the books. As noted, I like MarkdownPad 2 a lot, but it's increasingly out of date, requires a very specific developer library (which I store in OneDrive just in case) to work properly, and is never going to be updated again. Nervous about the future, I go back and forth between actively and casually trying to replace it.

In that capacity, I use MarkdownPad 2 much like a code editor. That is, there are literal code elements in the source files for the book, and much of that is hand-written. But MarkdownPad 2 is also a kind of hybrid solution in that I can use keyboard shortcuts--like CTRL + I for italics or CTRL + L for hyperlinks--for some formatting needs, similar to a word processor. Maybe this isn't obvious, but as a writer, my goal is to take my hands off the keyboard as little as possible.

Visual Studio Code is a code editor, and it doesn't really offer keyboard shortcuts for formatting Markdown. So that means I need to always write code for that stuff. It's not a non-starter: when you think about it, I can still keep my hands on the keyboard. But some things are easier to do this way than others. Hyperlinks are a bit tedious, for example. And where Markdown at least has a basic spell-checking feature, Visual Studio code, of course, does not. (It has logical features like IntelliSense instead.)

But to move to any tool full-time for all or most of my writing needs, it has to do even more. I probably use less than 5 percent of the features in Microsoft Word, but when I use another editor for writing, I often find myself running into limitations or other issues. I wrote about this recently in We Need to Talk About Microsoft Word (Premium), but one issue I have is the output: whatever tool I use for writing has to spit out clean HTML code that imports into WordPress seamlessly. If it can't do that, I can't use it.

With all that in mind, I opened Visual Studio Code and looked at it anew (for this usage). This app is on all of the PCs I use, and I use it for a variety of things, but usually for writing JavaScript or Flutter code. And now for that new bulk editing capability for the books. But using it for writing is another thing entirely. How would that work out of the box? And what could I fix with extensions? (Extensions that will sync to every one of my VS Code installs, by the way. In this way, VS Code is already better than Word.)

One weird issue with using a code editor--be it MarkdownPad 2 or VS Code--as a text editor is that the default settings one might use for code aren't ideal. The text is too small and the editor space is too wide. MarkdownPad 2 solves this problem by using a two-pane view by default in which you see the code and the text you're writing in the left pane and an HTML preview of the formatted document you're creating on the right.

This is useful for the books because I can see the inline images and formatting on the right. But Visual Studio Code uses a single, text-only pane by default. So you can just make the window smaller, I guess, and work in code.

You can also take advantage of a neat Visual Studio Code feature that lets you easily zoom the entire app window, including the text in the editor, using obvious keyboard shortcuts (CTRL + Plus, CTRL + Minus) that are inspired by how web browsers work. (The Terminal app in Windows 11 works the same way.) Need the text to be bigger? No problem.

Or, you can manually enable split-screen with an HTML preview on the right, like MarkdownPad 2. This requires a keyboard shortcut--CTRL + K, V--which is awkward but something I could remember.

In some ways, this works less well than does MarkdownPad 2. For example, Visual Studio Code doesn't display images in the HTML preview pane. But it also works better than the split view in MarkdownPad 2 in ways, since that app can't line up the left and right side views accurately. Visual Studio Code handles this very well, even with very long documents.

So, there are basic needs being met here, I guess. But most of my other needs would require extensions. And finding them required a bit of research.

Spelling and grammar checking. I had assumed that this would be the easiest find, but it's proven somewhat elusive. In the end, I settled on something called Code Spell Checker by Street Side Software, which is described as "a basic spell checker that works well with code and documents." What it appears to do is bring VS Code up to the same level of spell-checking that I get with MarkdownPad 2 out of the box. Meaning it's better than nothing. Fortunately, most of what I write gets a pass with Grammarly when I post to WordPress.

Export to clean HTML. Out of the box, VS Code does pretty well when I copy a selection of text in the HTML preview pane and paste it into WordPress. "Pretty well" means that there is some superfluous HTML code I don't want, but nothing potentially dangerous (like hard-coded text formatting that could undercut future theme changes on the site). But totally clean code is better, so I installed an extension called Copy Markdown as HTML. Now, I can use a VS Code feature called the Command Palette (see below) to get perfectly clean HTML output that pastes nicely into WordPress. Not totally seamless, but it does the job.

Word count. I like to see a word count when I write, but VS Code doesn't have this feature, obviously, because that's not necessary (or even advisable) for writing code. But this one was easy to find, since Microsoft actually makes a Word Count extension for VS Code. Nice: it appears as expected in the status bar on the bottom when you open Markdown (and probably other) documents.

Formatting keyboard shortcuts. I can write Markdown code for things like bold, italics, hyperlinks, headings, and so on, but some can be kind of tedious. So I found an extension called Markdown Shortcuts so I can select text and type CTRL + B to make it bold and so on. There you go.

Office theme. This one doesn't improve the writing experience per se, but you can make Visual Studio Code take on the look and feel of Microsoft Word (or Excel, or PowerPoint, or whatever) using the (unofficial) Office Theme extension. Hilarious.

Above, I referenced a Visual Studio Code feature called the Command Palette. This appears when you type CTRL + SHIFT + P. (The Terminal app in Windows 11 has the same feature, at it works identically.)

Here, you can access a wide range of actions related to Visual Studio Code and the file type you are currently editing. You can start typing to find actions with auto-complete. Or, you can access your most recently used actions, as they appear right below the text entry box in the drop-down.

And that is very useful. If I use a certain action a lot, as I would with "Markdown: Copy as HTML," then that feature will always be at the ready. So I can write an article for Thurrot.com with VS Code, select the body text, type CTRL + SHIFT + P and see that "Markdown: Copy as HTML" is auto-selected, hit ENTER, and then head over to WordPress to paste it in. That's maybe not as seamless as a standard select text/copy to clipboard operation in Word, but it is still quite efficient.

So, there you go.

I'm really interested in reducing the number of tools I use, assuming that I don't lose anything important. And Visual Studio Code is compelling for several reasons already stated, and in learning more about how it works, I can be more efficient with it will in ways that will benefit me beyond this usage. But there's also a weird, enthusiast developer part of me that really gravitates to this tool and wants to use it even if it requires a bit more work.

And as noted in We Need to Talk About Microsoft Word (Premium), Word is starting to get in my way. Visual Studio Code will never try to sell me on the benefits of using OneDrive (which I already use and pay for) or pop up any other nonsense ads and suggestions like Word does. It actually syncs all of my settings, unlike Word. And it is thin and light in ways Word hasn't been since the early 1990s.