Atom Plug-in for Titanium Code Snippets

One of the great features of the Axway Titanium SDK is the ability to developing using any code editor. You can use the free Appcelerator Studio or use the free Appcelerator CLI along with your preferred choice of editor — for example, Sublime Text, Visual Studio Code, Atom, or use another combination.

Many of these third-party editors, especially Atom which I use, has a vibrant eco-system of community-developed packages, such as code formatting, syntax highlighting, auto-complete and more.

There are some awesome Titanium / Appcelerator packages available already:

Titanium-Alloy by Jong Eun Lee
A package that comes with syntax-highlighting, auto-complete, hyperlinked methods, functions and styles, and much more.

Titanium-Language-JavaScript by Nazır Doğan
A code completion package.

Titanium Build by Hazem Khaled
A build system for the Titanium CLI that can list devices and simulators, making it easy to use the CLI in Atom.

T-Create by Michael Gangolf
A package that makes it easy to add new projects and widgets and controllers to existing projects.

Along with these, I’ve recently developed my first Atom package called Ti-Code-Fetch, which is designed to make it easier to drop snippets of code into your project.

To install it, open Atom and go to the menu Atom > Preferences and select “Packages”.

Once there, type “ti-code-fetch” and hit search. Install the package, and you’re ready to go.

You can also install from the command line, by running:

apm install ti-code-fetch

and restart Atom.

The package works by using a remote GitHub repo of code snippets — so for example if you wanted to add some code to open the camera, just type:

open camera

In your code file, select the text and hit the short key (Control+Option+H) and “open camera” will be replaced with the code itself. Simple!

Code Snippet Demo

The neat thing about this is that you can easily fork and contribute to the code snippet repo — just create a piece of code, and save it to a JS file, replacing any spaces with hyphens so “video-player.js” can be inserted by typing “video player” in your editor and hitting the control key.

I’m adding more templates over time and hoping others may want to contribute and submit pull-requests.

Enjoy using Atom and the packages available and please share, comment and contribute to the code templates repo!


Comments are closed.