Checking Code Syntax

As you write code, Qt Design Studio checks code syntax. When Qt Design Studio spots a syntax error in your code, it underlines it, displays an icon, and shows error details when you move the mouse pointer over the error or the icon. If a fix is available, you can apply it by clicking .

Similarly, when you are working on an instance of a JavaScript object notation (JSON) entity, Qt Design Studio underlines errors in the JSON data structure.

In addition to underlining, errors and warnings are marked with icons and annotated. When writing QML or JavaScript code, the annotations may have error codes listed in JavaScript and QML Error Codes.

Specifying Line Annotation Positions

To specify the position where the annotations are displayed, select Edit > Preferences > Text Editor > Display > Line annotations, and then select whether to display the annotations directly next to the code, aligned to the right of the code, or in the right margin. Showing annotations between lines can be useful if there is usually not enough space to display annotations next to the text.

If you hide the annotations by deselecting the check box, you can move the mouse pointer over an icon to view them.

JavaScript and QML Error Codes

You can run static checks on the QML and JavaScript code in your project to find common problems. To run the checks, select Tools > QML/JS > Run Checks or press Ctrl+Shift+C. The results are shown in the QML and QML Analysis filters in Issues.

Many of the error messages are similar to the ones in Douglas Crockford's JSLint tool. For more information about JSLint errors, see JSLint Error Explanations.

Resetting the Code Model

If you change the build and run kit when you have QML files open in the code editor, the code model might become corrupt. The following error message indicates that this might have happened: Using Qt Quick 1 code model instead of Qt Quick 2.

You can see the error message when you move the mouse pointer over code that Qt Design Studio underlines in the code editor or when you open a QML file in Qt Design Studio.

To reset the code model, select Tools > QML/JS > Reset Code Model.

Inspecting QML and JavaScript

To inspect QML and JavaScript properties, methods, and enums, move the cursor over them and select Tools > QML/JS > Inspect API for Element Under Cursor.

Automatically Formatting QML/JS Files

To automatically format QML/JS files upon saving, select Edit > Preferences > Qt Quick > QML/JS Editing > Enable auto format on file save. To only format files that belong to the current project, select Restrict to files contained in the current project.

To use an external tool, such as qmlformat, which automatically formats QML files according to QML coding conventions, select Use custom command instead of built-in formatter. In the Command field, enter the path to the tool. In the Arguments field, enter options for running the tool.