SYNG in Visual Studio Code

Installing the extension

You can install the extension directly from within VSCode by searching for SYNG, or through its marketplace page.

Using SYNG in VSCode

Press Ctrl-Alt-F (CMD-Alt-F on Mac) to activate the SYNG search panel and launch the query editor. By default, the query is evaluated as you type and the results populate the panel to the left.

To manually evaluate the query, press Ctrl-Enter (CMD-Enter on Mac) inside the editor.

Query editing

The query editor supports syngQL as a first-class language, which can greatly help in writing queries through the following features:

• auto-completion of selectors and operators
• automatic error detection and reporting
• signature hints that tell you what arguments a selector accepts and which argument you're currently supplying a value for. This can be triggered by hovering over the selector, or naturally as you move your cursor inside of its parenthesis.
• go-to definition of selectors (Ctrl-F12 by default) which takes you to a dedicated file that explains it in more detail and presents a few usage examples

Navigating results

As you search, the panel to the left will be populated with a tree view of the results. You can navigate the results using the Up and Down arrows on the keyboard, or by clicking with your mouse. Like the default VS Code Search view, the files will be opened in the editor as you navigate them this way.

Grouping results

The tree can group the results by the type of statement that matched, which is somewhat similar to the Outline panel you might be used to in VS Code, only that this is more refined to what's currently relevant to you (i.e. your search target.) When you're not interested in the type, and perhaps only the values, you can turn this grouping off through the respective control.

Result file editor

If you wish to view the results in a dedicated view--for when the panel gets crammed--you can click the "Open in editor" button. This button launches a read-only editor with the results grouped by file, which can be navigated by clicking with your cursor while you hold down Ctrl (or CMD on Mac) or inspected by hovering over an entry.

You might notice that this is once more parallel to VS Code's native Search Editor view.

Controls

The SYNG panel presents a few controls that, unlike other settings, you might want to have immediate access to, such as:

• Clearing search results
• Collapsing all results in the tree view
• Specifying which files or folders to search
• Excluding files from being searched

Some of these controls override the outer settings, like "Search automatically as you type" -- you might want to turn it off for this particular search, but otherwise keep it on (or vice versa.)

Settings

You can configure SYNG by going to Settings -> Extensions -> SYNG, or simply search for "syng" in the filter box.