25 VS Code Productivity Tips and Speed Hacks

#vscode #learntocode #programming

🔗 Resources

📚 Chapters

00:00 Intro
00:35 1. VS Code CLI
01:03 2. Release the Mouse
01:45 3. Command Palette Ctrl+P
02:10 4. Run Commands
02:25 5. Quokka
02:43 6. Find Symbols with @
03:14 7. Find symbols with #
03:36 8. Move Around Quickly
04:07 9. Multiline Editing
04:23 10. Auto Rename Tag
04:47 11. Delete or move a line
05:16 12. Highlight & Comment Lines
05:39 13. JS Doc Extension
06:07 14. Better Comments
06:20 15. Integrated Terminal
07:14 16. Tasks
07:38 17. Git Source Control
08:26 18. Git Lens Extension
08:40 19. Remote Repositories
09:14 20. Remote SSH & Containers
09:31 21. Custom Snippets
10:01 22. Community Snippets
10:13 23. Auto-create directories
10:29 24. Paste as JSON
10:50 25. Rename Symbol

🤓 Install the quiz app

🔥 Watch more with Fireship PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

[stefandili]

Emmet balance outward command - expands selection outwards to the nearest tags/brackets. Hit again to include the tag in the selection. Now combine with another powerful one: emmet wrap with abbreviation. Never cut + write <tag></tag> + cursor between + newline + paste again! Just click on the desired section, balance outward, wrap with abbreviation. Boom!

[chrisfilippidis]

Just for me:

1:47 ctrl+P open command palette and > for all the commands
2:59 ctrl+F find word (meh)
3:04 @ symbol at command palette is better than ctrl+F
3:13 ctrl+shift+. for the same thing
3:53 ctrl+G go to line number
3:59 shft+arrows highlight
4:02 ctrl+arrows move word by word
4:07 ctrl+D highlight and replace word / add multiple cursors
4:28 alt+click create cursor at any place
5:02 ctrl+X cut line
5:08 alt+arrows move line
5:14 alt+shift+arrows move and copy line
5:33 ctrl+L highlight line
5:37 ctrl+/ comment
6:27 ctrl+` open terminal
7:07 ctrl+K clear terminal
7:12 ctrl+arrows command history

[desther]

VS Code is piece of art, Microsoft really outdone itself here.

[andersinperson]

*Sets the play speed to x2 while hearing "the most valuable thing you own is your time..."*

[sirdrzamich]

My favourite shortcut is expand / shrink selection.
Mac: ⇧ + ⌃ + ⌘ + ←/→
Windows: Shift + Alt + <- / ->
Place the cursor in the middle of a string and start expanding. It will firstly select the word and then will be gradually adding surroundings to the selection: firstly the whole string, then the quotes, then the brackets, then the object, then object's brackets and so on and so forth - feels like AI and can save a lot of time.

[andrewglick]

One of my favorites:
Shift + Alt + A -- Create a block comment (useful for languages that have specific block comment syntax that varies from inline comments). It can turn a highlighted selection into a block comment or create an empty block comment if nothing is selected.

[suparthghimire]

More:
1) Ctrl + SHIFT + L -> Grandfather version of Ctrl + D (Selects all Occurrences of that string in text editor)
2) Ctrl + B -> Toggle File Explorer
3) Ctrl + J -> Alternate for Ctrl + ` (Toggle Terminal)
4) ALT + Number -> Change Active Tab Windows
5) Ctrl + Shift + P -> Direct Access to Command Runner for VS Code

[calitts]

The things I like the most in VS Code are the auto-save, formatting and the fact that you can customize almost every keybindings you want to make it simple to your uses.
But one thing that I consider very important and you didn't mention is the code runner extension, that can run almost every type of code easily and fast, very useful for testing for example.

[bobmicswarly]

I've always used IDE's that were built for one or two languages, so as soon as I opened VS code I was blown away by how many options there were. Simply incredible! I'm using this as my main editor from now on.

[pasindudilshan]

Always create code workspace for the project you're working on.
If you're working on multiple projects that require different extensions or any other customizations this will help you out by a lot.
Also you can add the extension(s) used as a workspace recommendations - which can be shared amongst the team.

[matangubkin]

"Error lens" extension highlights errors and warnings. Works really nice with typescript and very useful overall

[tjblackman]

Code Folding at various levels:
cmd+K+n = Fold code at n level; cmd+K+1, cmd+K+2, 3, 4....
cmd+K+J = expand all lines of code.

[kalokal]

Honestly, the best thing is instead of doing CRTL + P and then typing an > you can just do CRTL + SHIFT + P. Flows much better

[feynmaz]

Those shortcuts literally changed my life, providing for 10X productivity. Thank you for this awesome content

[Kynatosh]

When creating an HTML file you can type ! and hit tab and you have a default page
Lorem99 is useful too, 99 being the number of Lorem ipsum words
alt+click is useful to edit several lines at the same time
You don't need the auto rename tag extension, it already exists as linked editing in the settings

[adnanamin]

3 things I've been using constantly and I can say it has saved me a lot of mouse click and seconds doing this.

1. Copy/Cut - without selecting the whole line, just placing the curson on the line and pressing ctrl+c/v

2. Moving lines up and down with alt+↑ /↓

3. Using the command palette which I have learned very recently

[antispeak]

This reminded me there's a few that I should try to incorporate more into my workflow:
Ctrl + Shift + E to focus on the file sidebar, and use arrow keys to navigate through them.
When a file is selected, Ctrl + \ to open it in a new split window.
You can change the focus between split window groups with Ctrl + 1/2, etc.
Ctrl + Tab, or Alt + 1/2/3 etc. to navigate through currently opened files in the currently focused window.
Ctrl + W to close the currently opened file in the currently focused window.

[MindlessTurtle]

8:48 - "But now, thanks to the monopoly that Microsoft has on the developer ecosystem..." - it's quotes like these that make me love this channel so much. Kudos, Fireship!

[davemeech]

VS Code is probably my most favourite piece of software I've ever used. I thought I was a ninja with it but this video cranked up the heat. Awesome watch, I'm almost excited to go back to work after the weekend now.

[shaunpx]

My favorite productivity tip aside from making my own custom keyboard short cuts is using multiple cursors.

you hold down the Alt key and click somewhere, you’ll put down a new cursor. Each cursor will accept the same key commands at the same time—a handy way to enter boilerplate text on multiple lines at once, for example.

Another way to add cursors is to hold Ctrl+Alt and press the up or down arrow keys. Doing so will insert cursors in the lines above or below the current one—useful for working in columns of text.

Another slick move: You can insert a cursor at every instance of a selected piece of text by hitting Ctrl-Shift-L. You can also control the selection size of multiple cursors by pressing Shift-Alt and the left or right arrow.

Cheers!