User Tools

Site Tools


misc:komodo_edit_for_web_development

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
misc:komodo_edit_for_web_development [2013/11/02 02:30] – [Get and tweak Komodo Edit] mithatmisc:komodo_edit_for_web_development [2014/02/05 19:27] (current) mithat
Line 1: Line 1:
 ====== Komodo Edit for Web Development ====== ====== 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 as noted, everything used here is [[wp>free and open-source software]].+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: Komodo Edit provides the following tools out of the box that we can use:
   * [[http://www.jshint.com/|JSHint]] for JavaScript syntax checking.   * [[http://www.jshint.com/|JSHint]] for JavaScript syntax checking.
-  * <del>[[http://tidy.sourceforge.net/|Tidy]] or</del> [[https://github.com/html5libmisc:|html5lib]] for HTML5 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.     * Tidy is awful for HTML5, html5lib seems ok. Also, see [[#Validator.nu]] below.
   * CSS syntax checking using Mozilla or Komodo engines.   * CSS syntax checking using Mozilla or Komodo engines.
Line 14: Line 14:
  
 I'm not yet dealing with: I'm not yet dealing with:
 +  * Automatically updating changed web pages.((guard? grunt?))
   * Compiling CSS from LESS and/or SASS.   * Compiling CSS from LESS and/or SASS.
   * Minification.   * Minification.
  
-===== Get external tools =====+===== The external tools =====
  
-==== Install Node.JS ==== +==== 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's/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 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>
  
-==== Install Testem ====+==== Testem ====
 Install [[https://github.com/airportyh/testem|Testem]] with <code bash># npm install testem -g</code> Install [[https://github.com/airportyh/testem|Testem]] with <code bash># npm install testem -g</code>
  
-This will pull in [[http://visionmedia.github.io/mocha/|Mocha]] and [[http://chaijs.com/|Chai]] as well.+==== Mocha + Chai ==== 
 +[[http://visionmedia.github.io/mocha/|Mocha]] and [[http://chaijs.com/|Chai]] should automatically install with you install Testem.
  
-==== Install js-beautify ====+==== js-beautify ====
 Install [[https://github.com/einars/js-beautify|js-beautify]] for Node.JS with:<code bash># npm -g install js-beautify</code> Install [[https://github.com/einars/js-beautify|js-beautify]] for Node.JS with:<code bash># npm -g install js-beautify</code>
  
Line 54: Line 56:
 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. 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.
  
-===== Get and tweak Komodo Edit =====+===== The Komodo Edit tweaks =====
  
 <WRAP center round important 60%> <WRAP center round important 60%>
-Komodo Edit configurations don't appear to carry over when you install a new point release. This means you will have to repeat most of what follows when doing version upgrades.+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> </WRAP>
    
Line 70: Line 74:
   * Emmet [todo]   * Emmet [todo]
   * Side By Side Diff [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. 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 ==== ==== 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''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 +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> <code python>os.system('nautilus "%s" &' % filename)</code>
Line 83: Line 87:
 respectively. 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.+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 ==== ==== Configure syntax checking ====
Line 209: Line 215:
  
 ==== Options and Extras ==== ==== 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 === === 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]].)) [[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]].))
Line 238: Line 247:
 }</file> }</file>
  
 +=== To document ===
 +
 +http://code.activestate.com/recipes/577561-komodo-javascript-macro-wrap-the-current-word-unde/
misc/komodo_edit_for_web_development.1383359446.txt.gz · Last modified: 2013/11/02 02:30 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki