Profile picture

Using VSCode for Personal Knowledge Management

Profile picture

Raphael Tang / June 18, 2022

11 min read

As a developer, VSCode is one of my most used tools, and it's where I spend most of my day. Having gotten used to it, I use it for all the text manipulation that I do with my computer. There is no editor that comes close to the simplicity and intuitiveness of the manipulation shortcuts (except vim).

Recently, I've been interested in PKM (Personal Knowledge Management), the practice of capturing the ideas and insights we encounter in our daily life, whether from personal experience, from books and articles, or from our work, and cultivating them over time to produce more creative, higher quality work, organise our thoughts, and document specific strategies and processes to live better, more healthier and productive lives.

Such a practice is known as "Building a Second Brain". It helps you clear your mind, take away stress, and provides structure and planning within life. I personally resonate with this quote from David Allen:

Your mind is for having ideas, not holding them.

Most of us spend way too much time looking for the best note taking apps. The truth is: there is no such app. Creating a good system for processing, organising and storing your thoughts effectively will deliver miles more benefits compared to finding "the perfect app". There is, however, a perfect note taking system. As Scott Adams said,

Losers have goals, winners have a system.

Frankly speaking, it doesn't matter what tool you use, it can be a couple of tools, or just one. The most important thing is that the tool supports the system that you've devised and put in place. It can be as basic as the default notes app or even pen and paper. Here's a general overview of my system:

  • Zettelkasten, a method for taking notes effectively

    • Notes must not take up half of the page, it should be as short as possible, written in your own words

    • Every time I come across a piece of knowledge, I save it into the fleeting notes folder, and when I have time, I review those notes and write them in permanent notes, using my own words

    • Related pieces of knowledge are linked together through deep links in the file. This is similar to how our brains work, creating new experiences from the things we absorb through neuroplasticity.

    • By doing this, you learn better when your brain forms stronger connections by taking out and making use of the information you just absorbed. This technique not only helps you learn faster, it generates more creative output and encourages you to think differently, using the concepts you've learned

    • Projects

      • Things in your life that have a goal, starting point and deadline.

      • An example: Complete app mockup. There is a specific goal, and a variety of tasks that lead up to that goal being achieved.

    • Areas

      • Areas of interest in your life

      • Examples include: Health, finances, finance, education, writing.

    • Resources

      • Attachments, documents, links, web pages, things that are used by all 3 categories
    • Archive

      • Inactive items from the other 3 categories

I'll go more in-depth into this in another article.

We can use VSCode to effectively create, manage, store, and link all the thoughts within this system. Here's how I do it:

Separating the "Development VSCode" from the "Note Taking VSCode"

You can actually use arguments to tell VSCode to use a completely separate directory for your extensions.

Under the folder that you've created for Notes, add a bash script:

$ touch code

Paste the following contents into the script:

#!/usr/bin/env sh

CODE_DATA_DIR=".vscode-data"
CODE_DATA_EXT_DIR="$CODE_DATA_DIR/extensions"
CODE_DATA_DAT_DIR="$CODE_DATA_DIR/data"

command -v code &> /dev/null || {
  echo "VSCode is not installed on your system."
  exit 1
}

mkdir -p "$CODE_DATA_DIR"

code . \
  --extensions-dir    "$CODE_DATA_EXT_DIR" \
  --user-data-dir     "$CODE_DATA_DAT_DIR" \
  --sync off

Using the --extensions-dir and --user-data-dir arguments, we tell VSCode where it's extensions and user data directories can be placed. This means, instead of using the default installation directory, your entire installation will be re-created in a separate directory, where VSCode will not interfere with your existing profiles.

You can then run this script to have VSCode launched with it separated from your main installation. You can do whatever you'd like to this, and not worry about your changes affecting the main install.

All you're doing is: Using the VSCode binary itself, but telling it to create all its runtime files on a different folder. This means you could even add the "code" or "Visual Studio Code.app" file within the same folder and use that instead. Now you have a fully self-contained Note taking folder, which can run on any computer with the same operating system as the one you use.

You can see this if you drag the sidebar on the left. Even after changing the width, you can see that the development VSCode installation is not affected at all ✅

Just as you would, you can add specific extensions to support this system. Here's my list:

{
  "recommendations": [
    "alexandernanberg.horizon-theme-vscode",
    "streetsidesoftware.code-spell-checker",
    "foam.foam-vscode",
    "yzhang.markdown-all-in-one",
    "pkief.material-icon-theme",
    "mushan.vscode-paste-image",
    "viktomas.slipbox",
    "bierner.emojisense",
    "bierner.markdown-emoji",
    "bierner.markdown-mermaid",
    "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
    "Gruntfuggly.todo-tree"
  ]
}

You can reload VSCode to get a popup that will ask you if you'd like to install all the recommended extensions.

You should also probably look into themes to make your note taking VSCode look and feel different from what you're used to in the regular VSCode, simply because you will then be able to associate each of the setups seperately from what they're typically used for. It just feels different, trust me.

I used Foam for backlinking and the graph view, as well as Zettelkasten link support, note previews, and more. Basically the core of the whole system. I won't go into what the other plugins do, but those pretty much do what they have on the tin.

A basic walkthrough of my setup:

Double clicking the script from Finder launches the application in the Notes folder.

Here's how the Graph view looks:

It's a mess, I know. It's my old note taking setup, and I'll get into that later.

As you can see, some of the Zettelkasten notes are linked to one another, similar to how our brain stores information. It lets you see exactly what links with each other properly with the ability to pinpoint exactly what you are looking for. You can trigger this by opening the command palette and typing "Show Graph", hit enter.

The Home.md file is the "entrypoint" to the knowledge base. I can see at a glance, which of these folders I will be able to use. Everything is written in Markdown format, which is an easy way to add structure to your writing. In here, I document 3 things:

  1. What this knowledge base is

  2. How I structure my system

  3. How my productivity syncs with my life

These 3 things help me maintain order and composition with my knowledge base, helps put priorities in place and keeps my mental processes freed up by being self-documented.

All my Zettelkasten notes are kept in the Zettelkasten folder. I use it to store knowledge that I get from various sources, and develop them mentally, to turn them into permanent notes. Literature notes are notes that contain factual sources, citations and whatnot. I keep them separate from the permanent notes because they contain references and quotes that will most likely be re-used across multiple notes. Most of the time, the reference notes should only contain your interpretation of a particular source at most, not the development of your thoughts. It is important to maintain a clear separation of references and permanent notes. Permanent notes are notes that only contain your own words, and nothing else. It is a place to develop your thinking, generate creative output, and form deep connections with other pieces of information.

Any time I come across a useful source, I will immediately add it to literature notes, with an interpretation of it in my own words, with some source text or images.

On the left, we have the file tree, like what you're used to.

Aside from that, we also have a couple of other sections:

  • Timeline — VSCode keeps a history of all your file changes, which is helpful when you make mistakes and want to go back to the previous state quickly

  • Backlinks — You can see all the pieces of knowledge that link to this note

  • Tag explorer — See all the tags that you've made and which notes contain them, you can also click on the tags to find all notes with related topics

  • Orphans — Notes that have not been linked to anything, which means it's not "part" of your digital brain

Taking a look at the Home.md file, hovering over a bi-directional link shows a preview of the file, instead of documentation like what you're used to:

Let's add a new reference to a literature note. I'll first type two squared brackets, and the autocompletion popup will be shown. Here's how it looks like:

It shows a preview of the note, with the full location and name. You can hit "tab" to fill this in.

Notice that you only need the file name and uses that to find notes within the workspace. This is essential, as it keeps names short but also encourages you to follow as flat of a file structure as possible and make use of MOCs (map of contents) to present an index of your notes, similar to what a folder does. This allows you to see your notes at a glance and prevent clashing names, if you wrote another note that already has an entry with the same topic, why would you write the same note again? You should just append to the existing note. It also prevents confusion in that if you had 2 notes with the same names located in multiple different folders, you wouldn't know which one you should be linking without looking into the note contents.

What are the benefits of such a setup?

It's ubiquitous

VSCode is simply a text manipulation tool. There are a whole world of tools out there which do the same thing, like vim, emacs, geany, etc. You are not locked into a proprietary format, your files are simply files, you can choose where you want to store them, how you want to store them, and what you want to do with them. Take Notion for example, you cannot, for instance, store all the files locally, they must be on Notion's servers and theirs only. Your vault doesn't actually belong to you. It's still theirs, with the promise of being yours.

It's (mostly) timeless

Although text formats have changed over the years, the old formats have stuck with us as well, and it's pretty easy to convert between the formats, and will be for the foreseeable future. The simplicity of text formats and the openness in and of itself has shown that it's the only format that has proven the test of time.

Incredibly flexible

From a writing perspective, you can choose to write your notes in different formats and mix them up as you please. Wanna use React components in Markdown? Just add MDX. Wanna have attributes in your notes? Want to add a whole Excel spreadsheet? Sky's the limit.

From a systemic perspective, anything that can be automated with text can be automated in this system. For example, I wanted to have automatic hourly backups of my notes somewhere safe but remote, just in case something happens with my devices or storage drives. I set up a cron job on one of the synced nodes that runs every hour, and pushes the most recent commit of the notes into GitHub. To prevent merge conflicts, only one of the nodes has the ability to control the version control on the system. Other devices on the network can and should only be able to modify the notes, with SyncThing handling the file changes gracefully.

You can, quite literally, automate this entire system. If you have something that you do on a daily basis, just create a script that does that task for you, whether it's creating a daily note, adding your latest tasks to your calendar of choice, or syncing study materials to your notes folder, you can write scripts or use existing open source tools that do exactly what you want, anytime you need them.

Is this perfect?

Absolutely not. It is important to note that your note taking system grows with you. It's better to get started with a simple system first that makes sense to you rather than to spend weeks trying to come up with the "perfect" system. There is no perfect system.

Quoted from Foam: Foam is like a bathtub. What you get out of it depends on what you put into it.

Conclusion

In the end, I stuck with Obsidian instead, because taking notes in a coding environment feels different to taking notes in a dedicated editor and seperate app. Obsidian helps me focus on writing ideas and encourages free flow of thoughts while VSCode helps me think about how I am going to structure my code. These are two very different things and I very much like it this way.

I hope you enjoyed reading this as much as I did writing.

Subscribe to the newsletter

Get emails from me about software development, SaaS, and early access to new articles.