DEV Community

Cover image for Visual Studio Code - Tips & Tricks - Command Palette and its friends
Luca Del Puppo for This is Learning

Posted on

Visual Studio Code - Tips & Tricks - Command Palette and its friends

Visual Studio Code is one of the best code editors in this moment.
Its Palette has many features but probably not all devs know them.
Let’s look at the most important, to improve your productivity and use less the mouse.

Command Palette

The Command Palette is the bar that shows up when you use the short-cut ⇧+⌘+P (on window Ctrl+Shift+P).

Command Palette

This Palette enables you to run commands. Which commands? That depends. VsCode already has many commands out-off the box, like: save file, format file, git commands and many others. But Vscode doesn't end its power here. It allows you to create new ones, and see them in this list of possibile commands. More extensions use this feature to expose their commands and enable their features.
The commands typically are grouped by topic, for instance, all the commands that work with the terminal have the prefix Terminal, those that work with git have the prefix Git and so on. This "rule" is a common best practice to improve the search of the commands.

It's important to remember that this Palette is working with the command if its first character is >. This char indicates you that the palette is in command mode.

It goes without saying that for some commands this flow can be a bit boring, but don't worry, the VsCode team took care about that too, they allow us to create short-cuts that run your commands. But we'll see that in another post.

Search Files and Symbols

If you use the short-cut ⌘+P (on window Ctrl+P) the Palette that appears has a different goal. In this case, it's ready to work with the files, or better, it's ready to search your files or to search inside of them.

Search Palette

By default when this palette appears it is ready to work with the current opened file, but you can also work with other files.
Let's start with the commands to work in the current file.

  • Go to Line and Column
    Using the character : VsCode is ready to go to a line of the file, for example if you type :39 and you press ENTER, VsCode puts the cursor and focuses at the begin of the line 39.
    If you know the column of the line, you can indicate it too by adding another : and VsCode sets the focus to the column in the chosen line. For instance :39:3 corresponds to the line 39 at the column 3.

  • Search Symbols
    Using the character @ VsCode is ready to search methods, properties, classes, interfaces inside of the current file.
    As you can see, when you type the character @ VsCode tries to help you and it suggests you all the symbols in the file.
    That helps you to search the symbols and prevent infinitive searches using the scroll.

Now let's move on and see how to search files.

  • Search Files The easy pease way to search a file in VsCode is using the short-cut ⌘+P (on window Ctrl+P), type its name and press ENTER when you find it. This search works on the entire project.

Search File

But sometimes it can be necessary to search only inside of a folder.
To make this, you need to start the search with the name of the folder flow by the char / and after that the name of the file.

Search in Folder

But this method enables the search only in the first level of this folder and excludes all the subfolders.
Thus the VsCode team took care about that too and by using the char * you can create a power condition to search your files.
This char can be used either lonely or combined with another *. If you use the combination, it indicates that you want search both in that folder and in its subfolders. Instead if it is used alone you indicate that the search is only inside of the folder.
Let's look at some examples to better understand this.

  1. /src//File.ts
    In this case you want to search all the files called File.ts inside of the folder src and in its subfolders (`
    *`).

  2. /src/***/components/Button.ts
    In this case you want to search all the files Button.ts inside of the folder src that it's placed inside of a subfolder called components.

  3. /src/***/.ts
    In this case you want to search all the files with extension .ts inside of the folder src and in all its subfolder.

As you can see, combining the char * in different ways you can create a power search term.

I hope these notions could improve you daily work with VsCode.

That's all Guys.

Bye Bye 👋

Discussion (11)

Collapse
whobeu profile image
Robert G. Schaffrath

“Visual Studio Code is one of the best code editors in this moment.”

I agree and have been using it since 2018. However, in that time, it has gotten more bloated and slower. Every month it seems yet another new feature is crammed into it (yet a feature request I follow has been languishing for five years now). I worry at some point it will be like current editions of Visual Studio that need almost the absolute latest CPU’s and a pile of memory to perform adequately. I have heard there is a forked lite version that uses less system resources and may try it at some point.

Collapse
puppo profile image
Luca Del Puppo Author

I hear you. However, vscode isn’t the main guilty in my opinion. The problems often are generated by the extensions, build not very well! I usually keep the number of extensions low to reduce this problem. Or try to detect which extension creates slowdowns!

Collapse
whobeu profile image
Robert G. Schaffrath

Yes, extensions can be a massive contributor to resource usage. As I am primarily doing Node.js development, I have few extensions. In fact, I recently removed "Bracket Pair Colorizer 2", which had been a resource hog at one point until it was fixed, due to the functionality now being built-in to Code.

I have wonder how the version that comes out a year from now will compare in performance to this months version. As I mentioned, I recall how Visual Studio 2013 was slower than Visual Studio 2010 which itself was slower than Visual Studio 2008, 2005, 2003, etc. Visual Studio 2017 took forever to start up on hardware that ran 2013 adequately. Pretty much like iOS releases that force you to get new hardware every three years just to keep things running with reasonable speed.

Collapse
sinewalker profile image
Mike Lockhart • Edited on

I really like these Pallet shortcuts for finding files and symbols, and commands, thank you for sharing.

I just found that # at the start of the Pallet will search across files for a symbol (e.g. look for all the symbols matching error in all the files in the project with #error instead of @error which limits to the currently focused file).

I also use Shift-Command-F (Control-Shift-F in Linux/Windows) to search for patterns within files

Collapse
hey68you profile image
hey68you • Edited on

Note quite related but I'm looking for a way to add 'pending' change set lists like in webstorm, where can create a new 'change list' in the source control view, and drag and drop modified files into this 'change list' to break down big change sets.

E.g. some files you changed only for set-up / testing and are not really part of the feature you want to commit/push

Does vscode have this feature or is there an extension out there that can do this?
dev-to-uploads.s3.amazonaws.com/up...
in my screen shot - is there a way to have instead of 'Changes' list additional lists where I drag files in/out of and give this list a name like - 'testing only - not for commit'

Collapse
puppo profile image
Luca Del Puppo Author

Also I am looking for this feature. Unfortunately so far I haven't found anything in vscode that does this.

Collapse
sinewalker profile image
Mike Lockhart

Do you mean a visual interface to git stash / git pop? VS Code has a Stashes section in the built-in Source Control view, and the Git: Stash / Git: Apply / Git: Pop / Git: Drop commands from the Pallet.

I can't find a way to drag/drop modified / untracked files into Stashes

Or, do you mean to selectively stage some hunks of a change instead of an entire file (or files)? In the built-in diff view, select the changed lines and then right-click and choose Stage Selected Ranges.

Collapse
hey68you profile image
hey68you • Edited on

I don't want to stash - I just want to organize my modified files into separate lists.
Currently, in VS Code, there is one only list called "Changes". I would like to add more lists (at least one more list) and drag modified files out of the "Changes" list and put them in another list that I can name (e.g. "do not commit these files").

Stage is sort of a solution to this but - I want to be able to name the list of un-staged and be able to make multiple such un-staged lists

This a built-in feature of webstorm.

Collapse
blessedzulu profile image
Blessed Zulu

The tip about searching partcular folders and subfolders is totally new to me and super useful. Thank you!

Collapse
robsonmuniz16 profile image
Robson Muniz • Edited on

Hey nice content, thanks for sharing it🙏🏻!
VS Code can be hard for beginners, a couple of decades ago I was using "Brackets", then I moved to VS Code | WebStorm.

Collapse
amitkor12 profile image
Amit Korgaonkar

Nice article. I m a daily user of Vscode , till date for me it's works good, specially for Linux one of the best editor so far.