SideGuide
SideGuide's Dev Blog

SideGuide's Dev Blog

How to Use VS Code like a pro

How to Use VS Code like a pro

SideGuide's photo
SideGuide
·Jun 3, 2022·

7 min read

As a programmer, the most valuable asset is the time you have to solve problems.

And yet, I see novice programmers spend enormous amounts of time and thought power doing simple tasks that a computer is better at anyways.

Development is about speed, and you can’t write and debug code like a pro without knowing how to use your tools like a pro.

VS Code is full of valuable features that most Devs don't use. In the following lesson, we will go over some of the most useful features of VS Code, so you can save time and build better programs.

Keyboard > Mouse

Firstly, you should try to minimize the time spent navigating with your mouse. That doesn’t mean you need to download a completely mouseless editor (Like Vim), but the more key-binding you use, the faster your development will flow.

Here is a list of some of the most important key bindings I wish I knew as a fresher.

Ctrl X

Programmers need to copy and delete a line of code often. Like this

Luckily, with VS Code, you don’t have to select the entire line! By default, Ctrl X will cut the line of code your cursor is on, allowing you to easily grab a line and move it somewhere else.

Line was cut with Ctrl + X or Cmd + X

☝ This also works with Ctrl + C

But, we can move it even quicker!

Move Line

If you just need to move the lineup or down, you can use Alt + up arrow/down arrow to move the line-up and down, like so!

Commenting with

Comments are crucial, but manually typing in /* */ or // is a real pain!

Luckily, in VS Code, we can use Ctrl + / or Cmd + / to comment or uncomment the selected text!

If you need to comment on a specific line, you can do that with Ctrl + / or CMD + / as well.

The most common? Searching!

For example, you might notice that to find the file, you have to search through your projects directory.

But this is a huge waste of time and energy. With VS Code, you can instantly find the file you’re looking for with CTRL + P or CMD + P.

Watch how I find the file gradient_button_1.dart

This is especially powerful in larger projects, where you might have hundreds of files that you need to navigate.

One of the most time-consuming things you can do is scroll through files searching for a function, or variable, like this:

Whenever possible, don’t search through a file like this.

Instead, you can search through your file with Ctrl + F or Cmd + F. This finds all the instances of what you’re looking for in the file.

You can even navigate to the next found instance with enter, or to the last instance with shift + enter.

Use Ctrl + F and Enter to find instances of the _counter variable

Sometimes though, you might not remember the exact name of the symbol you’re looking for. In that case, you can see all the symbols present in your editor by hitting Ctrl + Shift + Period.

💡 A symbol refers to the name of a variable, function, or class that has been defined in your code.

Use Ctrl + Shift + . to search through the symbols in your document

But what if you need to search for something in your entire project? You can do that as well with the Ctrl + P search bar. All you have to do is type in a # before your query.

The key is to use the computer's ability to search things quickly as often as possible. They apply to ANY program. Not only do these techniques help you improve as a developer, but you’ll improve at anything that requires software.

The Commands and the Terminal

Terminals are tricky. While super developers are able to remember a huge array of commands, most of us can rely on the power of the VS Code Command Pallet.

The command pallet is actually within the Ctrl + P or CMD + P search bar you saw earlier. But, we can type a > before our command to search through the available commands.

It’s so important that instead of typing the >, you can automatically open it by using the Ctrl + SHIFT + P

For example, let's search through the commands Flutter provides.

Use the command pallet to search through the available flutter commands.

Unfortunately, sometimes VS Code isn’t aware of every available command. We can find extensions that add more, but eventually, we will have to use the terminal.

The good thing is that VS Code’s integrated terminal is awesome! Here are some tips and tricks on how to use it effectively.

You can open an integrated terminal in VS Code quite easily. Either go to the bar at the top and select terminal > new terminal. Or use the key binding ctrl + shift +backtick or cmd + shift +backtick. The easiest way though is to pull up on the bottom of your screen, like so:

Once we’ve opened the terminal, Sometimes we need to create a new terminal. We can do this with the terminal controls in the top right of the terminal area. Hit the + button, and then select the type of terminal you’d like to open, such as Command Prompt or PowerShell on windows.

You can create multiple terminals, split terminals, and organize them with colors. Bonus: investigate these different options, and think of some situations where they might be useful.

Git in VS Code

Because git is SO important, we will cover most of this topic in more detail in our chapter on git. The important takeaway is that VS Code’s built-in git functionality is usually all you need, and it’s easier (and less error-prone) than using the command line.

To access VS Code’s git menu, click the branch icon on the left toolbar of VS-Code

Using the vscode command line to stage and commit new changes

If this doesn’t make any sense, check out the chapter on git for an overview of the fundamentals!

Splitting editors

You often need to work on a system that relies on two files at once. For instance, when you’re writing a widget and simultaneously placing it on a screen. With VS Code, we can simultaneously edit two separate files by “splitting” our editor.

Let's say I’m adding the component GradientButton1 from the file gradient_button_1.dart into my main screen. If I have both my main.dart and the gradient_button_1.dart files open, I can split my editor by dragging one of the tabs to the left or right of my open editor.

Splitting you editor by dragging a open editor from the top tab

Now I can simultaneously edit the widget’s declaration and instantiation

💡 Instantiation - A call to a Function, Widget, or Class that’s already been declared

You can have as many split editors as you’d like, however, I tend to find that on most screens two is more than enough.

Practice. Practice. Practice.

Development is like martial art. If you practice the right techniques, you’ll grow into a coding ninja in no time!

As you progress, make sure you’re deliberately learning new techniques, tricks, and tools that will help you develop faster. Programming is a constantly evolving art form, and you can certainly improve on these techniques. Stay curious!

Takeaways

  • VS Code has an incredible set of capabilities. You’re wasting your time if you don’t learn them!

  • Your keyboard is faster than your mouse. Learning the key bindings for any program can speed you up significantly

  • Whenever possible, stop searching manually and use VS Codes’ built-in search functionality. (Ctrl + P, Ctrl + F, CTRL + SHIFT + P)

  • You can open an integrated terminal in VS Code easily.

  • Using Git in VS Code is easy, and less error-prone than using the command line

  • Practice these skills by making an effort to use them as you develop.

 
Share this