Don't Use the Sidebar in VS Code!!
HTML-код
- Опубликовано: 26 апр 2021
- If you want to write code faster, don't use the Sidebar in VS Code. It will slow you down! As a developer, your goal should be to keep your hands off of the mouse as much as possible. To do that, you should learn to use the built-in shortcuts in VS Code as well as a few amazing extensions. Learn how you can work with your files in VS Code without using the File Explorer or the Sidebar.
Advanced New File Extension - marketplace.visualstudio.com/...
File Utils Extension - marketplace.visualstudio.com/...
FREE VS Code Cheat Sheet - learn.jamesqquick.com/vs-code...
Learn Everything About VS Code - www.udemy.com/course/learn-vi...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...
CTR + W: Close files
CTR + P: Find files
CTR + Tab: Switch windows
CTR + SHIFT + P: Command Palette (for commands)
For commands instead press F1
File Utils extension.
CTRL+K CTRL+W: Close All Files
CTR + SHIFT + T open recently closed file
@@sarcasticdna Always done this
I've been a developer for over 40 years now, and I can safely say that "writing code faster" is one of the lesser useful skills to have. I actually spend most of my time 'thinking' about code, not editing code. Saving the odd few seconds when editing would make very little difference to my overall productivity.
My man!!!!!!! Kudos
That's what I was going to comment.
Exactly. And you are more successful as a developer when you get senior and write less code
Think the same but for me it's more about convenience. I get annoyed having to grab the mouse. I rather do everything on keyboard.
Finally some truth of out experienced person, rather than focusing on learning this short keys use what you are comfortable with and focus on what is important not this bs. no offense he is just making a content and everything maybe for some people it is useful
Short recap for those who might not want to watch the full video:
Ctrl + P: File search
Ctrl + Tab: Switch between opening file tabs
Advanced New File from Extension Marketplace => Ctrl + Shift + P (or do a custom shortcut like James demonstrated)
File Utils Extension from Extension Marketplace => Ctrl + Shift + P again
P/S: I love the VSCode customization video you did previously James!
@Chirag np ^^
nice, bro!
Why does everyone use CTRL+SHIFT+P when F1 does the same thing?
@@Ares9323 FR
Been with vscode since the beginning. Somehow file utils is the extensions I didn't know I needed! Bingo bango thanks!!
Control + G let’s you move to a specific line in a line. I find that rlly helpful when I have test cases on specific lines in a file
Dooooope! I use to be super hands off mouse when I still worked in Visual Studio for C++ & C# development. I fell of the wagon, but this is great start to be mouse only again. Awesome vid!
Next thing you know, you'll be using Vim!
Exactly, using Vim makes editing much faster. Though I don't use vim natively, I prefer vim plugins in my Editor/IDE.
I use neovim but it take some time to configure it to have good setup, but vscode has nice vim plugin so I would sugegest to start with it for those who are thinking about using vim for keyboard driven workflow
@@grzegorzklimek6023 just use the vim extension in VS code then, it's a great intro to using vim.
@@grzegorzklimek6023 it took me 2 days to find all the plugins i use and configure vim, the .vimrc file is 200 lines long, oof.
Hey i saw you in Udemy as well... thanks for helping us heheh
My favorite, without a doubt, is command + / (toggle comment). Also use a lot command + B to toggle the side bar... mostly to see file paths
I subscribed a minute into this video in do part to your emphasis on improving short cuts. This is the sort of content I have been looking for. I am excited to see what the rest of your content has to offer!
watched the entire video and I am thoroughly impressed.
Great tip. I stopped using the sidebar as well and definitely improved my experience in vscode and production in general.
I've moved my file explorer pane to the right. It's usually hidden, but this way when I do pop it open, my main code window doesn't shift over.
Nice trick for someone new. But as mentioned in this video, you need to minimize use of side bar to be a good power user.Using key board is much faster then mouse. Also, when you use side bar, it should have main focus, not the editor window.
This is just my view. Everyone must figure out, what works best for them and your idea is also great for many. May be it just won't work for me.
thx for the tip I done the same!
@@kapsnotes9814 When you move the File Explorer, you’re also moving the same place where the built in git client, the extension browser, the search results and more appear.
I don't hide it all the time to keep my code closer to the center
Yep, I do the same 🙂
Great stuff. Personally, learning, tweaking and adding shortcuts to apps is the first thing I do when I start actually using it, and sharing through my several machines.
I recently bought a Macbook Pro and am getting used to working a lot more with the keyboard than with the mouse. I start putting your video into practice from now on. Greetings from Santiago de Chile
frequently I watch your short footages which are very useful and help me a lot, thank you.
Awesome, I got couple of new things.
However for new file/dir, rename, delete, I use/suggest CMD/CTRL + ` (open in-build terminal) followed by unix commands like touch, mkdir, mv, rm respectively. With that, I can make multiple sub-folders as well with single command. Thus, I suggest mastering unix terminal commands as well.
I'm also huge fan of shortcuts but I try to install as little as possible extensions as too many extensions may make VS code (Or any IDE/editor) slow.
Agreeing that these extensions tend to make it more weird and less appealing - especially when you basically have to rebind shortcuts 😒
Only if it was a matter of 1-3 seconds to move something with command line, I'd consider students to hone this skill instead of reaching to the mouse.
But at least if they can rename by click+F2, it's the step in correct direction 👌I still can't figure what's faster than that.
Advanced new tabs allows you tu create as many subfolders as you want, just write the folder name followed by \ and it'll be created as a folder, not as a file.
@@vintprox Why rebinding a shortcut *once* in a lifetime is a hassle? That's so stupidly simple to do that I don't understand such complaint.
Thanks for the video, this was very beneficial to learn some shortcuts. I concur that keeping hands on the keyboard will increase productivity overall.
You can hide the activity bar completely by finding it in command palette, so you can practice using your keyboard. You will learn it fast as you are forced to use keyboard everytime you need to do something. Useful shortcuts: ctrl+shift+e for explorer, ctrl+shift+f for search, ctrl+shift+g for git, d and x for debugging and eXtensions respectively.
@Chirag can't imagine editing without these features :)
Thanks, James! Great stuff as usual 👍
I honestly don't look for ways to write code faster. More important is to write better and functional code that is easy to read. Writing speed is unimportant long-term productivity. I don't see coding as a writing job it is designed what you do. Most coders should slow down, write less, and think more. But this is only my own experience as developer last ten years. Also, we are all different, I don't use search because most of the time I don't remember file names. :)
Definitely all different. Thanks for chiming in!
OHH Man thank you so much, I needed all this
(cmd + shift + e) or (ctrl + shift + e ) opens the side bar in the file you have currently open, that helps if you want to open a file in the same root and also I find that easier for renaming files, since i don't need to install another extension. It would just make it a little bit harder for moving files
I have been a shortcut user since WordStar.. minimalistic usage of mouse. Thanks for this video
Great video which lead me to remember vim, so do you use it or think of using it and finally do u recommend using it ?
Amazing thank you for this video, I’ll use this for my workflow
awesome thank you for the nice tips. you miss tab navigation for mac
one question can you show your development setup with a complete office environment
In addition to ctrl+W, ctrl+shift+T undoes close tabs like ctrl+Z undoes actions.
In addition to ctrl+tab, adding shift to that reverses the selection direction if you keep pressing tab.
Similarly, ctrl+pgup switches you to the tab to the left (pgdn goes right) cycling to the end (beginning) if it's reached and adding shift to this moves the tab you're in currently in that direction but doesn't cycle. This also cycles through split views as well but the shift modifier will not move across views, see below.
Lastly, ctrl+alt+right arrow moves the tab to the right split view (left arrow left) or creates a new view if you're at the end. The UI gets really janky if too many are open, probably dependent on your monitor size. I can get up to 6 horizontal views before things start breaking: there's a scrollbar that's hard to access, file contents remain where they are instead of following their view when that scrollbar is used, things overlap the sidebar, etc.
Additional tip - if you want to switch *instantly* between open tabs (without having to see the list of files):
Ctrl + Page Up
Ctrl + Page Down
Will jump back and forth between your currently open source files. Same shortcut works for most tabbed web browsers too.
This is gold. Thank you for sharing. 🙏👍
Awesome video James. Thanks for sharing. One thing that has caught my eyes since I've watched few of your videos is the white-balance is off and your videos are shifted toward cooler hues; is that intentional?
Hi James thanks for video. Which keyboard are you using? Which keyboards can you suggest us?
Hi :) Will you please do an update of your VS Code extensions / settings also your favorite code snippets and keyboard binding? I really love your channel and thank you so much!
File Utils MVP of this video for me :)
4:34 shorter way for windows: "F1" instead of "CTRL + SHIFT + P" :)
Worked on Linux too :) seems to be a VS-Code SC. Good tip thanks!
File Utils is amazing -- thanks for this!
Amazing and useful video. Thank's for the tips!
Great video with some very useful hints and tips. Although, from my own personal perspective, I'm like, 'What's the rush?'. I don't mind taking my time on developing. I don't think of it as something that has to be done as quickly and super-efficiently as possible. But, for those who do, this is a helpful video.
I think with any activity I do on a regular basis i want to continuously improve. If you’re comfortable with your existing workflow, that’s perfect!
Hey James, there are some shortcuts for the sidebar icons too.
When I need to access the Explorer for the files I hit CTRL+SHIFT+E, same thing with Git(CTRL+SHIFT+G) and so on.
Same. And you can just start typing to search for the file too, no scrolling necessary. VSCode's searching is great. I can hit Ctrl Shift E, type "usprocon" to locate "UserProfileController.php" then hit F2 to rename, Del to delete, Enter to open, etc.
Thanks, i really appreciate this video. By the way, i wanna know what is the name of the theme are you using your vscode ?
Thanks for the tips! Clear video and instructions. Personally I am not a fan of a ton of plugins and custom keys shortcuts. The reason is that when you need to switch computers, or instruct someone else, it is hard.
I use two alternatives:
1. command+` to toggle console and touch or code (create), mv (rename), rm (del) for file CRUD
2. command+b to toggle tree view, move with the arrows and enter to rename, space to open and command+b again
I'm still trying to figure out to have more control navigating the tree with the keyboard, like opening to the side
Also I'm trying the vim plugin occasionally, but I need more practise to make it work for me
That's always been my issue with a highly customised editor. When you use a colleague's editor or they use yours, then you are going to waste a lot of time figuring out someone else's set of 'shortcuts.'
Thank you for your tips. Can you help me to find out shortcut for `Copy file path` when you are in editor?
I am liking your videos more and more. Thanks for the useful tips. 😁
Bro, you have already speed up myself, and now I returning to this video again to speed up even more
Man I never realised that I need a complete VS code shortscuts guide
On Mac:
CMD + Left/Right to move the cursor to beginning/end of line.
Option + Left/Right to move the cursor to beginning/end of word boundary
Option + Up/Down to move line(s) of code up/down
WIth selected text: CMD + d to multi-cursor copies of the selected text (Case Insensitive)
With a block of selected text: CMD+Shift+L to multi-cursor every line within that block
It has been of great use. Thank you
Great tips. Thanks for sharing.
(“Cmd + K”, “M”) Is a really good one for changing the file type. When I create new files, I generally do:
1. (“Cmd + N”) New File
2. (“Cmd + K”, “M”) Select File Type
2.5 (I often write the code here before moving it)
3. (“Cmd + Shift + P”, “Move”) move the file to right directory
Nice. Which theme do u use? And which Plugin for cursor blink?
What do you think about vim extension for vscode ?
I tried it (I am not a vim user so not used to it), very interesting, big potential but for some reason I can't stick with it and always disable the extension at some point. And then sometime I'm like arf I could have done that without my mouse if I used vim extension. it's kind of a dilemma for me
Thanks very helpful extensions
My most used command is probably alt + any numerical key (mostly 1 - 5) to switch between open tabs. tab + 1 for, well, tab 1, and tab + 2 for... you get the idea. I always use two work groups as well, so my IDE is always split. I use alt + w to swap between the two work groups as well, this paired with alt 1 - 5 makes it a breeze to navigate when you have a lot of files with dependencies that you need to keep track of.
I also bind alt+left/right arrow to move between tabs horizontally
awesome workflow. thanks
Hi James. This is the first video I see from your channel. I'm impressed. So, I have a question, what extension do you use to achieve your cursor pointer looks like that, increasing and decreasing?
Thanks in advance.
It is the feature comes with VSCode, go to vscode settings and search for cursor, you will see something called "Editor: Cursor Blinking", the one he used is "expand"
How do you select menu from the drop down?
Do you move your right hand to use arrow keys?
You could do most of this simply from the command file with zsh or PowerShell
Cool. Thank you. Very helpful!
great content! caught wind of you via Traversy, happy I did
One of my favorite personal keybinds (assigned to Ctrl + Shift + M) is for Change Language Mode feature. When you create a new file (without the extensions you presented in the video) in VS Code via Ctrl + N, it has no extension assigned nor any IntelliSense library loaded from the start, therefore the second thing after I create a new file is changing the language mode with that keybind, e.g. to JS.
thanks for this video. helped a lot
What is the extension your use to fade in/out your typing cursor?
Ty very much James! Really good stuff
Ctrl + - (on Mac) to cycle through your cursor position history. It’ll even open closed files, which is nice. You can add the shift key to go forward as well.
I just tried this and it had a zooming effect for me.
Very useful video, thank you!
Great! Mastering keyboard shortcuts will save we a lot of time.
can just use inbuilt terminal to do file operations? however, this was needed in case people prefer extensions.
To create a new file, I normally hit ctrl-~ to open a zsh terminal, type code dir/to/new/file. It will create the folders for you then open the new file in the editor. Once you save it, it shows up in the project.
Great content as always!
Thank you James😍😍👍
i started doing this recently. i realized that looking for files in the sidebar was causing me constant frustration in big projects. i'm trying to make coding more "ergonomic".
Thanks for video
One question, I figured out how to delete a file, but I don't understand how to delete a folder just as quickly
It helped a lot. thanks
...great video! I would love to see a more in-depth video on OTHER things I can do to not touch the mouse~
CTRL + G is the solution about your title, great video :)
Ctrl + k + w closes all your files.
Thanks for your content
Respectfully, you have a terminal window built into vscode, is it necessary that you install extensions to move, delete, and/or rename, files?
Most of the shortcuts resemble browser shortcuts.
Ctrl P and Ctrl Shift P are my favourite shortcuts 😍
Well it is a browser :P
@@vickylance 😂 True
Hahaha nicely done!!
@@JamesQQuick done what?
Thanks sir.
Just popped in to say I love the thumbnail 😎
I feel amazing navigating the IDE with the keyboard.
With the mouse, not so much
CMD / CTR + PP + immediate release of the keys also toggles between the last two used files.
CMD / CTR + PP... + holding CMD / CTR key browses through recently opened files.
I didn't knew about the CTRL+TAB, I use CTRL+1, 2 etc... like in Chrome haha. I love that they are all aligning with standards so that each software becomes more easy to use, and you don't need to remember as many shorcuts for a specifics apps.
Also try CTRL + SHIFT + TAB, it goes in reverse direction.
CTRL+1, 2 switches between groups for me. Have you remapped them?
@@AacidD1 nope, but I'm not using groups, I don't remember if firefox has groups lol
This is quick James. 😊
nice tutorial. thanks!
Do you know a good way to close confirm alerts? For example, modify a file (without saving) and close the file. The confirm alert opens but you can't use keyboard shortcuts to close it.
you can also switch between tabs on mac by pressing option+command+right arrow or left arrow
What extension gives you that last modified by you info on line hover? Show for example at 8:17
Very well explained. 👏
Very helpful!
what's the extensions that shows who committed the line on the right of the selected line?
Nice. Thank you.
Great content!
JQ2, born to teach, another excellent set of tips..
Thanks, very useful 👍
Ctrl+B to toggle the side bar is also essencial for this workflow
What did you do to make the cursor pulse like that?
Great thank you!
Man, congrats for this video!!
I need to ask.
I saw the "withPageAuthRequired" and I need to know, how keep my user logged between the components?
I have the auth endpoint and the jwt access as well.
Make a video with some subject like that.
Thanks man.
You have a new subscriber.
Where is your Github public profile?
Glad to have you as a subscriber. There are also frontend hooks to access the user there ;)
May I ask what color theme is that? Looks really good
I was currently doing this with my terminal, it would be good to do it directly in VSCode
Great video brother!