VSCODE was designed to help developers code regardless of the computer language they use. It was intended to be highly customizable: color themes, keyboard/key mapping/bindings and extensions can all be modified.
Microsoft is trying to make it very appealing to switch to VSCODE from any of the other major code editors, like Sublime Text, Atom, Eclipse, and Notepad++.
In this section, we will review the following VSCODE's main concepts:
- Color Themes
- Folders and Workspaces
- Debugger Launch profiles
When you start VSCODE for the first time, you will notice everything is dark:
You can change that immediately by selecting a different Color Theme.
Press Ctrl+Shift+P (when you have VSCODE in focus) to open an entry field where you can enter any commands (Show All Commands), then type "color theme" and select "Preferences: Color Theme." I would advise you to select one of the "light themes."
For the purpose of this article, I am choosing "Light (Visual Studio)," but I will demonstrate later how to install other themes.
And below is how VSCODE looks with a light theme. See the notes concerning the main layout:
Folders and Workspaces
There are no Project or Solution files in VSCODE. Those concepts are specific to the language you use.
You usually you want to "Open" a folder. This means focusing VSCODE on that folder, so it can list the files and its sub-folders. As soon as you "Open" a folder, VSCODE creates a sub-folder, .vscode, where it will maintain a few configuration files.
You may convert an opened folder to a workspace. A workspace is simply a file with the extension ".code-workspace" stored in that folder where workspace-specific settings are kept, and it is a method to link multiple folders in that workspace. Very few people seem to be using workspaces to manage multiple folders. Most of the time, workspaces are used to overwrite default settings. Having sub-folders does not require to set them up in a workspace.
Extensions can be loaded from the marketplace. In an upcoming section, I will show the two main methods to install extensions.
The purpose of extension is to enhance VSCODE, and basically transform it from a plain text editor to full IDE. As of early 2019, there are over 10,000 popular extensions. Any developer can create extensions, and as in most packet/module managers, there are reviews and ratings of all these extensions.
The following are just a few of the extensions that are available to emulate other editors:
Everything that can be done in VSCODE happens by calling a command. Press Ctrl+Shift+P to search the list of commands.
There is no complete documentation of all the commands, but at least you can view them by reviewing the default keybindings listed below (Open Default Keyboard Shortcuts (JSON)).
Keybindings are simply keyboard shortcuts. These are user-specific... never folder or workspace specific.
A Keybinding has a label (combination of keys to press), a command to execute, and a "when" which specifies under which state the keybinding will work. The same keybinding label (keys sequence) can be defined, as long as the "when" is different.
There is a default list of keybindings that comes with VSCODE. To see the list, press Ctrl+Shift+P to search for "Open Default Keyboard Shortcuts (JSON)".
If you enter "Keyboard Shortcuts" in the command search field (Ctrl+Shift+P), you will see the following 3 options:
- Open Default Keyboard Shortcuts (JSON)
This will display a read-only list of default key bindings, but the list is not completely accurate. If you enable some extensions, it will alter this list of "default" keybindings.
This is a excellent way to see all the possible commands VSCODE has. If you scroll to the bottom of the list, you can also see any unassigned (to keybindings) commands.
- Open Keyboard Shortcuts
Current list of active keybindings, Default + User. This list can be searched, but not modified, from here.
- Open Keyboard Shortcuts (JSON)
This will open the keybindings.json file, located in the user-specific folder "C:\Users\<WindowsUsername>\AppData\Roaming\<"Visual Studio Code" or "VSCodium" or "Code - OSS">\User\keybindings.json"
This method adds, removes, and edits user-specific keybindings.
Settings can be VSCODE-specific or extension-specific.
Following the VSCODE documentation, there are only 3 levels of settings: Program Default settings, User settings and Folder settings.
Yet after doing some additional research, if a workspace is opened, it appears to provide a 4th level of settings.
If the same setting exists in multiple levels, VSCODE will use the following rules to decide which level to use:
- Settings entered at the Folder level have precedence over any other levels.
- Settings entered at the Workspace level have precedence over the User level.
- Settings entered at the User level have precedence over the Program Default level.
All settings are stored as JSON strings.
User settings are stored in the following location:
"C:\Users\<WindowsUsername>\AppData\Roaming\<"Visual Studio Code" or "VSCodium" or "Code - OSS">\User\settings.json
Substitute <WindowsUsername> with the Windows logged-in user name.
Substitute <"Visual Studio Code" or "VSCodium" or "Code - OSS"> with the one folder related to the type of install you used.
You can also access that file by pressing Ctrl+Shift+P and enter "Open Settings (JSON)"
- Lines 2 and 3 are used to turn off telemetry, meaning tracking by Microsoft.
- Line 4 will prevent auto-updates of extensions.
- Line 6 will enable the auto-save of changes as soon as you move away from any editing areas.
- Line 9 will allow you to display the full-path of file in focus, and if any changes are pending to be saved.
Workstation settings are stored inside the .code-workspace file, which is stored in the original workspace folder.
I could not find a Ctrl+Shift+P way to open the .code-workspace file. The easiest method to configure workstation settings is to navigate to that file, and simply open it.
- Workspace settings are stored starting at line 7.
Folder settings are stored in the settings.json file, which is stored in the .vscode folder, which is inside the current opened folder.
I could not find a Ctrl+Shift+P way to open the .code-workspace file. The best is to navigate to the file and simply open it.
- Line 2 will take precedence over line 8 from the workspace setup file above.
Program Default settings are stored internally, but are claimed to be in a file "defaultSettings.json", which I was not able to locate.
Active Extensions can also alter some settings or add their own settings. To see this level of settings, press Ctrl+Shift+P and enter "Open Default Settings (JSON)".
If you press Ctrl+Shift+P and enter "Open User Settings", you will see a user friendly UI that will allow you to edit most settings in different levels:
Tasks are methods to execute external programs and have them behave as if they are part of your copy of VSCODE. This is basically a way to enhance the editor to become an IDE (Integrated Development Environment). Tasks help fulfill the Integrated
part of the IDE acronym. Task have to be defined inside a tasks.json
file located inside the sub-folder .vscode
. Hence, tasks are defined at the level of Folders, and therefore also Workspaces. For a detail description about how they work, refer to https://code.visualstudio.com/docs/editor/tasks
The following is the configuration file for 2 tasks we will use later to automate the debug and build process of Harbour programs.
There are 3 ways to start a Task:
1. Press Ctrl+Shift+P and enter "Run Task" to select a task to execute.
2. Have a keybinding to start a task.
Please note that although keybindings are User-specific, you could define the same Task (name) in different Folders or Workspace, and so have the keybinding become Folder aware.
3. Have the debugger call the task as specified in the launch.json settings.
Debugger Launch profiles
VSCODE has a built in debugger. But since VSCODE is language-agnostic, configuration settings are needed to tell the debugger how to run.
This configuration file is named launch.json and is stored in the .vscode sub-folder.
If you add the folder where the VSCODE executable is located in your PATH, from any command prompt prompt, you could call VSCODE with a "." as parameter.
The VSCODE executable could be one of the following, depending of the method you used to install it: "code.exe", "VSCodium.exe" or "code - OSS.exe".
For example, entering the following C:\Test>code . would start VSCODE and open the C:\Test folder.
Multiple instances of VSCODE can run at the same time.
The same file can be edited in more than one panel, which may be very practical for large files.