I’ve decided to ditch Eclipse in favor of the NetBeans IDE. Since we can create signed apks with the Cordova CLI, Eclipse is no longer needed. There are several good replacements if you want a code editor. NetBeans, like several other code-creation editors, offers much more than a text editor can provide. Here is why I am enjoying NetBeans (NB) with Cordova. These are just a few of the features I’ve found handy when using NB. (If you have a coding IDE you favor other than NB, please talk about it in the comments section.) NB works on the PC and Mac.
Free download: https://netbeans.org/
NetBeans Community: https://netbeans.org/community/index.html
NetBeans HTML5 features: https://netbeans.org/features/html5/index.html
NetBeans Forum: http://forums.netbeans.org/
Code completion and other helps
- If you create the starting tag, like <p>, then hit enter, </p> will appear to its left to complete it.
- When you type in the css selector and colon, like color:, a drop-down will allow you to select among the options. Just double-click to select.
- Color bars at left and right show where code has changed (blue), added (green), or an arrowhead appears where text was deleted.
- Code elements are color-coded. For instance, all comments are gray and italicized in a dark version of the interface.
- Squiggle lines under code means something needs to be addressed. For instance, an alt=”” attribute may be missing from the <img> line. Pausing your cursor over the squiggled text will show the issue to be addressed.
- Highlighting an opening or closing tag will highlight the other tag.
- Words highlighted in red indicate an illegal issue there or in the lines above.
Minify files
Right-click on an html or css file in NB and click on minify to create a copy of the file, minified. So index.css becomes index.min.css. Project Build can minify all files and create a different Build folder, if desired. Tools > Options > Editor > Project Build.
Instant <link> formation
Create an external css file. Open an html file in NB. Drag the css file into the <head> of the html file and the entire link is created automatically: <link href=”index.css” rel=”stylesheet” type=”text/css”/>
Show file in IDE browser
Select file in NB, then: Run > Set Project Browser > Embedded WebKit Browser. Click on the green Play arrow in the menubar to run the selected file right in the IDE. Select mobile screen icons to see it in various mobile configurations.
Show file in Chrome browser
- Add NetBeans Connector Chrome extension to debug app on Chrome. Tools > Extensions, search for NetBeans Connector.
- Then select html file, then: Run > Set Project Browser > Chrome with NetBeans Connector.
- Then click on the green Play arrow in the menubar to run the selected file in the Chrome browser in localhost.
Set up Cordova project
In NB: Project Properties > Cordova
- Application tab: type app ID (com.companyname.appName format), app name and version. This sets up part of the config.xml file.
- Plugins tab: choose default Cordova plugins to add. (InAppBrowser is not included in the list, but can be added to the nbproject/plugins.properties file.)
- Mobile Platforms setup: Give location of Android SDK (includes link to download the Android Studio SDK if not installed). Give iOS Code Sign Identity and iOS Provisioning Profile.
Zip entire project
File > Export Project > To ZIP… will zip all files in the project folder.
Convert symbols to HTML entities
</div> becomes </div> by selecting it and Edit > Convert to HTML Entities (name).
Shift and Move
- Shift selected code left and right in tab length. Source > Shift Left or Shift Right.
- Move selected lines up and down one line at a time. Source > Move Up or Move Down.
Duplicate lines
Select lines of code then Source > Duplicate up or Duplicate down. Lines are duplicated. Great for lists with many <li></li>.
Commenting lines
Select entire line or lines then Source > Toggle comment will comment out the lines if they are not commented, or uncomment them if they are.
Hints
Explains errors in code and what to do to fix. Tools > Options > Editor > Hints.
Code Templates
Type c then Tab and get <!– ${comment} –> ready to be filled in. Tools > Options > Editor > Code Templates.
Change look and feel
Change appearance of the IDE by choosing among several templates. Tools > Options > Appearance > Look and Feel.
Validate XML
Run > Validate XML and Run > Check XML on your config.xml file to check for any problems.
Versioning
Git, Subversion, and Mercury. See in menubar, Team.
IDE Plugins
Over 200 plugins available to customize the IDE: Tools > Plugins > Available Plugins. Uninstall IDE plugins to speed up start: Tools > Plugins > Installed (check and Deactivate or Uninstall).
- Try: Dark Look And Feel Themes.
- Try: JSLint. (Not sure if it works, though. To use it, open a js file in NB, and right-click to select JSLint. However, nothing happens when I do it. Shout out if you figure it out.)
iPhone Dev Log 