Creating Files

By default, new files are treated as plain text files. In order to change the language for a new file, click the Select Language Mode item in the right corner of the status bar, near the smile icon. In this case, you will see Plain Text as the current mode, so click it. As you can see in Figure 4-2, you will be presented with a list of supported languages where you can select the new language for the current file. You can also start typing a language name to filter the list.

When you select a new language, the Select Language Mode item is updated with the current language, and the editor enables the supported features for the selected language, such as syntax colorization, word completion, and code snippets.

Obviously, you can change the language of any open code file, not just new files.

File Encoding, Line Terminators, and Line Browsing

Visual Studio Code allows you to specify an encoding for new and existing files. Default encoding for new files is UTF-8. You can change the current encoding by clicking the Select Encoding item in the status bar (in the previous figures, it is represented with UTF-8, the current encoding). You will be presented with a long list of supported encodings and a search box where you can filter the list as you type (see Figure 4-3).

Similarly, you can change the line terminator by clicking the Select End of Line Sequence item (in previous figures it’s represented by CRLF). Visual Studio Code supports CRLF (Carriage Return and Line Feed) and LF (Line Feed), and the default selection is CRLF. You can also move fast to a line of code by clicking the Go to Line item, represented by the line number/column group in the status bar. This will open up a search box where you can write the line number you want to go to, and the line of code will be immediately highlighted as you type (see Figure 4-4).

Opening a Folder

You open a folder via File ➤ Open Folder or via the Open Folder shortcut in the Welcome page. You can also drag and drop a folder name from Windows’ Explorer or macOS’ Finder onto Visual Studio Code.

Whatever folder you open, VS Code organizes files and subfolders into a structured view represented in the Explorer side bar. Figure 4-5 shows an example based on a C# project.

The root container is the folder name. Nested you see files and subfolders, and you can expand each subfolder to browse every file it contains. Simply click a file to open an editor window on it.

Opening .NET Core Solutions

When you open a folder that contains a .NET Core solution based on the MSBuild project system (.sln file), Visual Studio Code organizes all the code files into the Explorer bar and enables all the available editing features for C#. Figure 4-6 shows an example.

Notice how the root level in Explorer is the project name. You can browse folders, code files, and edit anything that Visual Studio Code can properly recognize. It is worth mentioning that Visual Studio Code can certainly open any MSBuild solution, not only .NET Core solutions, but it will only be able to run and debug .NET Core applications. For instance, if you open a Windows Presentation Foundation (WPF) solution in VS Code, you will still benefit the structured folder view in the Explorer bar and then full C# language support, but you will not be able to build, run, and debug the code. Instead, with .NET Core you also have integrated debugging support which allows running, debugging, and testing code directly within VS Code. This will be discussed in Chapter 9, "Running and Debugging Code."

Opening JavaScript and TypeScript Projects

Similarly to .NET Core solutions, Visual Studio Code can manage JavaScript folders by searching for jsconfig.json or package.json files. If found, Code organizes the list of folders and files the proper way and enables all the available editing features for all the files it supports, as shown in Figure 4-7.

TypeScript projects’ behavior is the same as for JavaScript, except that Visual Studio Code will search for a file called tsconfig.json as the root.

Opening Loose Folders

Visual Studio Code allows opening folders that contain unrelated, loose assortments of files. Visual Studio Code creates a logical root based on the folder name, showing files and subfolders. Figure 4-8 shows an example based on a sample folder called MyFiles that contains files in different languages.

With this option, you can basically open any folder in VS Code and edit all supported files taking advantage of the code editing features for each file individually.

Creating Workspaces

Creating a workspace can be done whether you already have any folders opened or not. If you already have any folders opened, you can select File ➤ Save Workspace As. VS Code will ask you to specify the location and file name for the new workspace. A workspace is represented by a JSON file with .code-workspace extension, whose structure will be explained shortly.

The workspace name is simply the file name without the .code-workspace extension and will be shown in the Explorer bar (see Figure 4-9). Then you can add other folders to the workspace by selecting File ➤ Add Folder to Workspace or via the Add workspace folder shortcut in the Welcome page. Added folders will be displayed in the Explorer bar under the workspace root. If you do not have any folders already opened, you can either start with File ➤ Save Workspace As or with File ➤ Add Folder to Workspace. With the first option, you will basically create an empty workspace with a name, and then you will add folders as described in the preceding text. With the second option, you will instead create an empty, untitled workspace starting from an existing folder. In this case, in fact, the Explorer bar will show UNTITLED (WORKSPACE) as the new workspace name. When you save the workspace like described in the preceding text, the Explorer bar will show the new name based on the workspace file name. Remember that workspaces are only logical containers and do not affect the structure or behavior of your projects and folders in any manner.

Opening Existing Workspaces

You can open an existing workspace via File ➤ Open Workspace. You can also drag and drop a workspace file name from your operating system’s file browsing program onto the Visual Studio Code surface. Opening a .code-workspace file directly will simply result in viewing the file content, not opening the workspace. Similarly, opening a folder that contains a .code-workspace file will only result in opening the folder, not the workspace. You can only use the specific commands described at the beginning of this paragraph.

Workspace Structure

Notice that the full pathname of a folder is only provided if such a folder is not in the same location of the workspace file. In this case, the .code-workspace file, the MyFiles folder, and the ExpenseReport folders are all in the same location; instead, the multeor-master folder is located under a different folder, C:UsersadelsoleDownloads. If you want to see yourself the structure of a workspace file, you can open it within Visual Studio Code via File ➤ Open File.