As a long time vim user I didn’t want to use the in-browser code editor, so I wrote a script to synchronize the CodeMirror editor with an external file / vim. In the hopes it will benefit someone else, I shared it on github.
Scripts are here, MIT licensed.
I was looking for a wiki page with tools to add a link to the script, but the freecodecamp wiki page on github says the forum is the new wiki, so I am posting it here.
10 Likes
This is amazing. Such a cool project. I’d really like to learn how to use Vim effectively. Are there any resources you would recommend to someone with no experience?
@Swoodend just run vim tutor.
Helps if your on a linux system, open up the command line and off you go.
It not very difficult to make a start. 
1 Like
@charliemowood this seems way cool and better than copying and pasting into the Chrome console.
I’m using a combination of Atom for editing and Chrome dev tools for testing. It can be a bit of a headache going back and forth.
It seems slightly related to this Wiki entry: [Debugging Javascript with Browser Dev Tools(https://forum.freecodecamp.com/t/debugging-javascript-with-browser-devtools/19485)
Would you mind explaining some of the nuts and bolts of what this script does?
Is it making a local copy of code in the browser?
Does the editor open the local copy?
Will this, in theory, work in a non-unix/linux OS and any text editor?
By the way I noticed a few spelling errors in the Read me file.
- / from which mens… Should be means.
- Instal required python… should have two Ls.
There is also and addon on firefox, which is called ‘it’s all text’, which has a similar function.
1 Like
@the-thief thanks for the typos… Fixed.
I added a screencast and some more instructions.
In manual sync - push the script reads the file (stdin works as well) and loads the contents into the browser through chromium remote debugging protocol, using chromote. Manual pull works the other way around.
You can use it with files, or you can pass the input to stdin, so no local copies on disk are needed.
But the simplest way to use it with your favourite code editor would be through the disk files, using the syncfolder command.
When the script is executed with syncfolder, it enters a loop where it watches the browser for changes and the files in the specified folder for changes, and makes the sync when something changes. The browser watching part of the loop is very inefficient. I am pooling for changes every 1s, so you might get into trouble with foldersync, if the files are big.
@the-thief In theory, it should work with any OS, as long as it can run Python3 and a chromium based browser (chromium-browser, Google Chrome, …).
On a different OS, launch the script with your python3 interpreter. Let me know if you succeed. I would be happy to add instructions for other platforms.
@charliemowood I was using it’s all text before. It works very well and is simple to install. However, I couldn’t quite get it to work in a way that would allow me not to touch the mouse. At all. So I wrote this script.
An extension that is even better in this regard, if you are using sublime text, is GhostText.
@Swoodend learning to use vim is all about finger memory, and finger memory comes from repeating the same thing, many times. vimtutor is a good starting place. I would also suggest you try a vim-keybindings plugin for your browser.
I am using vimperator on firefox, but there are other options. Google search gives plenty of suggestions. Choose a plugin that allows you to use your browser in a way you are used to and doesn’t force you to learn a bunch of keybindings to start, so the start will be easy and you will get the finger memory with time, hopefully avoiding some of the drawbacks of vim’s steep learning curve.