Komodo Edit for Web Development

The following describes what I have done to help make Komodo Edit a more complete Web development platform on Linux. It currently addresses only the needs of front-end development. Except where noted, everything used here is free and open-source software.

Komodo Edit provides the following tools out of the box that we can use:

JSHint for JavaScript syntax checking.
html5lib or ~~Tidy~~ for HTML5 syntax checking.
- Tidy is awful for HTML5, html5lib seems ok. Also, see Validator.nu below.
CSS syntax checking using Mozilla or Komodo engines.
- Needs testing

To flesh things out, we will download and configure the following:

Testem+Mocha+ Chai for automated unit testing.
js-beautify for JS, CSS, and HTML code formatting.

I'm not yet dealing with:

Automatically updating changed web pages.¹⁾
Compiling CSS from LESS and/or SASS.
Minification.

The external tools

Node.JS

Testem and js-beautify both rely on Node.js and the Node.js package manager (i.e., npm). Follow your OS/distribution's directions for installing these. On my Debian sid-based system, it meant installing three packages:

# apt-get install nodejs nodejs-legacy npm

Testem

Install Testem with

# npm install testem -g

Mocha + Chai

Mocha and Chai should automatically install with you install Testem.

js-beautify

Install js-beautify for Node.JS with:

# npm -g install js-beautify

I also added a config file in my home directory for my default js-beautify settings:

.jsbeautifyrc

{
    "indent_size": 4,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": true,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 72
}

Add webbeautify script

I added a this script on my PATH that accepts a file, senses whether it is HTML, CSS, JS, or none-of-the-above, and then does an appropriate inplace beautify on it if possible.

The Komodo Edit tweaks

Komodo Edit configurations don't appear to be imported when you install a new point release. This means you will have to repeat most of what follows when doing version upgrades.

You might be able to copy/paste a chunk of the config files from the old to the new config directroy, but this is untested.

Install the editor

Download and install Komodo Edit from http://www.activestate.com/komodo-edit.

Extensions and plugins

Confirm that you have the following extensions and install as needed:

NST
TODO Helper
Emmet [todo]
Side By Side Diff [todo]

Go through the list of plugins and disable anything that was automatically picked up from Firefox but isn't relevant to Komodo Edit.

While you are at it, you might want to disable all the extensions that aren't relevant to your needs as well.

Add a file manager handler

Komodo Edit's expected file manager in Linux is hard coded as nautilus or konqueror. If you have neither of these, a workaround is to add a script on your PATH named nautilus or konqueror that handles

os.system('nautilus "%s" &' % filename)

or

os.system('konqueror --profile filemanagement "%s" &' % filename)

respectively.

A simpler workaround that will work in most cases is to add a soft link on your PATH named nautilus to your prefered file manager :

$ cd {a-directory-on-your-PATH}
$ ln -s /usr/bin/thunar nautilus

Configure syntax checking

From the main menu's Edit > Prederences…, select Syntax checking and tweak the settings for CSS, HTML5. and JavaScript as desired:

CSS:
HTML5: Disable “Check With HTML Tidy”; enable “Check With html5lib”
JavaScript: as desired. I'm using JSHint with a bunch of sensible options.

Add external tools to Komodo Edit

The balance of the tools we are going to add as external commands contained within custom toolbars.

To add an external command to Komodo Edit:

Be sure the sure the Toolbox is visible: View > Tab & Sidebars > Toolbox
Right click on the Toolbox and select Add > New Command…
Fill in dialog box as needed. Go nuts as associate it with a grooy icon.

A lot of the time (and in the additions below), you will want to place external commands into custom toolbars. To add a custom toolbar to Komodo Edit:

Be sure the sure the Toolbox is visible (View > Tab & Sidebars > Toolbox)
Right click on the Toolbox and select Add > New Custom Toolbar…
Fill in dialog box as needed.
Make the new toobar visible with the main meu bar: View > Toolbars > {toobar-name}

To place extenal commands onto a toolbar, drag the command in the Toolbox and drop it onto the icon in the Toolbox representing the toolbar. You may need to restart Komodo Edit to make all changes fully right.

External commands and custom toolbars are added to your ~/.komodoedit/{version-number}/tools/ directory, so it may be possible to just copy/paste these to a new/upgraded installation.

In what follows, rather than show you the dialog boxes for configuring the external commands, I will show you the resulting JSON files from ~/.komodoedit/{version-number}/tools/{toolbar-name}/

Terminal

Add an external Terminal command that opens a terminal emulator in the current file's directory. I put mine into a custom toolbar called “Utilities”.

Terminal.komodo

{
  "insertOutput": 0, 
  "parseRegex": "", 
  "doNotOpenOutputWindow": 0, 
  "icon": "chrome://icomoon/skin/icons/console.png", 
  "keyboard_shortcut": "Ctrl+<", 
  "name": "Terminal", 
  "operateOnSelection": 0, 
  "value": [
    "x-terminal-emulator"
  ], 
  "cwd": "%D", 
  "version": "1.0.12", 
  "env": "", 
  "showParsedOutputList": 0, 
  "type": "command", 
  "parseOutput": 0, 
  "runIn": "no-console"
}

Terminal (project direcory)

Add an external Terminal (project directory) command that opens a terminal emulator in the open project's root directory. I put it into a custom toolbar called “Utilities”.

Terminal_project_directory_.komodotool

{
  "insertOutput": 0, 
  "parseRegex": "", 
  "doNotOpenOutputWindow": 0, 
  "icon": "chrome://icomoon/skin/icons/home2.png", 
  "keyboard_shortcut": "Ctrl+>", 
  "name": "Terminal (project directory)", 
  "operateOnSelection": 0, 
  "value": [
    "x-terminal-emulator"
  ], 
  "cwd": "%p", 
  "version": "1.0.12", 
  "env": "", 
  "showParsedOutputList": 0, 
  "type": "command", 
  "parseOutput": 0, 
  "runIn": "no-console"
}

Testem

The Testem command starts a testem session in the project's root directory. I put it into a custom toolbar called “Webdev”.

Testem.komodotool

{
  "insertOutput": 0, 
  "parseRegex": "", 
  "doNotOpenOutputWindow": 0, 
  "icon": "chrome://icomoon/skin/icons/checkmark-circle2.png", 
  "keyboard_shortcut": "", 
  "name": "Testem", 
  "operateOnSelection": 0, 
  "value": [
    "xterm -e testem"
  ], 
  "cwd": "%p", 
  "version": "1.0.12", 
  "env": "", 
  "showParsedOutputList": 0, 
  "type": "command", 
  "parseOutput": 0, 
  "runIn": "no-console"
}

Beautify

The Beautify command does an inplace code reformat of the current file (using the webbeautify script). I put it into a custom toolbar called “Webdev”.

Beautify.komodotool

{
  "insertOutput": 0, {
  "insertOutput": 0, 
  "parseRegex": "^(?P<file>.+?):(?P<line>\\d+):(?P<content>.*)$", 
  "doNotOpenOutputWindow": 0, 
  "icon": "chrome://icomoon/skin/icons/paint-format2.png", 
  "keyboard_shortcut": "Alt+Shift+F", 
  "name": "Beautify", 
  "operateOnSelection": 0, 
  "value": [
    "webbeautify %f"
  ], 
  "cwd": "%D", 
  "version": "1.0.12", 
  "env": "", 
  "showParsedOutputList": 0, 
  "type": "command", 
  "parseOutput": 0, 
  "runIn": "new-console"
}

Note that the “runIn”: “new-console” option was the only way I could get KE to reliably notify that a file had changed.

Options and Extras

Increase line spacing

You can add a macro that runs on every file open event to increase the spacing betweens lines. This is documented here and [| http://lorib.me/code/set-line-height-komodo/[here]].

Validator.nu

Validator.nu provides a Web-based HTML validation service. It's similar to the classic W3C Validator, but it also has a convenient Python script to call the service from the command line. (Similar scripts for the W3C Validator exist, but they are third-party and likely to fall out of sync, etc.) It can be used as an alternative to or sanity check against the html5lib that Komodo Edit uses. ²⁾

Get the script

A link to the command-line script is currently about 1/5 of the way down Validator.nu's about page. Drop the file into your local bin and set its executable bit(s).

Add custom command

Add a Komodo Edit custom command to the “Webdev” toolbar:

Validate_http_validator_nu_.komodotool

{
  "insertOutput": 0, 
  "parseRegex": "", 
  "doNotOpenOutputWindow": 0, 
  "icon": "chrome://icomoon/skin/icons/html5.png", 
  "keyboard_shortcut": "", 
  "name": "Validate (http://validator.nu/)", 
  "operateOnSelection": 0, 
  "value": [
    "html5check.py %f"
  ], 
  "cwd": "%D", 
  "version": "1.0.12", 
  "env": "", 
  "showParsedOutputList": 0, 
  "type": "command", 
  "parseOutput": 0, 
  "runIn": "command-output-window"
}

To document

http://code.activestate.com/recipes/577561-komodo-javascript-macro-wrap-the-current-word-unde/

¹⁾

guard? grunt?

²⁾

The backend code and command-line script are both FOSS, but the configuration used here relies on the instance running at http://validator.nu/ and is therefore software as a service.

Mithat Konar (the wiki)

Table of Contents

Komodo Edit for Web Development

The external tools

Node.JS

Testem

Mocha + Chai

js-beautify

Add webbeautify script

The Komodo Edit tweaks

Install the editor

Extensions and plugins

Add a file manager handler

Configure syntax checking

Add external tools to Komodo Edit

Terminal

Terminal (project direcory)

Testem

Beautify

Options and Extras

Increase line spacing

Validator.nu

Get the script

Add custom command

To document