DEV Community

Abraham Romero for The Agile Monkeys

Posted on • Edited on

Using VS Code for notes taking

Everybody writes notes. I found that my way of doing it was not efficient enough for some reason. I wanted to have them distributed in different folders (logical divisions) and have them synchronized to the cloud in an easy way plus being able to use a decent editor so I decided to give it a try with the one I had already installed: Visual Studio Code.

First of all, I installed the following extensions for VS Code:

Notes extension provides some cool options to ease the notes writing (TODO items and code fragments are key for me)

To accomplish my goal of synchronization to the cloud, I decided to use GitHub as the storage for my notes.

I created a folder for my notes and started a git repository there:

    git init

Then I created a GitHub repo and added it as a remote to the repository:

    git remote add origin git@git.....

I created a script to automate the synchronization with GitHub, I stored it under the notes folder in the path ".auto/commit.sh":

    git add -A
    git commit -m 'auto commit'
    git push origin

As the last step, I configured RunOnSave extension by creating a configuration file in the notes folder under the path ".vscode/settings.json" with this content:

    "emeraldwalk.runonsave": {
        "commands": [
             {
                "match": ".notes",
                "isAsync": true,
                "cmd": "./.auto/commit.sh"
             }
        ]
    }

With the project configured in this way, once a "*.notes" file is saved, it gets automatically committed to the GitHub repository.

With this approach, I found a way to freely organize my notes in the folders I want and synchronize them in a frictionless way.

Top comments (15)

Collapse
 
lostintangent profile image
Jonathan Carter

I'd be interested to hear your thoughts/feedback on GistPad. I built it to provide an in-editor developer library, that can include scratch notes, code snippets, frequently used command line utilities, developer docs, etc. It also supports creating interactive code playgrounds and tutorials, including a CodePen-like preview.

It stores all files as GitHub Gists, and therefore, all of your data is still yours to keep. Additionally, you can discuss your code/notes with others via inline commenting, you can upload images by simply pasting them, group your notes via a flexible tagging system, organize your notes into directories, follow your friends to see what they're up to, and quite a bit more.

I'm super keen to hear any and all feedback, and so it would be awesome to hear if this seems even remotely useful to the workflow you're looking to build ๐Ÿ‘

Collapse
 
briand91 profile image
Brian Duggan

So, something I was looking for that led me to your VSCode Extension, is the inline commenting. However what I'd really want would be a way to have that sort of inline comment but right in the repo code. That way we could keep our "no comment" policy in place, but for VSCode users there would still be a way for code authors to leave notes & thoughts & descriptions of functions/classes/components and have other team members able to see the comments and better understand that code (if they so chose).

Is something like that even doable? I'm sorry if this isn't really direct feedback on your extension.

Collapse
 
lostintangent profile image
Jonathan Carter

I'm not sure if this is exactly what you had in mind, but I just released a new extension this morning (called Code Tour), that allows you to record and playback interactive walkthroughs of a codebase. Might be interesting for your use case?

Collapse
 
briand91 profile image
Brian Duggan

Actually do you know any good resources on writing your own VSCode extension? I'd like to dabble in it and this sounds like a fun problem to try and solve!

Collapse
 
kalm004 profile image
Abraham Romero

I'll definitely take a look at it!

Collapse
 
scriptautomate profile image
Derek Ardolf

I know I'm late to the party, but people should really checkout Dendron as an alternative to this. It's really great for notes or documentation, in general, and for daily/weekly/etc. journaling from a VSCode/VSCodium extension.

Ness Labs recently published an article/interview of Dendron's founder that gives a great walkthrough about what Dendron is, why you should adopt it, advice to new users, and more:

Collapse
 
therealarsam profile image
Arsam Sarabi • Edited

This is amazing, thank you for sharing. I made my script add a random quote as the commit message XD

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
kalm004 profile image
Abraham Romero

That's really nice! Thanks for sharing!

Collapse
 
thiagodebastos profile image
Thiago de Bastos

Iโ€™ve been using vscode-journal for a few years and itโ€™s been great!

marketplace.visualstudio.com/items...

Collapse
 
kalm004 profile image
Abraham Romero

Wow! That one looks great, I'll take a look at it, thanks!

Collapse
 
thebuildguy profile image
Tulsi Prasad

Hi, does anyone use or heard of Notion? It's the best of it's kind in the store, you would love.

Collapse
 
kalm004 profile image
Abraham Romero

Sure, I've heard about it and I have some colleagues using it. I've tried different platforms and this approach seems to be working fine for me by now. Thanks for pointing it out, maybe I give it a try in the future.

Collapse
 
ucavalcante profile image
Ulisses Cavalcante

Nice to know, I'm have my way, im have a file called notes.md in my OneDrive directory, and my primary organization is using session notations from markdown, but I will try your tip ty.

Collapse
 
acoder profile image
Jonny Hotchkiss

there's so many amazing suggestions here, I'm trying to avoid extension-overload, the gistpad extension sounds great, as do Dendron, code tour, and many more!

Am running a portable version to try to understand what files go where, and many other questions about usage (vscode and it's extensions).

My main usage is for running sonic-pi headless, and trying to make vscode user-friendly for beginners. perhaps not the right tool for live algorave performances!

One really cool thing about the gistpad repo is you can browse repos from there ๐Ÿ‘

Still trying to understand how workspaces and profiles work,for things like managing open editors - the close all saved will be commonly used, the first commands I'd like to build will be to: close all settings, welcome, and walkthrough windows; toggle view modes; bind certain document types to certain grids (preview on right etc); move tab to next group (if many, or other 2, or new if 1)... guess I should jot this all down in a gist!

As Arnie said, I'll be back if I have anything useful to contribute! Thanks for all the suggestions, and almighty power-ups ๐Ÿ’ฅ

Collapse
 
ninjasun profile image
ninjasun

Hi, so how doas it looks? can you post a screenshot?