Mithat Konar (the wiki)

User Tools

Site Tools

You are here: Mithat Konar (the wiki) » misc » Komodo Edit for Web Development
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:42] – [Komodo Edit for Web Development] mithatmisc:komodo_edit_for_web_development [2014/02/05 19:27] (current) – mithat
Line 4: Line 4:
 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 be imported 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 ====
Line 86: Line 90:
 <code bash>$ cd {a-directory-on-your-PATH} <code bash>$ cd {a-directory-on-your-PATH}
 $ ln -s /usr/bin/thunar nautilus</code> $ ln -s /usr/bin/thunar nautilus</code>
 +
 ==== Configure syntax checking ==== ==== Configure syntax checking ====
 From the main menu's //Edit > Prederences...//, select Syntax checking and tweak the settings for CSS, HTML5. and JavaScript as desired: From the main menu's //Edit > Prederences...//, select Syntax checking and tweak the settings for CSS, HTML5. and JavaScript as desired:
Line 210: 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 239: 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.1383360121.txt.gz · Last modified: 2013/11/02 02:42 by mithat
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki