Using Sublime Text with Levure
- Overview
- Get Sublime Text
- Install LiveCode language package
- Configure Sublime Text user settings
- Install LiveCode linter
- Notifying LiveCode of script-only stack updates in Sublime Text
With the introduction of text based script-only stacks in LiveCode, and the ability to use them for object behaviors as well as libraries, it is now practical to write, edit, and manage most LiveCode scripts with a text editor such as Sublime Text. This article describes how to set up Sublime Text as a LiveCode script editor. As of October 12, 2018 Sublime Text is the only text editor that will notify the Levure IDE plug-in when saving a script only stack so that the script can be updated in memory. This allows you to edit in the text editor while working on your Levure application in the IDE.
Levure provides support for Sublime Text in the following ways:
- A LiveCode language package
- A LiveCode linter
- Integration of Sublime Text with LiveCode
If you don't already have it, you can get Sublime Text here.
If you are setting up Sublime Text for the first time, you should also install Package Control.
The LiveCode package for Sublime Text adds syntax highlighting for LiveCode script files. It is intended for editing script-only stacks.
The package includes a number of snippets that provide auto-completion when creating new handlers, if-then statements, try/catch blocks, etc. Auto-complete is also provided for all keywords, properties, functions, and commands.
To install the LiveCode package in Sublime Text, use Package Control. This ensures the plug-in will be updated when new versions are available.
To install via Package Control, do the following:
-
Within Sublime Text, bring up the Command Palette and type
install
. Among the commands you should seePackage Control: Install Package
. If that command is not highlighted, use the keyboard or mouse to select it. There will be a pause of a few seconds while Package Control fetches the list of available packages. -
When the packages list appears, type
livecode
. Among the entries you should see one starting withLiveCode
. Click on theLiveCode
entry or select it and pressEnter
with your keyboard to install the language package.
This screencast by Trevor DeVore shows you some settings you can change in your Sublime Text user preferences to improve your experience while editing and managing your LiveCode script files in a version control system such as Git.
The linter plug-in for SublimeLinter provides an interface for checking syntax for LiveCode scripts in Sublime Text. The linter will be used with files that are using the “LiveCode” syntax in Sublime Text.
You can get the LiveCode linter and installation instructions here:
Important - you should only have one Levure-based application open in an instance of the LiveCode IDE at a time.
In order for Sublime Text to notify LiveCode that a script has been updated three things need to be in place:
- The LiveCode language package for Sublime Text must be installed.
- A Sublime Text project must exist and be configured to notify LiveCode (see below for an example).
- The
levureLoadExternalEditorServer
command must be called within the LiveCode IDE.
NOTE: it's important that you always launch your Sublime livecode project by opening the associated Sublime project file (not for example by opening one of the Livecodescript files directly). Otherwise Sublime won't load the project settings, and Livecode will not be sent updates as you save.
With the above setup the LiveCode IDE will be acting as a server and Sublime Text will be a client. Whenever you save a LiveCode file in Sublime Text a request will be sent from Sublime Text (the client) to the LiveCode IDE (the server). A Levure application script running in the LiveCode IDE will find the stack that was updated in Sublime Text and update the script in the IDE.
A good place to call levureLoadExternalEditorServer
is in the InitializeApplication
command in the app.livecodescript
stack file. For example:
command InitializeApplication
# Listen for updates from Sublime Text
if the environment is "development" then
levureLoadExternalEditorServer
end if
end InitializeApplication
By default Levure listens on port 61373 for updates from Sublime. If you want to work on more than one Levure project at a time you can configure SublimeText and Levure to use a different port.
Create an .env
file in the ./app
folder. It may already exist if you created it to store the password used to encrypt your stacks when packaging your application. Add the following line to the .env
file:
EXTERNAL_EDITOR_PORT=61374
To send requests to a specified server and port whenever LiveCode files are saved, create a Sublime Text project for your Levure application. Once you have done that, edit the .sublime-project
file and add livecode
configuration options. You will find an example below. You will need to modify "MyProject" and possibly the port number that you are using.
{
"folders":
[
{
"folder_exclude_patterns":
[
"builds"
],
"path": ".",
"name": "MyProject",
}
],
"livecode":
{
"notify_on_save": true,
"notify_server":
{
"host": "localhost",
"port": 61374,
"debug": false
}
}
}
With the .env
file in place and the .sublime-project
file updated you can now control the port that LiveCode and Sublime Text use to communicate.
This screencast by Trevor DeVore shows you how to configure a Sublime Text project to send a notification to a Levure application running in the LiveCode IDE every time you save a .livecodescript file.
Levure is an application development framework written for LiveCode.