Tools of the Trade: VS Code Search

Finding code within any IDE can be a challenge. Visual Studio Code offers several ways to search and navigate your code to speed up your everyday programming.

File Search

The file search feature allows you to quickly search your project’s files based on path, filename, and extension. It can be opened on Mac with Command-P or by clicking into the project search bar in the window header and clicking “Go to File”.

This tool can be especially helpful for Drupal projects when combined with Chrome Developer Tools Elements tab as Drupal will include comments in the html for which twig templates it attempted to look for and which it actually used. This allows you to quickly locate the specific file that was used without having to know where it exists within the project.

You can also use the file search to quickly get a list of all files of a particular type. For example if you wanted to find all node related twig template files, you could search for “node.html.twig”. At the top of the resulting list will be all files that most closely match your search string, but it will also include any files that have all characters of your string in that order regardless of other characters in between. This is especially useful in the “node.html.twig” example in that it will also include any file that looks like “node–<content_type>--teaser.html.twig” aiding in locating any twig file that a node may attempt to pull form.

Text Search

Though the top search bar can be used to search your project for a specific string, VS Code includes a more user-friendly way of doing this with the sidebar Search area. This can be accessed by using the sidebar link or by using the Command-Shift-S shortcut.

Here you can search your entire project files for the matching string. It also allows you to specify whether to enforce or ignore case sensitivity. If you are familiar with regular expressions (regex), you can also search using those.

You can also specify limitations for your search with the files to include and files to exclude inputs. For example if you only want to search javascript files, you could add “*.js” to files to your include filter. You can use the exclude input to limit your results even further. I tend to use the exclude input to remove drupal core files, vendor files, and contrib files from my results as I am typically dealing with custom module or theme files.

Go to Definition/References

Another tool that VS Code provides is the Go to Definition and References. These features are accessed by right clicking a function or variable within your code and selecting the option you would like from that menu.

For Go to Definition, VS Code will attempt to find the declaration of the function or variable, which will allow you to jump directly to it. There are limits to VS Code’s ability to find the associated declaration as it needs to be defined within your project files (ie php functions will not be found) and it does not seem to find functions for objects created through the Drupal service lookup function. In those cases you would have to revert to the text search feature mentioned above.

Go to References is a feature that requests VS Code to find all references of the specific function or variable. This can be quite useful when looking at an interface class and trying to find implementations of it. It is similar to the text search function but it also restricts the results. For functions it will only show potential calls or overrides of the function. For variables it will only show variables with the same name.