Setting up Sublime Text 2 as an IDE for Loom

The other day I started to dig around a bit in Sublime Text 2 to see how it could be used as an adhoc IDE for Loom... and I was actually quite impressed with how customizable it is and what I was able to do with it. Seeing as how there isn't an IDE for Loom at this point in time, and how there may be others out there who feel a little "lost" without having a nice homebase for their Loom project, I thought that I'd show how I configured SL2 to be used as an IDE for Loom.

I'm sure that there are better / other / more ways / things / stuff that can be done here... I'm totally new to SL2 and Loom, so I would love it if anyone else who has suggestions or tricks or anything of any value along these lines to add their comments to this thread so that myself and other SL2 users can make use of them and have the best possible environment in which to develop Loom applications in!

NOTE: I am using SL2 on OSX... but I'm guessing that everything that I go over here would be just as applicable to the Windows version :)

NOTE 2: I suck at web layout and Markdown stuff... so yeah :P

Step 1: The Project

The first and foremost thing that I missed when starting to use Loom was having a Project view to work with. Having to use Finder to view my project layout was cumbersome, and kept my Loom development experience feeling disjointed. Luckily, with minimal fuss I was able to see how SL2 can be used to set up a basic Project view, complete with filtering!

The first step is as easy as opening up the Project Menu and choosing Add Folder to Project.... From here, select the folder that is the root of your Loom project, and then Save your new Project to also be at the root of that folder:

Results in:

Once you have your project file created, you can edit it and add some filters to it to keep unwanted files and folders from cluttering it up:

Gives you the much easier to read:

And now you have a Project view for your Loom project!

NOTE: Make sure to change your Project Path in to be "/" instead of the full absolute path that it defaults to... this helps with the Build script stuff that we'll be doing below, as well as keeps your project structure system independent.

Step 2: Building

Now that SL2 is your home base, it would be great to have access to all of the simple CLI commands without having to tab between the Terminal and SL2... especially as I often do a lot of my work on a 13" MBA with no 2nd monitor! So first and foremost is to create a build script for SL2 to use for building your Loom project.

To do this, open up the Tools Menu, and choose Build System -> New Build System.... From here, you are given a blank slate with which to create any sort of build script that your compiler may need. Here is how I set up one for Loom... note how it includes a list of various "variants", which I use to piggy back on the build system and expose as many Loom CLI commands as I want to:

Once the Build Script is set up, you can now select it as the active build system from the Build Menu:

Now CMD+B lets you build your Loom project within SL2 without having to go to the command line yourself! To expand on this, we can add a bunch of User Key Bindings to link up to all of our Build Variants that we set up in the Build Script. To do this, go to Preferences -> Key Bindings - User and edit the script as follows:

You can see that all of the variants that we added to the Build Script how have keys bound to them for easy access... and I also created a key binding for the Cancel Build command :)

Step 3: Loom Menu

Lastly, to make SL2 really feel like home base for Loom, I thought it would be nice to create an actual Loom Menu in SL2. To do this, make a script called "Main.sublime-menu" inside of the Packages/User folder inside of Sublime Text 2 (the same folder where the User Key Bindings and New Build System script are stored). You can use the default Main.sublime-menu script located in "Packages/Default" as a starting point if you want, and then edit the script to be something like this:

Which gives you the end result of your very own Loom Menu inside of SL2, complete with the User Key Bindings that we set up for piggy backing the Build System with :)

So that's it for now. Hopefully someone else will find some of this information useful, and I'm definitely looking forward to to hearing some more great SL2 productivity tips from the more experienced guys out there!

Oh, if anyone would like the actual text versions of these scripts, drop me a line or an FTP where I can upload a zip to and I'll post them :)

EDIT: I'm such a dumbass sometimes... here's a Dropbox link to the scripts and project :P

Luke this is awesome, great work!

We're going to pull these changes into the SublimeText / Textmate Bundle that ships with the engine.

Cheers,
Nate

Thanks Nate :) I edited the bottom of my post with a DB link to the scripts if you want to snag them as a starting place.

This is AWESOME Luke! It looks like Nate beat me to the gold star! Duuuuude!

:)

guys im running windows 8 - im stumped.. :((

Which part has you confused? Don't all the settings here translate directly to the Windows version of Sublime Text 2?

I think there are some major holes that need filled in this how-to, particularly with Sublime project and workspace files. Are there any easy way to add these files to your project, or do you manually create them?

Oh, never mind. They're created when it's saved (Project > Save Project As...).

FYI for anyone trying to get this to work on Windows:

"cmd": ["loom.bat", "run", "--noconsole"],
"path": "C:\\Program Files (x86)\\Loom\\bin",
"working_dir": "$project_path"

Windows cmd doesn't seem to work without the file extension on loom.bat.

Any tips on setting up syntax highlighting?

You can find bundles on this thread :)

http://theengine.co/forums/loom-with-loomscript/topics/loomscript-textmate-sublimetext-bundle

I've also started working on a scratch tmLanguage and snippet collection for Sublime Text:

https://github.com/ambethia/Sublime-Loom

Awesome work!

For the syntax highlighting, I tried ActionScript, and did an ok job of highlighting the right stuff. However it wasn't an extensive test, so there's probably a lot of things that differ between LoomScript and ActionScript.

Gawd, this was an awesome tutorial - it applies to both Loom and Meteor.Js it seems! #Fun

I'm having issues after installing the loomscript package. For some reason super+forward_slash (cmd+/ or ctrl+/) doesn't work. I can't quick comment/uncomment at all. I looked at the package and it does have those keys in there, and I can still quick comment in XML, Lua, etc, just fine. Only .ls files fail. (I'm running OSX, btw).

Got any suggestions on how to get that to work?

Thanks!