Don't Use a Mouse Anymore! VSCode Shortcuts Tips and Tricks

Summary

This tutorial focuses on enhancing productivity with essential VS Code shortcuts. It starts with opening projects using the terminal, then navigates through managing multiple files with keyboard shortcuts. It highlights the benefits of using shortcuts over a mouse for speed and efficiency, teaching viewers how to switch between files, close tabs, and manage folders. The video also covers editor customization, such as zooming and splitting the editor, and concludes with terminal usage tips for coding efficiency.

Takeaways

• 💻 Use keyboard shortcuts to increase productivity in VS Code.
• 🔑 Press `ctrl+\` to open the terminal for quick project access.
• 📂 Type 'code' followed by your project name in the terminal to open it directly.
• 🗂️ Use `ctrl+p` to quickly navigate to files within a project.
• 👉 Use `alt` plus number keys to switch between open files.
• 🗑️ Close tabs with `ctrl+w` or `ctrl+k+w` to close all tabs at once.
• 📁 Use the integrated terminal to create folders and files quickly with commands.
• 🖥️ Close the sidebar with `ctrl+b` to maximize coding space.
• 🔍 Use `ctrl+\` to split the editor and `ctrl` plus number keys to switch between splits.
• 🔄 Use arrow keys to edit and rerun previous terminal commands.
• 🧠 Over time, keyboard shortcuts become second nature and enhance coding speed.

Q & A

What is the main focus of the video transcript?

The main focus of the video transcript is to teach viewers how to use Visual Studio Code (VS Code) shortcuts to increase productivity.

Why is it recommended to use keyboard shortcuts instead of a mouse in VS Code?

Using keyboard shortcuts can make coding faster and more efficient once a user gets accustomed to them, leading to a more professional workflow.

How can you quickly open a project in VS Code without searching through folders?

You can open your terminal using 'ctrl+`', type 'code' followed by your project name, and press enter to quickly open the project.

What is the benefit of using 'ctrl+p' in VS Code?

'ctrl+p' allows you to quickly navigate to a file by typing a few letters of the file name, which is helpful when working with many files or folders.

How can you close multiple open tabs in VS Code?

To close all open tabs, you can use the shortcut 'ctrl+k+w', which will close all tabs at once.

What is a quick way to create a nested folder structure and a file in VS Code?

You can type the folder path followed by the file name in the 'New File' input field, and it will create the necessary folders and the file.

How can you see more of the coding area in VS Code by hiding the sidebar?

You can close the sidebar using 'ctrl+b', and open it again with the same shortcut.

What is the purpose of splitting the editor in VS Code?

Splitting the editor allows you to work on multiple files simultaneously in different parts of the screen, which can be helpful when referencing styles or other code.

How can you correct a typo in a command in the terminal without retyping the entire command?

You can use the arrow keys to navigate to the previous command, make the necessary corrections, and then press enter to execute the corrected command.

What is the shortcut to clear the terminal in VS Code?

You can clear the terminal by typing 'clear' and pressing enter.

How can you switch between split editor views in VS Code?

You can switch between split editor views using 'ctrl' and the slice number, such as 'ctrl+1' or 'ctrl+2'.

Outlines

00:00

💻 Enhancing Productivity with VS Code Shortcuts

The speaker introduces the importance of learning keyboard shortcuts in VS Code for increased productivity. They emphasize that while using a mouse might be easier initially, mastering shortcuts will eventually make coding faster. The tutorial begins with opening a project using the terminal shortcut 'ctrl+`' followed by 'code hotelApp' to quickly access the project. The speaker then demonstrates how to efficiently switch between files using tab numbers and 'alt' key. They also introduce 'ctrl+p' for searching and opening files, 'ctrl+w' for closing tabs, and 'ctrl+k+w' for closing all tabs. Additionally, they show how to create nested folders and files quickly without using the mouse, and how to manage the editor view with shortcuts like 'ctrl+b' to toggle the sidebar and 'ctrl+-' or 'ctrl=' to zoom.

05:01

🔍 Splitting Editor Views and Terminal Efficiency

This paragraph continues with tips on how to work more efficiently in VS Code. The speaker shows how to split the editor view using 'ctrl+\' and switch between different splits using 'ctrl' and the split number. They also discuss the benefits of using shortcuts for managing terminal commands, such as using the arrow keys to repeat and correct previous commands. The paragraph concludes with a demonstration of how to clear the terminal using the 'clear' command, emphasizing the speed and efficiency gained from using these shortcuts after a month of practice.

Keywords

💡VS Code

VS Code stands for Visual Studio Code, a popular source-code editor developed by Microsoft. It is free and available on multiple platforms. The video focuses on using VS Code shortcuts to increase productivity, which implies that VS Code is the primary tool discussed for enhancing coding efficiency.

💡Keyboard Shortcuts

Keyboard shortcuts are combinations of keys that allow users to perform tasks more quickly than using a mouse. The video emphasizes the importance of learning keyboard shortcuts in VS Code to transition from a beginner to a more professional coding approach.

💡Productivity

Productivity in the context of the video refers to the efficiency and effectiveness with which developers can complete tasks in VS Code. The video aims to show how mastering keyboard shortcuts can lead to increased productivity by reducing the time spent on routine tasks.

💡Professional

In the video, being 'professional' is associated with the level of skill and efficiency in using development tools like VS Code. It suggests that professionals use keyboard shortcuts effectively to navigate and edit code more quickly than those who rely on a mouse.

💡Terminal

The terminal is a command-line interface where users can execute commands. The video mentions using the terminal in VS Code with a shortcut (ctrl+`) to open and work with projects, demonstrating its utility in a development workflow.

💡Project Navigation

Project navigation refers to the process of moving between files and folders within a project. The video discusses using shortcuts like 'ctrl+p' to quickly find and open files, which streamlines navigation and enhances productivity.

💡Tab Management

Tab management involves organizing and controlling the multiple tabs or files open in an editor. The video introduces shortcuts like 'ctrl+w' to close a single tab and 'ctrl+k+w' to close all tabs, which are essential for maintaining an organized workspace.

💡File System Navigation

File system navigation is the process of moving through the file hierarchy on a computer. The video shows how to use shortcuts to quickly create and navigate file structures, such as typing 'folder/folder2/myApp.js' to create nested folders and a file.

💡Editor Splitting

Editor splitting is the act of dividing the editor window into multiple panes to view different parts of a project simultaneously. The video demonstrates using 'ctrl+\' to split the editor and 'ctrl' with a number to switch between panes, which can help in coding tasks that require referencing multiple files.

💡Zooming

Zooming in and out allows users to adjust the text size in the editor for better readability. The video mentions using 'ctrl -' to zoom out and 'ctrl =' to zoom in, which can be useful when working on large screens or when fine details need to be seen more clearly.

💡Command History

Command history refers to the ability to access previously entered commands in the terminal. The video shows how to use arrow keys to navigate through command history, which can save time when fixing typos or reusing commands.

Highlights

Introduction to using VS Code shortcuts for increased productivity

Advantage of keyboard shortcuts over using a mouse for professionals

Opening projects quickly using the terminal with 'code' command

Navigating between files using tab numbers and 'alt' button

Using 'ctrl+p' to quickly open files by name

Closing tabs individually with 'ctrl+w'

Closing all tabs at once with 'ctrl+k+w'

Creating nested folders and files quickly in the terminal

Minimizing the sidebar to maximize coding area with 'ctrl+b'

Zooming in and out of the editor with 'ctrl -' and 'ctrl ='

Splitting the editor to view multiple files with 'ctrl+\'

Switching between editor splits using 'ctrl' and the split number

Using keyboard shortcuts to install libraries or push to Github

Fixing typos in terminal commands using arrow keys

Clearing the terminal with the 'clear' command

Efficient coding practices to increase speed

The transition from difficulty to proficiency with keyboard shortcuts

Transcripts

Hello, my friends

today we are gonna talk about how to use

the most important vs code shortcuts to increase our productivity.

If you are a beginner,

using a mouse and regular shortcuts are okay

but if want to be more professional

you must learn how to use your keyboard effectively

but don't worry,

after this video, you are gonna be much faster.

If you are ready, let's get started.

Firstly, when you open your projects,

most probably, you are clicking here

and searching for your folder.

not this one

it's gonna be hotelApp

But, If you have a lot of folders here, it can be a waste of time.

So what I'm gonna do is

opening my terminal

-By the way, you can do this using ctrl+` buttons-

and writing here "code"

and my app name

which is hotelApp

I'll enter

And that's all. It's here.

If it's in another folder, I'm gonna go to the desktop,

and my project name.

it's that easy.

By the way guys, during this video,

You ll probably think that using a mouse is easier and faster.

Well,

for a couple of weeks after starting using shortcuts, you are right.

It's gonna be hard for you.

But once you get used to it, you'll see how fast you are

and you will regret that you didn't use them before.

Okay, let's go on.

After opening the project, you will probably use different files at the same time.

index, style, and js file.

Let's say I'm writing some code here.

I'll say "div"

and class name will be "myDiv"

And I want to give a style for this div.

Instead of clicking here, writing my style

and coming back, creating another one.

and going back again.

Basically, instead of doing this with the mouse,

I can use my keyboard and I can use tab numbers.

Number 1, 2 and 3

I can use "alt" button

And if I press on 1,

As you can see it's in the index file.

It's gonna work like that.

If I create here another div

I can quickly go to style.css, and write other divs.

But what if we have many files here.

We are working with multiple pages, multiple css files or js files

I cannot count them like that.

So what I'm gonna do is, using ctrl+p

and writing here some letters of my target file

As you can see I can go to "contact.html" quickly

ctrl+p

I want to go to the app.js or style.css

It's that easy.

You might say selecting here is easier.

But imagine, you have many pages, folders, files

Instead of searching for them in the sidebar,

Just use ctrl+p and search for it.

And after working for a while,

You'll probably have many tabs here.

To prevent this, after finishing your task,

You can close them using ctrl+w

like that.

In this case it's gonna close them one by one.

And if you want to close all tabs here,

You can use ctrl+k+w

Like that. It's gonna close everything.

By the way, if you are creating a folder,

Let's say "folder". And inside another folder.

And inside this, maybe "myFile"

Instead of doing this. Let's delete here.

I can come here, and say:

folder/folder2/myApp.js

In this case, it's gonna create those folders, and inside, this file.

So, you don't have to waste your time.

If you want to see more coding areas, you can close your sidebar using ctrl+b

And you open it again. Like that.

And you can zoom in or zoom out using ctrl - or ctrl =

And let's say you have a lot of HTML elements here.

And, it's not possible to remember every class name here.

Instead of going style.css again and again,

You can basically split your editor using ctrl+\

In this case, to switch between different slices, you can use ctrl and slice number.

It's gonna be slice number 1

Slice number 2.

So, if I say ctrl+1 we are here. ctrl+2. We are here.

If I come here and close this tab using ctrl+w

Right now I can see my class names here and I can give styles for them.

By the way, guys we are gonna talk about a lot of shortcuts. As I said at the beginning.

It's gonna be hard to memorize all those things but I promise you after coding let's say for one month with these shortcuts.

You will not even recognize that you are using them. You are gonna be a robot.

Okey.

Let's say, you want to install a library or basically you want to push your project to Github.

So, what you can do is opening terminal. (ctrl + `)

When writing any command here, if you have any mistake,

Let's say "giit init". As you can see, there is a typo here.

It's gonna give me this error.

Instead of writing this again,

You can just use your arrow keys, and it's gonna repeat the previous command.

And you can come here and fix it.

If you want to clear your terminal. You can write here: "clear". And enter.

Okey. Let's see how we can be faster while coding.

I'm gonna delete here.