New QML editor features

During the last weeks the QML and JavaScript editors in Qt Creator have gained several cool new features. Grab one of the recent snapshots of the master branch to give them a try.

JavaScript style checks

The editor now checks for common problems in JavaScript code, like

• duplicate or conflicting var, function and formal parameter declarations
• use of vars and functions before their declaration
• == or != with 0, null, true, false, undefined and ''
• comma expressions (outside of for statements)
• expression statements (unless calls, assignments or delete)
• assignments in a condition (like if (a = b))
• case blocks in a switch that don't end with return, break, continue or throw and are not empty
• nested block statements
• with statements
• void expressions

You can find details and explanations of these warnings on the JSLint website.

Would you like to see more checks? Feel free to post your suggestions on http://bugreports.qt.nokia.com.

QML plugins

Working with QML plugins should now be easier. Simply set up the import path (importPaths in .qmlproject or QML_IMPORT_PATH in .pro) and import the plugin in your QML file. Note that the import path should be set to the folder containing your library's directory chain. So if you want your import to be 'import com.example.Foo 1.0', set the import path to the 'base' part of base/com/example/Foo/ where Foo contains the qmldir file.

Creator will try to find the library and extract type information from the plugins referenced in the qmldir file. If all goes well, the editor will now recognize the library's types and offer correct code completion.

A lot of magic is happening in the background, and it's not entirely unlikely that the process will fail. In that case you'll get an error marker on the import statement - mouse over it to see what went wrong.

What Creator is doing is

1. Build 'qmldump', a tool to load a QML plugin and dump all the metainfo Creator needs to stdout.
2. Run qmldump on the plugin.
3. Parse the output and inject it into the code model.

Unfortunately, there are several points of failure: First off, building qmldump needs Qt's private headers, so if you're using an install of Qt that doesn't have them and doesn't ship a precompiled qmldump, you're out of luck. Running qmldump can also fail, for instance if the plugin's and qmldump's Qt version don't match or the plugin fails to load because it expects a specific environment.

To avoid these problems, plugin developers can run qmldump manually and ship the output with their plugin. If there's a library.xml file next to the qmldir file, Creator will load it instead of running qmldump itself.

The sources of qmldump are located in share/qtcreator/qml/qmldump. Use 'qmldump import/path Import.uri > library.xml' to generate a dump.

Little extras

Small and convenient, yet too little to deserve their own heading:

• There's now a filter for JS functions and QML code bindings in the Locator. (defaults to 'm')
• Added code completion and validation for file imports and url properties. (think Image { source: "file" })
• Added code navigation and context help for properties.