days
1
0
hours
0
6
minutes
0
6
seconds
2
7
One IDE to rule all languages

An introduction to polyglot IDE Komodo

Nathan Rijksen
Komodo IDE version 9 on Mac OS X

Aiming at a developer community that grows more and more polyglot, the multi-lingual IDE Komodo is steadily increasing its number of supported languages. Komodo’s Nathan Rijksen shows us how to get started with Komodo IDE 9.

A few weeks ago, Komodo IDE 9 was released, featuring a host of improvements and features. Many of you have since downloaded the 21-day trial and have likely spent some time learning more about what this nimble beast can do. I thought now would be a good time to run you through some simple workflows and give you a general idea of how Komodo works.

SEE ALSO: Komodo IDE 9 released – Programming becoming “decidedly more polyglot”

This is just a short introduction, and much more information can be found on the Komodo website under screencasts, forums and of course the documentation.

User Interface Quick Start

Figure 1 shows what you’ll see when you first launch Komodo.

01

Figure 1: Komodo start screen

The first few icons on the toolbar are pretty self explanatory, and the ones that aren’t immediately self-explanatory are easily discovered by hovering your mouse over them. You’ll find quick access to a lot of great Komodo features here: debugging, regex testing, source code control, macro recording/playback, etc. Of course these aren’t all displayed by default; you would need a big screen to show all that. You can easily toggle individual buttons or button groups by right clicking the toolbar and selecting “Customize”.

02

Figure 2: Pane buttons

Three buttons you’ll likely be using a lot are the pane toggles (figure 2).

At the far right of the toolbar you’ll find a search field, dubbed Commando, which lets you easily search through your project files, tools, bookmarks, etc.

03-commando

Figure 3: Commando

Type in your search query, and Commando will show you results in real-time. Select an entry and press “Enter” to open/activate it, or press tab/right arrow to “expand” the selection, allowing you to perform contextual actions on it. For example, you could rename a file right from Commando (figure 3) using nothing but your keyboard. Commando doesn’t need to be accessed from the toolbar – you can use a shortcut to launch it so you can also be 100% keyboard driven (Ctrl+Shift+O on Windows and Linux, or CMD+Shift+O in Mac).

Starting a Project

The first thing you’ll want to do is start a new project. You don’t need to use projects, but it’s highly encouraged as it gives Komodosome context: “This is what I’m working with, and this is how I like working with this particular project.”

04-burger

Figure 4: The “burger menu”

To start a new Project, simply click the Project menu and then select “New Project”. On Windows and Linux the menus are at the far right of the toolbar under the “burger menu” (figure 4), as people tend to lovingly call it.

When creating a project, Komodo will ask you where to save your project; this will be the project source, and Komodo will create a single project file in this folder and one project folder that can hold your project specific tools. You can separate your project from your source code by creating your project in the preferred location and afterwards modifying the project source in the “Project Preferences”.

Once your project is created you might want to do just that: adjust some of the project specific preferences. To do this, open your “Project” menu again and select “Project Preferences” (figure 5), or use Commando to search for “Project Properties”. There you can customize your project to your liking, changing it’s source, exclude files, using custom indentation, and more. It’s all there.

05-project-prefs

Figure 5: Project properties

If you’re working with a lot of different projects, you’ll definitely want to check out the Projects widget at the bottom of the Places widget. Open the left side pane and select the “Places” widget, then look at the bottom of the opened pane for “Projects”.

Opening (and Managing) Files

You now have your project and are ready to start opening and editing some files. The most basic way of doing that is by using the “Places” widget in the left pane, but where’s the fun in that? Again, you could use Commando to open your files… Simply launch Commando from your toolbar or via the shortcut and type in your filename. Commando by default searches across several “search scopes”, so you may get results for tools, macros, etc. If you want to focus down on just your files you can hit the icon to the left of the search field to select a specific “search scope”. In this case you’ll want the Files scope (see figure 6).

06-scope

Figure 6: Scope

You can define custom shortcuts to instantly launch a specific Commando scope, so you don’t need to be using this scope menu with your mouse each time if that’s not your preferred method.

07-openfiles

Figure 7: Open files

Now that you’ve opened a couple of files, you may be starting to notice that your tab bar is getting a bit unwieldy. This is nothing new to editors, and a lot of programmers either deal with it or constantly close files that aren’t immediately relevant anymore. Some editors get around this by giving you another way of managing opened files; luckily Komodo is one of these editors, and even goes a step further. We’ve already spoken about Commando a lot so I’ll skip past the details and just say “There’s an Opened Files search scope.” A more UI-driven method is available through the “Open Files” widget (figure 7), accessible under the left pane right next to the “Places” widget (you’ll have to click the relevant tab icon at the top of the pane).

The open files widget allow you to, well, manage your open files. But more than that it allows you to manage how you manage open files – talk about meta! When you press the “cog” icon you will be presented with a variety of grouping and sorting options, allowing you to group and sort your files the way you want. If you’re comfortable getting a bit dirty with a custom javascript macro you can even create your own groups and sorting options.

Using Snippets

Many programmers use snippets (also referred to as Abbreviations in Komodo), and many editors facilitate this. Komodo again goes a step further by allowing very fine-tuned control of snippets. First let’s just use a simple snippet though.

Open a new file for your preferred language. We’ll use PHP in our example (because so many people do, I’ll refrain from naming my personal favourite). Komodo comes with some pre-defined snippets you can use, but let’s define our own. Open your right pane and look for the “Samples” folder; these are the samples Komodo provides for you to get started with. I would suggest you cut and paste the “Abbreviations” folder residing in this folder to be at the root of your toolbox, as it provides a good starting structure. Once that’s done, head into Abbreviations > PHP; these are abbreviations that only get triggered when you are using a PHP file. Right-click the PHP folder and select Add > New Snippet.

Here you can write your snippet code. Let’s write a “private function” snippet. Choose a name for your snippet: this will be the abbreviation that will trigger the snippet, and I’ll use “prfunc” because I like to keep it short and simple. Then write in your code. You can use the little arrow menu to the right of the editor to inject certain dynamic values. Most relevant right now is the “tabstop” value, which tells Komodo you want your cursor to stop and enter something there.

Figure 8 shows what my final snippet looks like.

08-snippet

Figure 8: Snippet

You’ll note I checked “Auto-Abbreviation. This will allow me to trigger the snippet simply by writing its abbreviation. The actual trigger for this is configurable, so you can instead have it trigger when you press TAB.

Now we have our snippet and are ready to start using it. Simply write “prfunc”.

Next, let’s talk about version control, wait… What? You were expecting more? No that’s it, you type “prfunc” and it will auto-trigger your snippet. It’s that easy.

There’s many other ways of triggering and customizing snippets (ahem, Commando again); you can even create snippets that use EJS so you can add your own black magic to the mix. And for use cases where even that isn’t enough, you can create your own macros, which – aside from extending your editor – can be used to do anything from changing UI font size to writing your own syntax checker, or overhauling the entire UI. You have direct access to the full Komodo API that is used to develop Komodo. That’s a whole different topic though… One far too big to get into now, but be sure to have a look at all that the “Toolbox” offers you, because snippets are just the tip of the iceberg.

Previewing Changes

So, you’ve created some files, edited them (using snippets I hope – that took a while to write down, you know!) and now want to see the results. Rather than leaving Komodo for your terminal or your browser, why not just do it from inside Komodo?

Since it was a PHP file we were working on, you can simply launch your code by pressing the “Start or continue debugging” button in your toolbar. This will of course run your code through a debugger but it’s also useful just to run your code and see the output. You could skip the debugger altogether by using the Debug > Run Without Debugging menu. Assuming your PHP file actually outputs anything, Komodo will open the bottom pane and show you your code output. Output not what you expected it to be? Set a few breakpoints and jump right into the middle of your code.

09-debug

Figure 9: Debug

You could take it even further and start editing variables while debugging, starting a REPL from the current breakpoint, etc, provided the language you are using supports this functionality.

I did say browser back there though, so what about previewing HTML files? Simply open your HTML file and hit the “Browser Preview” button in your toolbar. Select “In a Komodo Tab” for the “Preview Using” setting and customize the rest to your liking, then hit Preview. The preview will be rendered using Gecko. Komodo is built on Mozilla so basically it’s rendering using Firefox, right from Komodo.

With Komodo 9, you can now even preview Markdown files in real-time. Just open a Markdown file and hit the “Preview Markdown” button in your toolbar to start previewing (see figure 10).

10-markdown

Figure 10: Preview markdown

Using Version Control

11-vcs

Figure 11: VCS

If you’re a programmer, you probably use version control of some kind (and if not – you really should!) whether it be Git, Mercurial, SVN, Perforce or whatever else strikes your fancy. Komodo doesn’t leave you hanging there; you can easily access a variety of VCS tasks right from inside Komodo (figure 11).

Let’s assume you already have a repository checked out/cloned. We’ll go straight to the most basic and most frequently used VCS task – committing. Make your file edits, and simply hit the VCS toolbar button (you may need to enable this first by right clicking the toolbar and hitting “Customize”). Then select “Commit”, enter your commit message and fire it off. Komodo will show you the results (unless you disabled this) in the bottom pane.

Komodo IDE 9 even shows you the changes to files as you are editing them, meaning it will show what was added, edited and deleted since your last commit of that file.

12-trackchanges

Figure 12: Track changes

The left margin (with your line numbers) will become colored when edits are made. Clicking on one of these colored blocks will open a small pop-in showing what was changed and allowing you to revert the change or share the changeset via kopy.io. (kopy.io is a new tool created by the Komodo team, which serves as a modernized pastebin, implemeting nifty new features you probably havent seen elsewhere such as client-side encrypted “kopies” and auto-sizing text to fit to your browser window.)

Customizing

You’ve now gone through a basic workflow and are starting to really warm up to Komodo (hopefully), but you wish your color scheme was light instead of dark, or the icon set is too monotone and grey for your taste, or.. or.. Again Komodo’s got you covered. Head into the Preferences dialog via Edit > Preferences or Komodo > Preferences on OSX. Here you can customize Komodo to your heart’s content: the “Appearance” and “Color Scheme” sections are probably of particular interest to you. Note that by default Komodo hides all the advanced preferences that you likely wouldn’t want to see unless you are a bit more familiar with Komodo. You can toggle these advanced preferences by checking the “Show Advanced” checkbox at the bottom left of your Preferences dialog (as in figure 13).

13-prefs

Figure 13: Preferences

Inevitably some of you will find something that simply isn’t in Komodo though, because there isn’t a single IDE out there that has ALL the things for EVERYONE. When this happens, the community and customizability of Komodo is there for you, so be sure to check out the variety of addons, macros, color schemes etc. at the Komodo Resources website, and if you want to get creative, share ideas or request features from the community, then head on over to the Komodo forums.

Just a Glimpse

Hopefully I’ve given you a glimpse of what Komodo has to offer, or at least given you an idea of how to get started with it. Komodo is a great IDE, even if you aren’t in the market for a huge IDE, and the best thing about it is you don’t need to buy/launch another IDE each time you want to work on another language. Komodo has you covered for a variety of languages and frameworks, including (but not limited to!) Python, PHP, Go, Ruby, Perl, Tcl, NodeJS, Django, HTML, CSS and JavaScript. Enjoy!

Author
Nathan Rijksen
Nathan Rijksen, Komodo developer, has web dev expertise and experience as a backend architect, application developer and database engineer, and has also worked with third-party authentication and payment modules. Nathan is a long time Komodo user and wrote multiple macros and extensions before joining the Komodo team.

Comments
comments powered by Disqus