VS Code extension

There has been some discussion recently about creating a Sonic Pi extension for Visual Studio Code as an alternative Sonic Pi GUI.

As this has interested various members of the core team, some explorations have begun into this idea. A proof of concept is taking shape at https://github.com/llloret/sonic-pi-vscode-editor.

Some of the earlier discussion has occurred on Github, at the following links: first at https://github.com/samaaron/sonic-pi/issues/1902 and more recently https://github.com/samaaron/sonic-pi/issues/2371. However, in order to avoid spamming the folks in the original issues there, this thread has been created to continue these discussions in a more suitable place.

For those folks also interested in this idea, either in contributing code to or using a VS Code extension as an alternative interface to Sonic Pi, feel free to follow along with the discussion here.


This looks a nice project. I’ve never used the vscode package before but I decided to have a go and installed it on my Mac together with updated Node.js and npm. Took a bit of fiddling to get it going. I missed a vital step to start with installing vscode commands in the PATH. A cse of RTFM see https://code.visualstudio.com/docs/setup/mac
Another potential problem is setting this.rootPath in main.ts.
If you are using a packaged Sonic Pi then you need a path like.
"/Users/rbn/Downloads/Sonic Pi 3.2.2release.app/Contents/Resources"
I had the release version of Sonic Pi downloaded from sonic-pi.net renamed as "Sonic Pi 3.2.2release" sitting in my Downloads folder. You have to set a path that actually points inside the .app bundle.
If you were using "Sonic Pi" installed in a Mac Applications folder you would need
"/Applications/Sonic Pi.app/Contents/Resources" This is true for Sonic Pi 3.2.2 If you are using an earlier version say 3.1 the path would be
"/Applications/Sonic Pi.app" You can see where you want to go by right clicking the App and selecting Show Package Contents. You then need to search for where the app folder is.
The ruby path will be
this.rubyPath = this.rootPath + "/app/server/native/ruby/bin/ruby"
This is the same as for Windows just without the final .exe

One other comment. It only works at present if you open an existing file. The extension doesn’t trigger if you create a new blank file.

I look forward to further progress on this project which is very cool.

Hi, Robin,

thanks a lot for your feedback, it’s probably worth adding these useful notes somewhere in the repository.

Regarding the fact that it only works when you open an existing file (it needs to be a ruby file), that’s by design at the moment, because you might be using vscode for other languages as well, and might not want to start the sonic pi server when you open the editor. But if people prefer, it is possible to make it load it at start every time vscode is open. Or it might be better to have a specific command to launch and stop the server… open to suggestions.

I’m not sure that starting the server when a Ruby file is opened is the optimal strategy, as people could also be editing Ruby that is not for Sonic Pi.
What about having a command to start it, but also starting it when the Run command is first executed (with some feedback that this is happening)?

Tried out the extension and its pretty neat!

In regards to when to activate the server, could you maybe use a different extension (.spi, for instance)? The extension can contribute a files.associations to map .spi to Ruby for editor support, and activate the server on opening any .spi file.

Also, how do you deactivate the server? I ask because for me the extension worked for a bit, but after reloading a few times I got stuck in a state where the port was blocked and the server wouldn’t start.

I think the best will to add a setting for this, so that users can choose what they want. The extension will be activated when vscode starts, but Sonic Pi will be launched based on that preference. The preference might have these options:

  • Launch automatically when vscode starts
  • Launch automatically when there is a ruby file open in the editor
  • Do not launch automatically (of course, we’ll add a vscode command to launch)
  • Launch when opening a file with these extensions: [whatever, whatever, …] (Not sure if this is possible in the settings - this fulfils @JacksonKearl’s suggestion )

What do you think @emlyn and @JacksonKearl?

Hi, @JacksonKearl, welcome to the Sonic Pi community in in-thread.

Thank you for your feedback. Can you have a look at the reply I made to @emlyn, and let me know if you like what I’m proposing there? Basically, make this a setting, so that users can choose what they prefer.

I agree, having a setting for this is makes sense as I don’t think there’s a single behaviour that works best for every use case

Now we just need to agree on what the best default is… :wink:

For now, I think I am going to leave the default as starting the server when you have a ruby file open in the editor, but I’m open to suggestions on this.


Interesting project so i try but

Make sure you configure the paths in main.ts (rootPath and rubypath) to match your own system. This will be automated in the future.

ok where is Brian ? main.ts :slight_smile:


Can’t you give us the classic windows 10 path ? rootPath and rubypath ? EDIT : you did it :slight_smile:

So please help us to use your nice extension.
i guess this is not npm update but npm install right ?

The extension runs in development mode. Follow these steps:

Go to the extension directory (where this file is located)
run "npm update", to install the necessary node dependencies
run "code .", to open the extension directory in vscode
press F5 to run the extension
open a ruby file, which will launch Sonic Pi backend
If you run into problems, let me know, and I'll do my best to help you set this up.

so i need more help to test and to have fun :slight_smile:

ok so i got no sound :slight_smile:

some logs

[GUI] - Cleaning old sessions...
[GUI] - Discovering port numbers...
stdout: Sonic Pi server booting...

This is version 3.2.0 running on Ruby 2.7.1.

The time is 2020-05-27 13:40:15 +0200
Using primary protocol: udp
Detecting port numbers...
Listen port: 51235
  - OK
Scsynth port: 51237
  - OK
Scsynth send port: 51237
  - OK
OSC cues port: 4560
  - OK
Erlang port: 51240
  - OK
OSC MIDI out port: 51238
  - OK
OSC MIDI in port: 51239
  - OK
Websocket port: 51241
  - OK
Opening UDP Server to listen to GUI on port: 51235

stdout: Started [13532] [-] "C:\Program Files\Sonic Pi\app\server\native\scsynth.exe" -u 51237 -m 131072 -a 1024 -D 0 -R 0 -l 1 -i 16 -o 16 -U "C:/Program Files/Sonic Pi/app/server/native/plugins/" -b 4096 -B [-] C:/Users/nlb/AppData/Local/Temp/sonic-pi-pids/13532

stdout: Started [15632] [-] "C:/Program Files/Sonic Pi/app/server/native/erlang/bin/erl.exe" -noshell -pz "C:/Program Files/Sonic Pi/app/server/erlang" -s pi_server start 51240 4560 51235 [-] C:/Users/nlb/AppData/Local/Temp/sonic-pi-pids/15632

which is strange is that This is version 3.2.0 running on Ruby 2.7.1. i use 3.2.2

Can you check this and see if you are having the same issue?: https://github.com/llloret/sonic-pi-vscode-editor/issues/3

Basically, check the file .../app/server/ruby/lib/sonic-pi/util.rb in your sonic pi installation directory and see what the method register_process looks like. If it says Process.wait pid, change that to Process.wait(pid, Process::WNOHANG). Make a backup copy of the file first!
Let me know if that helped.

Read the install page for your OS when installing VScode, which has useful tips.
You need to have installed Node.js first.
The npm update is in the Command Palette which is on the View Menu.
Use this after you have opened the vscode-sonic-pi-editor folder.
You start a terminal from the Terminal menu. You must use the install code command in PATH from the Command Pallete too. You open the main.ts file from the list of the source tree on the left. Lines 86 and 87 (at the time of writing) contain the two paths you need to setup. These depend on both your OS and where you have sonic -pi installed on your system. As pointed out in the comments, these will be replaced with an easier to use system later.
I wrote a note above about how to work this out on a Mac.

Once you have the PATH sorted out in the opened terminal you type code .
Then you push F5. This rather confusingly returns you to a screen similar to the start up one, although it is entitled Extension Development Host at the top and has a section at the bottom entitled interface overview. However if you now open a Sonic PI .rb file from the File Menu you should get messages to the effect that Sonic PI server is starting up, and then you can use the Sonic Pi short cut keys appropriate to your OS to run the file. Hopefully you will hear the sound and you will see the output log window of Sonic Pi at the bottom, and you can switch it to the cues window instead if you wish.
I hope to try an install on Linux soon, and may try to do a video of the setup there.

1 Like

thanks but no.

Version : 1.45.1 (user setup)
Commit : 5763d909d5f12fe19f215cbfdd29a91c0fa9208a
Date : 2020-05-14T08:27:35.169Z
Electron : 7.2.4
Chrome : 78.0.3904.130
Node.js : 12.8.1
V8 :
OS : Windows_NT x64 10.0.18363

the sonic pi version is 3.2.2 from the .msi.

i did the changes you indicate into util.rb

A little gif may help you to see what i miss. See your PM

From what I can see on the images you have sent the server has been started successfully (See that it says Sonic Pi server started). Have a look at the logs inside the sonic-pi directory itself, and see if there is something in there that can explain why you are not hearing any sound?

Before doing that, try to do Alt-R on a Sonic Pi script and see if you get anything on the logs.

Good news it works :slight_smile:

i restart vscode and miracle. I don’t really believe in miracle in CS :slight_smile:
Cool it will help me when working on large projects

Great to know it worked for you. Enjoy, and if you like it spread the word!

yep what about auto complete on use_synth with the name of synths or sample with the samples as example ? is it planned ? The ideas will be numerous :slight_smile:
and for the snippet live_loop as the name always start with : it’s a bit boring to retype the :.

In regards to the best way to launch the Sonic Pi server:

  • Do not launch automatically (of course, we’ll add a vscode command to launch)
  • Launch when opening a file with these extensions: [whatever, whatever, …]

I think a preference with these options would be my favourite.

Yes, I’m in the process of adding more snippets now. At the moment there are some for effects, and will add more for samples, synths, etc.

I take note on your feedback on live_loop, and will move the : out of the template variable so that it remains when you edit the field.