Checking Code Syntax

As you write code, Qt Creator checks code syntax. When Qt Creator 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 Creator underlines errors in the JSON data structure.

In the following screenshot, Qt Creator annotates an error because a semicolon is missing at the end of the line:

In the following screenshot, Qt Creator issues a warning because the variable is not used:

In the following screenshot, a Qt class name has a typo:

You can use the icons in the tooltip popup to copy the error or warning message to the clipboard, to hide messages of a particular type, or to change the diagnostics settings. Select the Annotation Settings link to specify the position of the line annotations.

To modify the colors used for underlining errors and warnings, select Edit > Preferences > Text Editor > Font & Colors > Copy, and select new colors for Error and Warning.

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 Creator 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.

If this does not help, try changing the QML emulation layer to the one that was built with the same Qt version as the one selected in the build and run kit.

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.

Inspecting Preprocessed C++ Code

To analyze the causes of compile errors or errors caused by wrong includes pulled in by dependencies or C++ macros expanding to something unexpected, select Show Preprocessed Source in the editor context menu.

This action expands all C++ macros to their actual code and removes code that is guarded by a currently inactive #ifdef statements. If you deselect the Use built-in preprocessor to show pre-processed files check box in Edit > Preferences > C++ > Code Model, this action also expands all "#include <foo.h>" statements to their actual contents.