misc:toward_a_webdev_environment
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
misc:toward_a_webdev_environment [2013/11/01 21:47] – [Toward a Web Development Environment] mithat | misc:toward_a_webdev_environment [2013/11/04 09:12] (current) – [Candidates for core editing] mithat | ||
---|---|---|---|
Line 5: | Line 5: | ||
</ | </ | ||
- | + | ===== Candidates for the core ===== | |
- | ===== Candidates for core editing | + | |
==== Komodo Edit ==== | ==== Komodo Edit ==== | ||
- | Komodo Edit is a FOSS " | + | Komodo Edit is a FOSS " |
+ | |||
+ | === What I like === | ||
+ | * Native font rendering. | ||
+ | * Decent syntax checking that uses standard tools and full configuration. | ||
+ | * Usable (but not awesome) | ||
+ | * You can add APIs and links to dirs that should be scanned. | ||
+ | * Easy to add external tools to make up for shortfalls of what's built in. | ||
+ | |||
+ | === What I don't like === | ||
+ | * Longish startup time. | ||
+ | * Spellcheck needs to be manually invoked. | ||
+ | * No code formatting.((Experimenting with external | ||
+ | * No support for unit testing.((Experimenting with external tool: testem)) | ||
+ | * No built-in change watching for the browser.((guard? | ||
==== Netbeans ==== | ==== Netbeans ==== | ||
- | Netbeans has lots of support for HTML5 built in. Good tooltips and autocompletion. Long startup time. Inflexible linting, testing, etc. Can't add " | + | Netbeans has lots of support for HTML5 built in. |
+ | |||
+ | === What I like === | ||
+ | * Built in server with auto-update in Chrome or Chromium. | ||
+ | * Pretty syntax checking icons.((I' | ||
+ | * Good HTML syntax checking. | ||
+ | * Good tooltips and autocompletion. | ||
+ | * Automatic spellcheck! | ||
+ | * Resource suggestion (e.g., ''< | ||
+ | * Good and easy autoformatting. | ||
+ | * Nifty "wrap in tag" feature. | ||
+ | * Built-in support for LESS/ | ||
+ | |||
+ | === Neat but not that awersome (yet?) === | ||
+ | * Built-in JavaScript debugger. | ||
+ | |||
+ | === What I don't like === | ||
+ | * Long startup time. | ||
+ | * Inflexible linting, testing, etc. | ||
+ | * Adding | ||
+ | * Oh-so-painful Swing font rendering on Linux. | ||
==== Aptana ==== | ==== Aptana ==== | ||
Line 52: | Line 85: | ||
Applied at deploy time? | Applied at deploy time? | ||
* ? | * ? | ||
- | |||
- | ===== Fleshing out Komodo Edit ===== | ||
- | The following describes what I have done to help make Komodo Edit a more complete Web development platform. The following addresses only the needs of front-end development. | ||
- | |||
- | It will use: | ||
- | * JSHint for JavaScript syntax checking. (This is built into Komodo Edit). | ||
- | * Testem+Mocha+Chai for automated unit testing. | ||
- | * jsbeautify for JS, CSS, and | ||
- | |||
- | I've yet to get to: | ||
- | * CSS and HTML syntax checking | ||
- | * Compiling CSS | ||
- | * Minification | ||
- | |||
- | Note that Komodo Edit configurations don't appear to carry over when you install a new point release. So you will have to repeat a lot of this when doing version upgrades. Decent support for JSHint and JSLint are built in, so we won't have to add those. | ||
- | |||
- | ==== Install the editor ==== | ||
- | Download and install Komodo Edit from http:// | ||
- | |||
- | === Extensions and plugins === | ||
- | |||
- | Confirm that you have the following **extensions** and install as needed: | ||
- | * NST | ||
- | * TODO Helper | ||
- | * Emmet [todo] | ||
- | * Side By Side Diff [todo] | ||
- | |||
- | I also disabled a whole bunch of extensions that didn't seem relevant to my needs. | ||
- | |||
- | Go through the list of **plugins** and disable anything that was automatically picked up from Firefox but isn't relevant to Komodo Edit. | ||
- | |||
- | === Add a file manager handler === | ||
- | The expected file manager in Linux is [[http:// | ||
- | |||
- | <code python> | ||
- | or | ||
- | <code python> | ||
- | respectively. | ||
- | |||
- | A simpler workaround is to add a soft link in your local bin named '' | ||
- | |||
- | ==== Install Node.JS ==== | ||
- | Both Testem and js-beautify rely on [[http:// | ||
- | |||
- | ==== Install Testem ==== | ||
- | Install [[https:// | ||
- | |||
- | This will pull in [[http:// | ||
- | |||
- | ==== Install jsbeautify ==== | ||
- | Install [[https:// | ||
- | |||
- | I also added a config file in my home directory for my default js-beautify settings. | ||
- | <file json .jsbeautifyrc> | ||
- | { | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | } | ||
- | </ | ||
- | |||
- | ==== 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, | ||
- | |||
- | ==== Add external tools to Komodo Edit ==== | ||
- | === Terminal === | ||
- | FIXME | ||
- | |||
- | === Terminal (project direcory) === | ||
- | FIXME | ||
- | |||
- | === Testem === | ||
- | FIXME | ||
- | |||
- | === Beautify === | ||
- | FIXME | ||
misc/toward_a_webdev_environment.1383342444.txt.gz · Last modified: 2013/11/01 21:47 by mithat