Issue #19 - How to turn Visual Studio Code into the ultimate writing tool for people who don't write a single line of code

In the introduction of Issue #16 – Discover Your True Vocation With AI: The Dog Walker, I talked how I ended up using an application meant for software developers, Visual Studio Code, as my main writing tool.

If you haven’t read it, please go ahead and do so now. It’s critical to understand the context of today’s newsletter.

If you have read it, you know that I discovered, by accident, how CoPilot, the GitHub extension for VS Code based on GPT-4, is the ultimate help for writers, not just software developers.

What I didn’t tell you in that introduction is that, together with CoPilot, I use several additional extensions (some discovered just days ago) that have transformed my writing workflow to the point that today I can’t imagine writing anything of substance without VS Code.

So, today, we talk about how VS Code can become the ultimate life-changing personal writing tool, beating hands down any other tool you ever tried, from Ulysses to Scrivener, from Word to Google Docs.

Notice that I said, “personal”. The one shortcoming of using VS code to write is that it doesn’t have a collaboration feature, but so do many other writing apps on the market today. What I got with VS Code plus the extensions I’ll talk about below is so valuable that I’m happy to copy my draft from VS Code to Google Docs for the final editing and collaboration phase rather than write the whole thing there.

It’s that good.

We need to talk about three things: the extensions, the native tools, and the configuration of the environment. One complements the others and together they power my workflow.

Before we start, three caveats:

1. I know that there are some articles online on how to turn VS Code into a writing tool. I found them either obsolete or incomplete. I think I have put together a more comprehensive set of extensions than any article I’ve found so far.
2. My configuration is tailored after my use cases: writing Synthetic Work in the way it must be written is the main one, but not the only one. I hope you’ll find some information that is valuable and can be adapted to your use cases.
3. This will be a little bit more geeky than I’d like Synthetic Work to be. I wouldn’t recommend you to go through the steps I’m about to describe if there wasn’t an enormous return on the investment. Bear with me on this.

OK. Let’s start with the extensions.

Extensions

• WordCounter
• Grammarly
• GitHub Copilot
• Auto Rename Tag
• TODO Highlight
• ChatIDE

Let’s talk about each of these extensions:

WordCounter

This little extension is amazing. Not just because it counts words, characters, lines, and paragraphs. And not just because it can do so for a selection rather than the whole text if you wish so. But, crucially, also because it estimates the reading time of what you are writing.

One of the biggest challenges I have writing Synthetic Work is trying to find the right balance in terms of content length. Before moving to VS Code, I searched, in vain, for a reading time tool that would work with the other writing tools I was using.

Not finding one, I simply tried to reach the same length of the past newsletters, through a highly imprecise visual inspection of the scrolling bar. Yep, I have no shame in admitting that.

Now I have a precise comparison term and a sense of how long I’ll bore you every week.

Grammarly

We talked about Grammarly extensively in Issue #11 – Personalized Ads and Personalized Tutors.

In Issue #16 – Discover Your True Vocation With AI: The Dog Walker, I also told you that the whole reason why I started using VS Code was that the Grammarly implementation of the VS Code extension is much better than any other I’ve tried for any other editor.

The popup could use some more contrast between the suggestion and the background text, but it’s probably possible to customize it in ways I didn’t bother to explore yet.

The second best thing about this extension is that it shows you the entire list of errors and suggestions in a panel on the left or right side of the main editor. This allows me to catch errors and typos that I would have missed by scrolling through the draft trying to spot the red underlines.

Notice that this extension doesn’t support yet the new version of Grammarly powered by large language models called GO. But it’s not important as Copilot will do that job for you.

GitHub Copilot

The entire reason why VS Code is mentioned in The Tools of The Trade section.

As we said multiple times in past issues of Synthetic Work, the Copilot extension is based on a model that OpenAI has trained for GitHub called Codex.

While this version of Copilot mainly acts as an autocomplete system, its upcoming successor, called X, will be based on GPT-4 and it will also behave like ChatGPT, allowing you to have a conversation with the AI about the code you are writing inside VS Code.

I currently use the technical preview of Copilot X, which you can sign up for here.

First, you have to be a paying customer for the current version of CoPilot. Then, you can apply for the technical preview and hope to be selected. I was selected immediately.

Unfortunately, if you already pay to access GPT-4 through the OpenAI GPT Plus subscription, there’s no way to leverage that for Copilot. You have to pay Copilot as a separate system.

Dozens of extensions for VS Code that allow you to use the GPT-4 API, but you have to pay for the API consumption separately and they don’t do the autocomplete magic that I’m talking about here.

I don’t know if my experience is so amazing because I’m using the technical preview of Copilot X or if it would be as good even with the version of Copilot that uses Codex. If you try the latter, let me know your impressions.

As I said in Issue #16 – Discover Your True Vocation With AI: The Dog Walker, the suggestions I receive from Copilot occasionally are so good that it seems like it’s reading my mind.

I’m not always that predictable. Let’s say that 30% of the time, the AI knows exactly what I want to write next, or it suggests a better way to write what I was trying to write before I wrote it.

I’m not certain it’s 30%. It’s hard to measure it, but even I can assure you that the number of times it works is so high that the impact on the writing speed is material. So material to sit here and advocate its use to you in two issues of this newsletter. Despite the technicalities you need to go through to make it work. Despite the price.

You have to try the experience for two weeks to understand its value.

Now, notice that I’m not letting the AI write your newsletter. I fiercely push back any recommendation that is even remotely diverging from what I intend to write. As I said, I exclusively use it to speed up the act of writing something I already decided to write.

And this is the key difference between using ChatGTP and Copilot. While the underlying AI model is the same, your intention is very different.

You use ChatGTP when you are not quite sure how to express what you want to say. You use it for inspiration or for a different perspective on a first draft you already wrote.
You, instead, use Copilot when you are certain about what you want to write and you just need to execute faster.

Both approaches have merits and both are worth every penny for me.

That said, the cost of these AI services can add up quickly. Are there alternatives that you could consider?

At least three alternatices, in a future, could replace Copilot in the workflow we are describing today: Google Bard, AWS CodeWhisperer, and Sourcegraph Cody.

Bard

Google is preparing to infuse Workspace apps (Docs, Sheets, Slides, etc.) with its model: Bard. You’ll hit a button floating inside a Google Docs page and you’ll be able to ask the AI to help you start. That’s not the same as the autocomplete capability I’m talking about here.

Plus, Bard hallucinates like there’s no tomorrow and I would highly recommend you wait for a better version or the next-generation model: Gemini, developed by DeepMind.

Finally, and most importantly, Google is so uncertain about the quality of Bard’s answers that, in your Terms of Service agreement, you will find that the company will allow human reviewers to read your prompts and the AI-generated answers to monitor the quality of the service.

What’s not to love?

CodeWhisperer

Like Copilot, CodeWhisperer is available as a VS Code extension. Unlike Copilot, it’s free. And you don’t even need to be an AWS customer to use it.

However, I did not test it yet to see if it can autocomplete plain English as Copilot does and if it’s equally good at it. If it doesn’t do it today, it might in the future.

Cody

Sourcegraph announced Cody 5.1 as soon as I finished this draft, so I had to go back and add this paragraph. Something like that happens to me every week. That’s how dynamic things are in the AI industry.

Like Copilot and CodeWhisperer, Cody comes as a VS Code extension to provide code completions and suggestions. The AI model that Sourcegraph is using for Cody 5.1 has not been trained in-house but it’s a version of Claude, the foundation model developed by Anthropic.

Another trick that Cody uses is this: if you are willing to install an auxiliary app on your computer, Cody can look into all the files you have created across multiple directories and use them as context to write its autocomplete suggestions.
By comparison, at least for now, Copilot can only look at the current file you are editing.

The question is if Cody can do plain English autocomplete and how well compared to Copilot. I installed it and can confirm that it does autocomplete in the same way Copilot does.

The positive things: it’s completely free, and it’s capable of keeping a lot in context. As I’m typing this sentence, it suggested something that references another sentence I wrote at the very beginning of this draft, 4,000 words ago.

The negative thing: it’s a split-second slower in generating its recommendations compared to Copilot. It seems an insignificant amount of time, but it impacts the experience in a material way. When you compare the two, you suddenly notice how important is the generation’s speed to boost your writing in the way I described it in the past.

Now. Cody is in beta, and generation speed could significantly increase going forward. I’d keep an eye on this one.

Others

There will be many other AI assistants in the future and they will be free: the progress that I’m seeing with open access large language models like Falcon, Guanaco, and MPT is impressive. Differently from the perennially hyped AI community, I’m not confident that these models are ready today, but the trajectory is very promising.

Also, the entire AI community is waiting to see how StableLM, developed by Stable Diffusion, will pan out.
As we speak, StableLM is about to enter its beta phase, so there’s still a long way to go before its release, but Stability AI has already demonstrated exceptional training skills with Stable Diffusion Extra Large (SDXL) 0.9.

I’m confident StableLM may trigger an explosion of activity in 2024.

Auto Rename Tag

As you know, I write two editions of this newsletter every week. Each one is approximately 10 pages of content, divided into multiple sections.

I don’t write the drafts in plaintext. I need markup to indicate the sections, the titles, the links, the images, the bullet points, and so on.

I don’t like Markdown, as it doesn’t give me the flexibility I need to customize the look and feel of the content when it appears on the website. Plus, I find it pointless: Markdown must be converted to HTML to be displayed on a website or inside the HTML emails that deliver modern newsletters.

I am well-versed in designing websites with HTML and CSS, so I mark up the newsletter content directly in HTML. This will be important to understand why I use some of the extensions listed below.

Because of this, a little extension called Auto Rename Tag helps me avoid mistakes.

If I’m changing the starting tag of a title, for example from h3 to h4, it automatically changes the closing tag, too. And vice versa.

Super simple, super useful.

TODO Highlight

Once a draft of this newsletter is complete, before it ends up in your email, it must be first copied inside the editor that comes with WordPress. WordPress has been my platform of choice for every media project I created in over two decades, and it powers Synthetic Work, too.

My WordPress implementations are always heavily customized to accommodate the creation of special tools and features for the readers. Synthetic Work is the most complex WordPress implementation I’ve created so far and some of the tools you see today, like the AI Tracker, are the result of these customizations.

Due to these customizations, and for reasons that will become clear in the future, I can’t simply copy the whole draft written in VS Code into WordPress. I need to copy and paste each section separately. So it’s very important that I can easily identify each section in the draft during the copy-and-paste process.

The problem here is that, since I write a plaintext file, there is no way to visually identify the sections of the draft and so it was a lot of scrolling up and down, endlessly re-reading pieces of my draft to find the right section to copy into WordPress.

I solved this problem with a simple extension called TODO Highlight.

This little guy allows you to change the appearance of an arbitrary string of text as you type it. You can change the color of the font, the color of the background, the color of the border, and even ask that the entire line is highlighted rather than just the characters of the string.

So I use it to highlight everything that is within the h2 tags, which I use to mark the beginning of each section of the newsletter.

This is probably one of the most challenging extensions to configure, as it requires you to write a regular expression (RegEx) to identify the string you want to highlight. And regular expressions are a nightmare even for developers.

In the past, I would have discouraged you from using this extension because of this complexity, but today we have a friend to help us: ChatGPT.

Just ask it to write the regular expression for the text that you want to highlight. The free GPT-3.5 model is good enough for this task, you don’t need to pay for GPT-4.

Then, put it in the configuration file of the extension. It’s another intimidating thing to do, but you’ll manage.
I had more challenges finding the perfect background color for the dark mode theme that I use with VS Code than configuring the extension.

Even in this case, ChatGPT was super helpful as it suggested multiple colors that could work in the scenario I specified:

It even offered a way to test them that I didn’t think about:

I need this extension only to generate a visual cue for one single tag, but it can be used to highlight multiple things in infinite ways.

ChatIDE

This last extension is optional but worth mentioning.

We saw how, in this particular workflow, ChatGTP and Copilot have different roles. I wish I could use Copilot for everything, but even the new chat capability in the technical preview of Copilot X doesn’t allow me to ask questions about anything that is not code related.

So both have to exist. However, for some people can be quite annoying to have to switch between the browser, where ChatGTP lives, and VS Code where you do your writing.

You could use clever apps like MacGPT, which we encountered in Issue #12 – And You Thought That Horoscopes Couldn’t Be Any Worse, reducing the distractions, but you’d still have some context switching.

To minimize that, you could install a VS Code extension that replicates the ChatGPT interface inside VS Code.

This approach allows you to ditch your GPT Plus subscription entirely and pay the access to GPT-4 on a consumption basis, which is usually cheaper, accessing it via the API that OpenAI provides you on its platform.openai.com website.

There are dozens of extensions in VS Code Marketplace that allow you to do so, but I only trust ChatIDE because it’s made by the same developer that makes LM Studio, which I described in Issue #18 – How to roll with the punches.

I know this person and talk to him every day about the development of LM Studio and ChatIDE. I know the care he puts in building his software.

Differently from Copilot, ChatIDE allows you to change the behavior of the AI model by specifying a different conditioning (via a so-called system prompt), which makes it incredibly versatile.

You could, for example, ask GPT-4 to behave like a famous writer you want to emulate rather than behaving as a generic very helpful assistant. This saves you from having to assign a role, a technique we saw in Issue #8 – The Harbinger of Change, every time you write a prompt.

Even more interesting than that, ChatIDE supports the API to use Claude, the AI model that competes with GPT-4, developed by Anthropic. Which is the same thing that Cody 5.1 does, as we saw in the Copilot section of this long issue.

So this might be an interesting way to compare the two models and see which one is better for your needs.

OK, now it’s time to talk about the native features of VS Code that are critical complements to these extensions.

VS Code Features

• Explorer
• Snippets
• Emmet
• Autosave
• Git

Explorer

The Explorer is a file manager integrated inside VS Code.

For a very long time, I ignored its value. I didn’t see anything particularly useful in it compared to using my trusted ForkLift on macOS.

Yes, just like ChatIDE, Explorer saves you from context switching, but it’s not particularly important when you work with a single file at a time.

But Synthetic Work is a newsletter made of two drafts per week, and many images that I save locally and need to upload to WordPress. It’s becoming a lot of files.

And, crucially, in most drafts, I often reference previous issues of the newsletter. The content is so much that I don’t always remember in what Issue I wrote X or Y or Z, and I need a more efficient way to find the things I previously wrote than going online every time and browsing the website.

So, I have set up VS Code to define a so-called workspace that points to the hard drive folder that contains all my sub-folders, one for each issue of Synthetic Work.

The Explorer allows me to browse the content of all these sub-folders, create new ones, create and rename the new draft files, delete stuff. It’s, once again, a faster way to do things that I would normally do in another app.

More importantly, once I defined the Workspace, I can search for content across all the files in all the sub-folders with the Search feature of VS Code:

It’s so convenient and so much faster than using the search feature in macOS, Finder, or ForkLift.

So, for apparently insignificant reasons, Explorer makes me very happy.

Snippets

As you perfectly know, each Edition of Synthetic Work has its regular sections that appear almost every week. Every time I start a new draft, I have to create the same sections over and over again. It’s time that can be saved by using a template.

VS Code allows you to create templates for any kind of file, via a feature called Snippets.

Exceptionally awkward to use, you can define your templates/snippets in a particular file. The snippet can be a single line or multiple lines. If it’s multiple lines, you’ll have to follow a particular syntax.

The beauty of this thing is that you assign a shortcut to each snippet. When you type the characters of your shortcut, the VS Code autocomplete function (nothing to do with Copilot!) will suggest the snippet and, if you accept the suggestion, it will expand your shortcut into the full template you have previously defined.

For example, I created two shortcuts. One is !fe and one is !se.

When I start a new Free Edition draft, I type !fe in the editor and VS Code suggests me the right snippet:

If I accept the suggestion, the snippet expands into the full template:

Notice that the sections of the newsletter are already colored following the rule I defined in the TODO Highlight extensions as I explained above.

I love this thing.

Emmet

This is the most magical thing in VS Code after Copilot. Every web developer in the world knows about Emmet, but I didn’t (I’m not a web developer) and when I discovered it, I felt like an idiot.

Emmet is a plugin that comes pre-installed in VS Code. It allows you to write HTML and CSS tags via shortcuts in an impossibly clever way.

For each newsletter draft, I have to write HTML tags for section titles, links, quotes, italic and bold text, and lists. A ton of these things.

Writing these tags takes just fractions of seconds, but when you add them up, they slow your writing down in a material way.

Emmet allows me to write these tags in a fraction of a second.

For example, let’s say that I need to create a list of eight items, like the list of extensions in the previous section of this article.

Rather than manually writing the tags for each item, I invoke Emmet with a keyboard shortcut I set up, and then I write:

And it happens. It does happen. Like a miracle.

Do I have to transform a piece of text that I copied from a news source into a quote? I select the text, then invoke again Emmet with the keyboard shortcut I defined, and type bq.

You know crying tears of joy? That.

The number of things you can do with Emmet is mind-blowing.

Autosave

Perhaps minor, I didn’t know that VS Code has an autosave feature. It’s not enabled by default, but it’s easy to enable it.

If you dig into the Preferences, you can also change the behavior of the autosave feature, but the default settings are fine for me.

Git

VS Code obviously supports Git for version control. This is way too technical and out of scope to explain in detail here.

I’ll just say that I save all Synthetic Work drafts and images in a private GitHub repository via the Git integration in VS Code.
Having revisions of my drafts makes me sleep better at night.

It’s also a way to better understand how to use this GitHub that the entire world uses to write software.

And now, the final part: the configuration of the environment.

Configuration

VS Code is made of a myriad of panels and tabs and that’s what makes it very intimidating at first. That, alongside the reputation of being a tool for software developers, makes it a hard sell for writers.

So how to rearrange those visual elements, and how the application looks and feels, is crucial to me. Here, too, VS Code shows more flexibility than anything else I’ve ever used.

The way I prefer to work is by having the so-called Primary Side Bar on the right, not on the left where it is by default.

You can change its position by clicking on the top far right icon that allows you to customize the layout. This is how mine is set up today:

When I write a draft, I always have the Primary Side Bar open on the right (usually focused on Grammarly, occasionally on Explorer):

VS Code allows you to have a Secondary Side Bar, where I could place Explorer, but given that I use it only at the beginning of a new draft, it seems a waste of precious real estate.

If Copilot would behave like ChatGPT, I would keep the chat feature always open in the Secondary Side Bar. Given that it doesn’t, I prefer to dedicate space to ChatIDE.

Finally, a comment about the theme that you see in the screenshots. This is the Dark Modern theme. I’m not crazy about it, but I couldn’t find anything aesthetically more pleasing that wouldn’t compromise readability or strain my eyes.

There are hundreds of themes. I’ve tried dozens. I can’t be here all day to try themes.

To close: I tried an almost infinite variety of writing tools and workflows in the last two decades. They were either too complicated to set up and use or too limited in capabilities.

Visual Studio Code, configured as I described, is the first system I’m truly happy with. It’s not too hard to configure and it’s immensely powerful.

Thanks to Copilot, it’s critically useful even for writing shorter pieces and I highly encourage you to experiment with it.

I’m sure I’m not saying anything new to people that already use it to develop software, but to the rest of you, I hope this article will help you super-power your writing as it did with mine.