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 as 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.
• Tidy or html5lib for HTML5 syntax checking.
  • Tidy is awful for HTML5, html5lib seems ok. Also, see Validator.nu below.
• Mozilla or Komodo CSS syntax checking.
  • 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:

• Compiling CSS from LESS and/or SASS.
• Minification.

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

# apt-get install nodejs nodejs-legacy npm

Install Testem with

# npm install testem -g

This will pull in Mocha and Chai as well.

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
}

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.

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

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

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

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

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

Komodo Edit's expected file manager in Linux is hard coded as nautilus or konqueror. A workaround for this if you have neither of these is to add a script to your local bin named nautilus or konqueror that handles

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

or

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

respectively.

A simpler workaround is to add a soft link in your local bin named nautilus to /usr/bin/thunar or your prefered file manager.

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.

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:

1. Be sure the sure the Toolbox is visible: View > Tab & Sidebars > Toolbox
2. Right click on the Toolbox and select Add > New Command…
3. 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:

1. Be sure the sure the Toolbox is visible (View > Tab & Sidebars > Toolbox)
2. Right click on the Toolbox and select Add > New Custom Toolbar…
3. Fill in dialog box as needed.
4. 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.

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}/

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"
}

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"
}

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"
}

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.

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. ¹⁾

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 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"
}