Decorations

Aside from evoking the impression of curtains, blinds, and knick‐knacks, decorations in the Visual Studio Code Explorer provide a useful notification role. As you edit code, the files themselves enter different states—they could contain errors, they could have been changed since the last commit, or they might be untracked. Through decorations, Explorer can notify the developer of these conditions.

Figure 3-8 shows the Explorer with a number of different decorations visible on the right side. In general, the decorations come in two varieties. The circles are found at the folder level and indicate that, inside the folder, there is at least one file that is of interest. The color of the circle indicates the type of issue: pale red indicates an error, light gold means that files have been modified, and green is for files that are not currently being tracked by source control.

In Figure 3-8, the .vscode folder contains an untracked file. Both the src and actions folders contain a file with an error, and the containers folder contains modified files. Note that the actions folder also contains modified files, but the circle's color is pale red. That's because if there are multiple reasons for decorations in a folder, the color is provided by the most serious of the reasons.

Next to the settings.json file, there is a green “U”. This indicates that the file is not currently being tracked by source control. Naturally, this decoration only appears if your workspace is currently associated with source control of some kind.

The authenticate.js file is a source for a couple of decorations. The numeric value (a “1” in this example) indicates the number of problems found in the file. This value (and the associated color) only appears if the offending file is open in one of the editors. The “M” at the end of the line means that the file has been modified and saved. You can see that a number of other files in the actions folder have also been modified, but have no errors in them. If you want to see a description of the reason for the decoration, hover over the file or folder and a tooltip appears (Figure 3-9).

Saving the Workspace

Although every opened folder is part of a workspace, none of the benefits start accruing until you save the workspace. To save the workspace, choose the File ➪ Save Workspace As menu option. In the dialog that appears, you determine where you want to save a file with an extension of .code‐workspace.

The .code‐workspace file is not a project file or a solution file—it's just another configuration file. The schema for the configuration file is pretty straightforward, as shown in the following code snippet:

{
   "folders": [
      {
         "name": "PWA",
         "path": "aos-pwa"
      },
      {
         "name": "API",
         "path": "AosPwa.WebAPI"
      }
   ],
   "settings": {
      "workbench.quickOpen.closeOnFocusLost": false
   }
}

At the top level, there are two attributes in the example. The first, named folders, is an array of the folders in the workspace. The path attribute defines the path to the folder to be opened. The path is relative to the location of the .code‐workspace file. The name attribute provides a different title that gets displayed. Figure 3-10 illustrates what the Explorer looks like with the name attribute set.

As you can see, the name (PWA or API) appears at the top of each folder. If you don't include a name attribute, the name of the folder is used. That name attribute is really there to provide a more user‐friendly version of the folder name. As well, the name given to the .code‐workspace file is the name of the workspace and it appears at the top of the files and folders tree. In Figure 3-10, the name of the workspace is “AOS‐MOBILE.”

Adding Folders

You can add folders to a workspace even before you have saved the workspace. You do this through the File ➪ Add Folder To Workspace menu option. The standard Open File dialog appears, and you choose a folder to add.

Also, Visual Studio Code supports adding a folder by dragging it from your local file explorer and dropping it into the Explorer area. You can add multiple folders by selecting multiple folders from the Open File dialog, or by dragging multiple folders into the Explorer.

If you have not yet saved your workspace, the name of the workspace is “UNTITLED WORKSPACE.” This will change as soon as you save the workspace under a different name.

Settings

You might have noticed that the workspace configuration file also includes a settings attribute. Those are the workspace‐level settings. But it's also possible to define settings that apply not just to the user and workspace, but also to the individual folders. The Settings editor includes this capability. Figure 3-11 illustrates the user interface for the AOS‐MOBILE workspace.

To access the folder‐level settings, select the folder from the drop‐down list and edit the settings as usual.

One of the considerations from folder‐level settings is how to handle collisions. That is, how does Visual Studio Code deal with the same setting being given different values by a user, workspace, or folder? For many settings, it's not a problem. The folder takes precedence. However, there are cases where this isn't possible. In particular, if there are settings that impact the entire development environment (such as the editor layout or zoom level), the folder‐level setting is ignored. Settings that are ignored are grayed out when you are editing from within Visual Studio Code.

Regular Expression Matching

You can do more than just match the term you enter into the Search text box. You can provide a regular expression that is then processed against each line in each file. To turn this functionality on, click the icon to the extreme right of the Search text box. At this point, the entered term must be a valid regular expression in order for the search to function. Consider the examples in Table 3-1 of how regular expressions can be a powerful addition to your toolset.

You have available to you the full range of regular expression control characters. Though it can be difficult to learn, the ability to utilize regular expressions makes searching even more powerful.

Specifying Files

By default, all of the files in your project are included in the search. To be a little more precise, there are two settings that control the files that are searched. The Files: Exclude setting (described in the “Project View” section earlier in this chapter) controls the files that appear in your project by identifying (using a collection of glob patterns) the files and folders that are excluded. As you might expect, these files are not included in the search.

However, there is also a setting called Search: Exclude that defines (also through a collection of glob patterns) the set of files that, while they are part of the project, you do not want to be part of any search results. An example of the kinds of files you'd like to exclude from your search would be the node_modules directory or the bower_components directory. These would be third‐party components that are part of your project but are not really something you are likely to want to search.

Both of those settings are part of the default functionality of the Search pane. But you can modify the files being searched without modifying the settings. If you click the ellipsis immediately below the Regular Expression toggle icon, a couple of additional text boxes become visible, as shown in Figure 3-14.

The top text box is used to specify the files that you'd like to include in your search results. For instance, if you enter the word reduce, only files or folders that contain the text “reduce” appear in the search results.

Aside from entering text, some special characters can be used to perform pattern matching. Table 3-2 contains these characters and their purpose.

The second text box is used to define the files and folders to be excluded from the search. The same rules as defined for the Files To Include text box apply. The difference is what Visual Studio Code does with the information. Here, files and folders that match the pattern are not included in the search results, even though they might normally be based on the Search settings. The gear icon at the right of the text box is used to toggle the exclusion pattern matching on and off.

Replacing Text

It's possible to replace text through the Search pane. To start the process, click the triangle to the left of the Search text box to reveal a second text box (see Figure 3-15).

In the second text box, enter the text that you'd like to replace the text in the first text box with. As you type, you can see the replacement take place in the search results. Figure 3-16 illustrates what this would look like.

Hitting Enter at this point performs the replacement on the first instance. Clicking the icon to the right of the second text box performs the replacement on all of the instances throughout all of the files in the search result.

Settings

A number of additional settings impact where and how the results can be viewed, as well as the results that actually appear:

• Editor ➪ Find: Seed Search String from Selection—When this setting is checked, any text that has been selected in the editor automatically appears in the Search pane.
• Search: Collapse Results—Determines whether the search results will be expanded or collapsed. The default setting is auto, which means that files containing less than 10 results are expanded, and files that contain 10 or more results are collapsed. The other settings, AlwaysExpand and AlwaysCollapse, have the results expanded or collapsed, respectively, regardless of the number of results in a file.
• Search: Maintain File Search Cache—Visual Studio Code improves its search performance by using a search service process. This process indexes the contents of the file, as well as keeping track of any changes, so that when you perform a search, the results are very quickly generated. After an hour of non‐use, the service is shut down. If this setting is checked, the search service process will continue running even if there is no activity.
• Search: Show Line Numbers—When checked, the line number within the file where the result is found is displayed.
• Search: Smart Case—If the pattern is all lowercase, the search will be performed in a case‐insensitive manner. If there are any capital letters in the pattern, the search is case sensitive.
• Search: Use Ignore Files—The Files: Exclude setting is used to identify the files that will not be included in any search result. However there are a couple of files, .gitignore and .ignore, that are regularly used to specify files that are, well, ignored by different processes. This setting determines if the Search will also ignore those files.