Turning VS Code into a DIY Notes App

I’ve written several posts, about my search for a great note-taking app with a text editor that uses Markdown.I’ve bounced around between a handful of different apps, but they all have flaws that make me consider switching to something else. So I’ve come back to VS Code, and I’m trying to tailor it to suit my needs.

VS Code has great built-in support for Markdown files, and there are a handful of other useful extensions to make it even better. I especially like the Markdown All in One extension, which offers auto-formatting and excellent IntelliSense.

But while VS Code is great for editing text, it lacks the organizational features and syncing capabilities that other note-taking apps offer. Or does it?

It turns out, a lot of these features are easy to achieve with VS Code with the help of a few other tools.

Project Setup

VS Code provides a lot of support for managing projects, especially those that use Git for version control. We can make use of these project-level features by creating a project to store our notes and initializing it as a new Git repository.

The “$” in these examples indicates a prompt in the terminal; it is not a part of each command.


$ mkdir ~/notes
$ cd ~/notes
$ git init
$ git add .
$ git commit -m "Initial commit"

Now we have a new directory (set up as a local Git repository) where we can store our notes. If we want to sync our notes with other devices or want them backed up, we can configure our preferred Git remote. In this example, I’m going to be using GitHub.

Once we’ve created a new repository, we can configure it as a remote repository for the notes project:


$ git remote add orgin [email protected]:YourUsername/new-notes-repo.git
$ git push --set-upstream origin master

We should now have an empty Git repository on our local machine that is synced with GitHub!

Project Structure

With any project, we need a way to structure all of our files. For a typical software project, there might be srcspec, and lib folders that hold different types of files. We can do the same thing with our notes, creating different folders for different types of notes.

Perhaps we want to keep our notes about cooking separate from our notes about work. We can do this easily by creating different folders:

.
├── Personal
│   ├── Cooking
│   │   ├── README.md
│   │   ├── broiling.md
│   │   ├── roasting.md
│   │   └── thanksgiving.md
│   └── README.md
├── README.md
└── Work
    ├── Project-1
    │   ├── README.md
    │   ├── meeting-1-notes.md
    │   └── meeting-2-notes.md
    └── README.md

You may have noticed the multiple README.md files in each directory. When we use GitHub as the git remote, it automatically detects a README file in a directory and displays the rendered form of it on the GitHub website. I typically use this as a landing page for the sub-directories of my notes.

Syncing

With the project configured with a Git remote, we can commit and push those changes to the remote repository. The typical workflow for this involves staging all of the changes that we made, adding a meaningful commit message, and pushing those changes to the remote repository:


$ git add .
$ git commit -m "This is my meaningful message"
$ git push

This certainly works, but it’s a bit cumbersome to write all the time. And the commit message likely won’t be as important as it would be for a typical software project.

We can easily write a script to do this for us and configure a VS Code task to execute it when we want to sync our notes. To start, we’ll need to create a file called sync.sh at the root of our notes project.


#!/bin/bash

echo "Syncing Notes"
git pull

echo ""
echo "Staging changed files"
git add .

echo ""
echo "Committing staged files"
git commit -m "Sync Notes - $(date)"

echo ""
echo "Pushing changes to GitHub"
git push

echo ""
echo "Finished Syncing"

We could execute this file from the root of the project, but instead, we’ll configure a task in VS Code to run it for us.

Using Cmd-Shift-P (Ctrl-Shift-P on Windows) to bring up the Command Palette in VS Code, search for Configure Task. This will create a new file called tasks.json in a new .vscode directory where you can define your new task.

Copy/Paste the following code into tasks.json:


{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sync",
            "type": "shell",
            "command": "./sync.sh",
            "problemMatcher": [],
            "presentation": {
                "echo": true,
                "reveal": "silent",
                "focus": false,
                "panel": "shared",
                "showReuseMessage": false,
                "clear": true
            }
        }
    ]
}

We should now be able to search for Run Task in the Command Palette and execute that task. If we want to trigger this task when pressing a keybinding, we can open the Command Palette and search for Preferences: Open Keyboard Shortcuts (JSON) and add the following entry.


{
    "key": "ctrl+shift+s",
    "command": "workbench.action.tasks.runTask",
    "args": "Sync"
},

This will bind the Sync task to “ctrl-shift-s”. (This keybinding is not specific to our notes project.)


Please check out the example notes repository for the full project setup. I hope this helps you set up VS Code (or your preferred text editor) for note-taking with Markdown.

Let me know what you think!

Conversation
  • cyberpsilosis says:

    Loved this guide!! Thank you! I’m excited to finally have organized note taking skills.
    What color theme is that?

  • cyberpsilosis says:

    Thank you! I’m sure you know already, but look into VSCodium. It’s an open source clone of VSCode. :)

  • I am also curious if you have had luck setting up the task in windows 10.
    When I run the task, it just opens the sync.sh file in the editor. I’m having trouble finding a solution online.

  • https://github.com/cyberpsilosis/notes

    Here is my repo. I’ve checked over my code multiple time. I believe that these steps may need a little more revising for Win 10 users. Thank you for the help. I am still very new to this but I’m trying.

    • Alex Zurek Alex Zurek says:

      I’m not sure if this is an issue with Windows or VSCodium since I haven’t tested it on either of them. It looks like you have quite a few commits that follow the message format from the “sync.sh” file, have you been able to run that script separately from VSCodium?

      • cyberpsilosis says:

        My apologies. Yes, I run the script daily without errors from within VSCodium in MacOS. Both VSCodium and MacOS are fully updated to the latest versions.

      • cyberpsilosis says:

        I run the script daily on VSCodium from MacOS. Both VSCodium and MacOS are fully updated to their latest versions.

  • cyberpsilosis says:

    Got it all straitened out. I had the parent folder of my notes repository opened in VSCodium as apposed to just the root notes repository open as my workspace. Every time I created a tasks.json, it would create the files in the parent folder. I apologize for the repeated comments. Must be my browser configuration..

  • Riccardo says:

    Hi Alex,
    thanks for the interesting post, I am also a big fan of Markdown All In One.

    If you are also interested in the relationships amongst notes, I am the lead on Foam (https://github.com/foambubble/foam), which works along side MaiO and other extensions to transform a collection of notes into a second brain.

    Regarding the synching on git, I would recommend GitDoc (https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gitdoc), which is really powerful in this regard IMO.
    Here are some other extensions we have found userful: https://github.com/foambubble/foam/blob/master/docs/recommended-extensions.md
    and recipes on how people have been using VsCode/Foam to build their second brain:
    https://github.com/foambubble/foam/blob/master/docs/recipes/recipes.md

    I hope you find this useful!

  • Comments are closed.