The command palette is one of the most powerful and useful tools in
Visual Studio Code. Learning
just a couple of basic keyboard shortcuts can help you take full
advantage of it and work more efficiently.
As I mentioned earlier, the command palette is the giant
search box at the top of the screen.
You can use it to search for an open files,
navigate within files, and execute any command available
within VS Code.
Clicking on it with your mouse opens it and shows you some of the
most common ways to use it.
I think the two most useful options are the first
two in this list;
Go to File, which you can activate with the keyboard shortcut,
Ctrl P,
command P on a Mac, and Show and Run Commands,
which you can activate with Ctrl Shift P.
Let's use it to open some files first.
I'll press "Ctrl P" on my keyboard and the search box is activated.
And I'm shown a list of some files I recently had open.
I'll start typing the word tour, and VS Code searches my entire
project for files with that in the name.
Notice that it also searches for files with that combination
of letters in any order.
So even if I misspell what I'm looking for,
I'm still likely to find it.
I can now just press "Enter" to open tours.htm.
You can also open files and automatically position your cursor
at specific locations in the file.
I'll press "Ctrl P" again and this time search for menu.
The first file on the results is the menus.js_javascript file.
With that highlighted, I can now add the at symbol to
the end of my search text.
Now the search results are showing me a list of symbols contained
in that file.
Symbols can be things like functions,
class names, and variables.
Not all file types are going to contain symbols,
but for those that do like this JavaScript file,
you can search for them within the file to open it at that location.
I'll type the word "show" and it finds the ShowDiscountOffer
function in the file.
I'll press "Enter" and it opens the file and places my cursor on the
line with that function.
I can now quickly get started implementing this function.
You can also open files at particular line numbers.
This time, I'll search for index.
Once the index.html file is highlighted,
I'll type a colon and then the number 25.
I'll press "Enter" and it opens the file and places my cursor
on Line 25.
Let's now use the command palette to execute actual commands.
To do that, I'll use the keyboard shortcut Ctrl Shift P. That
opens the command palette, shows some recent commands,
and I can now start searching for the command I want to run.
However, I want to first point out that the only difference between
the Ctrl P shortcut and the Ctrl Shift P
is that Ctrl Shift P adds a greater than symbol at the
beginning of the search box. That signals the VS Code that we want to
search for a command instead of a file.
If I now just backspace over that symbol,
I'm back to searching for files just like I did a minute ago.
I can just type the greater than symbol again
and I'm back to searching for commands.
Searching for commands is great, because you only need to have a
vague notion of what you want to do,
and VS Code will help you find the specific command you really need.
For instance, I'll type terminal.
And VS Code is now showing me all the commands related to using
its built-in terminal.
I'll further refine my search by typing JavaScript.
That highlights the command to open the JavaScript
debug terminal.
I can now just press "Enter" to execute the command.
I'll close that for now just to get it out of the way.
I'll show you another quick example
because I know developers like to tweak the theme of their editors.
I'll open the command palette again and type theme. With the
color theme command selected,
I'll press "Enter."
I'm now shown a list of themes to choose from.
I'll use my arrow keys to move over them and see a quick preview
of how they'll look.
I'm going to stick with the default light theme for now.
I strongly encourage you to experiment with the
command palette.
It's a great way to quickly find the command you want to execute,
as well as discover new commands you may not have ever
known existed.
It will almost certainly make your editing experience more efficient.
Okay. I just showed you how to change the theme in your editor.
However, that's just the tip of the iceberg when it comes
to VS Code settings.
In the next movie, I'll show you how to discover and
change lots more options to fit your preferences and workflow.