How to set up Cordova plugin project with IDE support?

Question

I've been struggling to set up my cordova plugin project. Mainly due the facts that:

• Plugins need to be in a separate folder away from the main project

• When I use, for example, cordova build android to build the project, cordova copies the java file from my plugin folder and put it into platforms/android/src folder.

• Thus I should not modify my plugin's .java file in the Android project manually, I have to write my code in my plugin folder.

• But I can't import plugin folder into the IDE project, thus I don't have code completion.

• It's basically impossible to write Java/Objective-C without IDE support

How can I set up an IDE(for example, for Android Studio) project with code completion for my plugin development?

Answer 1

Developing a Cordova plugin is a bit of a pain.

Here is a way to do it :

1. Create the basic files of your plugin (plugin.xml file, .java file for Android plugin, .h and .m files for iOS) in a separated folder for your plugin
2. Provide in your plugin.xml what is needed to install the plugin
3. Install your plugin in your Cordova app : cordova plugin add /path/to/pugin
4. Build the platforms you want to develop your plugin. cordova build android or cordova build ios

Then for each platform, you'll have to work directly on your plugin in the builded project :

• Android : open with Android Studio the builded Android project located in yourCordovaAppFolder/platforms/android with "Import project (Eclipse ADT, Gradle, etc.)"

  1. Open the Project tool window : View > Tool Windows > Project , or ⌘ + 1
  2. Open your plugin class file located at : android > java > com.your.plugin > YourPlugin

• iOS : open with Xcode the builded iOS project located in yourCordovaAppFolder/platforms/ios In Xcode, your plugin class files are located in the Plugins folder

You can then develop and test directly your plugin for each platform without the need to reinstall it again and again and again... just run the project from Android Studio/Xcode, and don't reinstall your plugin, it will erase what you have done in the project.

When you think your developments are done (or when you want to), replace the plugin file(s) in the original plugin folder created at very first step, with the one from the project you were developing on.

EDIT :

I've discovered that Eclipse made an update last summer, Eclipse Mars (4.5) that includes Thym (The HYbrid Mobile Tools).

If needed they have a Github project page.

I've quickly tested it, it allows to create Cordova projects, easily add plugins, and run directly on desired platform (Android, iOS).

Microsoft has also made a free version of Visual Studio for Apache Cordova, but I haven't tested it.

Regarding Eclipse with Thym, my first quick conclusion is that it is practical to develop Cordova apps but won't be THE ultimate solution to develop Cordova plugins because it is not oriented this way and was not made for plugins but apps making (and it is probably the same for Visual Studio for Apache Cordova).

By the way I had some trouble to launch iOS simulator with Eclipse+Thym, so maybe it still needs improvements even if it looks already good.

Answer 2

The solution I tend to use follows that outlined by Niko in the accepted answer. However, I add the --link flag when adding the plugin:

cordova plugin add --link ../cordova-plugin-example 

which (at least on Mac and probably Linux) creates symbolic links to the plugin directory instead of copying it. Then, editing the plugin files within the Android project in 'platforms/android' with Android Studio actually modifies the files in the plugin directory. This allows to keep the plugin directory separate (and under it's own version control). And removing and adding the plugin should - at least theoretically - not lose changes to the plugin.

The approach should work equally for iOS plugins.

Beware that I have no idea whether or how --link works on Windows machines.

Hint: I found this option in the help:

cordova help plugin 

which gives:

     [...]      [--link] ... when installing from a local path, creates a symbolic link to the plugin                   instead of copying files. The extent to which files are linked vs copied                   varies by platform. Useful for plugin development.