Mithat Konar (the wiki)

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Komodo Edit for Web Development ======
The following describes what I have done to help make [[http://www.activestate.com/komodo-edit|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 [[wp>free and open-source software]].

Komodo Edit provides the following tools out of the box that we can use:
  * [[http://www.jshint.com/|JSHint]] for JavaScript syntax checking.
  * [[https://github.com/html5libmisc:|html5lib]] or <del>[[http://tidy.sourceforge.net/|Tidy]]</del> 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:
  * [[https://github.com/airportyh/testem|Testem]]+[[http://visionmedia.github.io/mocha/|Mocha]]+ [[http://chaijs.com/|Chai]] for automated unit testing.
  * [[https://github.com/einars/js-beautify|js-beautify]] for JS, CSS, and HTML code formatting.

I'm not yet dealing with:
  * Automatically updating changed web pages.((guard? grunt?))
  * Compiling CSS from LESS and/or SASS.
  * Minification.

===== The external tools =====

==== Node.JS ====
Testem and js-beautify both rely on [[http://nodejs.org/|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:<code bash># apt-get install nodejs nodejs-legacy npm</code>

==== Testem ====
Install [[https://github.com/airportyh/testem|Testem]] with <code bash># npm install testem -g</code>

==== Mocha + Chai ====
[[http://visionmedia.github.io/mocha/|Mocha]] and [[http://chaijs.com/|Chai]] should automatically install with you install Testem.

==== js-beautify ====
Install [[https://github.com/einars/js-beautify|js-beautify]] for Node.JS with:<code bash># npm -g install js-beautify</code>

I also added a config file in my home directory for my default js-beautify settings:
<file javascript .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
}
</file>

==== Add webbeautify script ====
I added a [[todo|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 =====

<WRAP center round important 60%>
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.
</WRAP>
 
==== 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 [[http://community.activestate.com/forum-topic/xfce-and-show-file-manager|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 

<code python>os.system('nautilus "%s" &' % filename)</code>
or
<code python>os.system('konqueror --profile filemanagement "%s" &' % filename)</code>
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 :
<code bash>$ cd {a-directory-on-your-PATH}
$ ln -s /usr/bin/thunar nautilus</code>

==== 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: FIXME
  * 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.

<WRAP center round tip 60%>
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.
</WRAP>

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

<file javascript 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"
}</file>

=== 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".

<file javascript 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"
}</file>

=== Testem ===
The **//Testem//** command starts a testem session in the project's root directory. I put it into a custom toolbar called "Webdev".

<file javascript 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"
}</file>

=== 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".

<file javascript 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"
}</file>

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 [[http://community.activestate.com/forum/setting-line-height-code-editor|here]] and [| http://lorib.me/code/set-line-height-komodo/[here]].

=== Validator.nu ===
[[http://validator.nu/|Validator.nu]] provides a Web-based HTML validation service. It's similar to the classic [[http://validator.w3.org/misc:|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. ((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 [[wp>software as a service]].))

== Get the script ==
A link to the [[http://about.validator.nu/html5check.py|command-line script]] is currently about 1/5 of the way down Validator.nu's [[http://about.validator.nu/|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:

<file javascript 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"
}</file>

=== To document ===

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