Joplin's vscode plugin is released!

Apps
1

joplin-vscode-plugin

English, 简体中文
install VSCode Plugin Marketplace

Overview

joplin-vscode-plugin offers editing and management of Joplin notes with the power and flexibility of VSCode.

Joplin Web Clipper is designed to communicate with browser extensions by sharing Notes, Notebooks, Tags, etc. through a REST web API. joplin-vscode-plugin connects to that same REST endpoint to freely make changes to your notes without ever leaving the editor.

Why does this plugin exist? Read my motivation for developing it.

What can it do? The roadmap lists both existing and planned features.

Never heard of Joplin? You're missing out on a great opensource synchronized note taking app.

Requirements

  • Joplin version > v1.4.19
  • VSCode version > v1.45.0
  • Joplin Web Clipper enabled
  • Basic familiarity with using both Joplin and VS Code

Install Joplin VSCode plugin

Search for "Joplin" in the VSCode Marketplace. Find "joplin-vscode-plugin" and click Install.

install plugin

Configure

To access the Joplin database, we need a connection to the API endpoint opened by Joplin Web Clipper. That means Joplin must be running and Web Clipper must be enabled.

For help with Web Clipper refer to: Joplin Web Clipper.

Three settings need attention to get up and running.

Port

  • Copy the port number from Joplin settings and paste it here. The active port displays when Web Clipper is enabled:
    Web Clipper -> Step 1: Enable the clipper service -> Status

Token

  • Copy your Authorization token from Joplin settings and paste it here:
    Web Clipper -> Advanced options -> Authorization Token

Program Profile Path

This setting is required if you wish to use attachment-related features.

In general, if you are using a portable application, it should be the . /JoplinProfile directory, in which you should see the resources, templates, and tmp directories.

install plugin

Restart VSCode

Currently configuration edits do not trigger a fresh connection. Simply close VSCode and it should connect to Joplin the next time you start.

Say Hello Joplin

Type the key chord Ctrl+J Ctrl+J and celebrate. :tada: That hotkey combo activates the View: Show Joplin command, opening the Sidebar to reveal all your Notebooks.

Usage

All your Notes and Noteboks can be found in the Sidebar. Unfold the Notebooks to see Subnotebooks and Notes beneath.

Click on a Note to open a working copy in the Editor. Save it to push changes back to Joplin.

You have full access to create, edit, and delete both Notes and Notebooks, at your whim. And it doesn't even stop there. The power is yours now. :woman_superhero:

Tip: Explore the results of typing "joplin" in the Command Palette to find out what great features I didn't tell you about.

Commands and keybindings

VSCode has a lot of keybindings. To avoid constantly clashing with all the built in settings, we laid claim to just one desirable hotekey, Ctrl+J, and turned that into the trigger for a key chord.

Claiming Ctrl+J displaced the native binding for workbench.action.togglePanel (View: Toggle Panel). For your convenience a sane replacement binding is already added at Ctrl+K Ctrl+J.

Type Joplin into the Command Palette (Ctrl+P) to see all the new commands available to you. Some of them already have keybindings. Assign new bindings under the Ctrl+J namespace to fit your needs.

31 Likes
2

Why write this plugin for vscode

  1. As a professional editor, the editing function of vscode is unmatched by the note-taking tool. For example, shortcut key support
  2. Vscode is not only an editor, but also has a very large plug-in ecosystem, so it has already been implemented in markdown formatting, linter verification, pdf export and other functions. There is no need to re-create the wheel in the note tool - it is possible Is a square wheel
  3. In fact, I have been using vscode to edit markdown documents, and git + vscode to store company-related documents. At the same time, joplin is also used to store personal notes, but after a while, I found that I need to edit vscode + the synchronization/search function of joplin.

So I wrote this plugin for people who have the same needs as me.

In addition, I hope that joplin adds the concept of workspace to be able to distinguish company/personal notes/documents

I will add some error tips later

I created a GitHub Pages website to supplement related documents

7 Likes
3

Morning! This looks really interesting! Before I install this (since I’m currently at work and not home), does this work even when Joplin is encrypted?

4

As long as you can manipulate data from joplin’s web api, it should work properly (assuming you install the Web Clipper plug-in can work normally), of course, you can also install and test it, if there are any problems, please directly @me

1 Like
5

How do I connect VSC to Joplin? I get an error
connect ECONNREFUSED

6
  1. Joplin needs to open Service
  2. VSCode set joplin.token
  3. Restart VSCode

image
image1047×1080 61 KB

image
image988×473 28 KB

If you still have any questions, please continue to reply here, thank you

1 Like
7

This didn’t work. It works for the browser (chrome) but not for my VSC. Maybe that’s because I’m using a newer version?
Joplin 1.0.220 (prod, win32)

8

Can you see the icon in the sidebar? If yes, can you see the list of notes?

9

If you don’t see the icon in the sidebar, you may need to update vscode and reinstall the plugin. Otherwise, if you can’t see the directory listing, then the port may be wrong.

10

It now suddenly worked after i’ve put in the port number again - the same number as it was in, just retyped it in as I also suspected there was a problem with port because the error message referenced to another port. This even though that the port in the setting was correct. I suspect that there might be a formatting problem in the port section in vsc.

11

No, I think it may be that you have not restarted VSCode. At present, you must restart VSCode after installing the extension for configuration to reload the entire plugin. This is a problem, but it may not be solved so quickly. . .

12

In addition, I think you may need to use the pre-release v1.0.224, because it contains several new APIs, such as opening notes in VSCode according to noteId.

13

I did restart it several times.
Anyways, after I saw the folders, I tried to get to the notes but I couldn't. After another restart, it again didn't work. This time, I've received following more clear error, but I've checked several times -- it should be correct.

Joplin's token/port is set incorrectly, unable to access Joplin service!

Just saw your new message above. This makes more sense. I'll wait until I'll get the pre-release version :). I'll come back to you when it arrives on my computer :slight_smile:

14

I tried it several times, also with newest version of Joplin to no avail. I’ve uninstalled this extension for now.

15

Thank you very much. It works very well. I’m not sure where the repo is so I might list two problems I’ve met.

  1. The .md is opened with the default editor, e.g., Emacs in my case, instead of vscode. So I have to change it from Emacs to score, which is not that convenient.
  2. Cmd+Space (macOS) is mostly set for spotlight, some other default keybinding might be better?

Testing under macOS Mojave 10.14.6

16

It looks very cool, thanks for the effort!

If you don’t mind me asking: From a functional perspective, how is your vscode + Joplin solution different from just using vscode + directories + git sync? I’m really not trying to make a case in favor or against something, but to me, it always felt that Joplin brings navigation, synchronization, and editing in a nice package to the table. Once you are ‘outsourcing’ navigation and editing to vscode and sync to git, what usecase remains for Joplin?

17

In fact, I am satisfied with joplin’s synchronization and search functions, but in contrast, it does not support editing and shortcut keys-obviously, joplin knows it, so it allows editing in an external editor, I just do Some work has been done to make editing easier, that’s all. In addition, I also use vscode + git sync. There are some troublesome problems in synchronization. There is not much criticism in search and editing.

sgugler via Joplin Forum <cozic@discoursemail.com>

18

The first point I seem to be powerless, because I need to use joplin’s api to open notes (the file does not exist in the local file system before opening, it is saved in the database), unless joplin’s api needs to support only sharing and not open the default The editor also returns the location of the md file. The second point is that I don’t quite understand what you’re talking about. If joplin’s shortcuts conflict with some Mac OS’s shortcuts, you need to issue an issue like joplin’s official

19

Also I am not sure this is the best way, this is just an experiment, a comparison of joplin integrated into vscode and joplin/vscode + git, and even I want to know whether joplin + vscode is really better than notion (it has recently optimized search The algorithm makes it faster, and the original basic paid plan is free, but the editing function is still a custom format-it seems to support some markdown features)

20

I'll test the plugin. Looks very interesting. I caught myself often to use VS keybindings in Joplin when writing markdown (e.g. alt+ Cursor up/down to move lines). :slight_smile:
Thanks for your work!