25 VS Code Productivity Tips and Speed Hacks

  Рет қаралды 2,248,571

Fireship

Fireship

Күн бұрын

Learn 25 VS Code tips and tricks that will help you write code faster. Try out awesome new features and extensions that turn your editor into a full-blown IDE. fireship.io/pro
#vscode #learntocode #programming
Support me for $1 on github github.com/sponsors/codediodeio
🔗 Resources
VS Code code.visualstudio.com/
Remote Repositories code.visualstudio.com/blogs/2...
vim Tutorial • Vim in 100 Seconds
📚 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
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

Пікірлер: 2 000
@stefandili2650
@stefandili2650 2 жыл бұрын
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 + cursor between + newline + paste again! Just click on the desired section, balance outward, wrap with abbreviation. Boom!
@Fireship
@Fireship 2 жыл бұрын
🎉 T-Shirt WINNER! Thanks for the awesome tip. Reach out via email or slack with your mailing address and size. Also, your comment will be featured in the next short :)
@stefandili2650
@stefandili2650 2 жыл бұрын
@@Fireship 🔥🔥🔥
@antio1753
@antio1753 2 жыл бұрын
@@Fireship I wrote the same tip, (I don't know if it was earlier than Stefan or after, But says "3 days ago" on both of our comment).....aaah maybe next time I will be more lucky :( Well done Stefan Enjoy your reward :D !!!!
@ALLINONETECH6
@ALLINONETECH6 2 жыл бұрын
I don't understand 🤔
@stefandili2650
@stefandili2650 2 жыл бұрын
@@ALLINONETECH6 create a tag with some text inside. Select part of text. Hit the emmet balance outward command. Repeat until the tag is included in selection. Hit emmet wrap with abbreviation. Enter div in the input and hit enter. Voila
@desther
@desther 2 жыл бұрын
VS Code is piece of art, Microsoft really outdone itself here.
@everyhandletaken
@everyhandletaken 2 жыл бұрын
I get irate with every MS product, except VSC.. it is really darn stable & it is capable of just about anything (especially with extensions)- all whilst looking sleek. The Command Palette over traditional toolbars & menus is pure genius. All this, for free..? Am I the product? 🤔
@jaedson-barbosa
@jaedson-barbosa 2 жыл бұрын
@@everyhandletaken nop, because it's a open source project.
@bayramkazk5112
@bayramkazk5112 2 жыл бұрын
@@jaedson-barbosa no it isn't. the builds on the vscode website and the github repo have different licenses. the build you install from the site is based on the vscode repo at github but they add their own telemetry junk etc. it is even written as "built on open source" instead of "open source" in the site. if you want to build from github repo source code or use open source binaries, you can't install most of the extensions which sucks.
@beignetkiller
@beignetkiller 2 жыл бұрын
@@bayramkazk5112 Very interesting, thank you !
@ggsvr8926
@ggsvr8926 2 жыл бұрын
@@bayramkazk5112 There are still full open source builds without any spyware bullshit available, like vscodium.
@andersinperson
@andersinperson 2 жыл бұрын
*Sets the play speed to x2 while hearing "the most valuable thing you own is your time..."*
@UsamaKarim
@UsamaKarim 2 жыл бұрын
You should also mute the speaker than. This way you can save your battery & you can save some time by not plugin phone again & again 😂
@mohamed6272
@mohamed6272 2 жыл бұрын
Themostvaluablethingyouownisyourtime
@suriya7646
@suriya7646 2 жыл бұрын
You guys are wasting your time commenting here. Oh wait I am doing the same......
@chrisfilippidis
@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
@aggelosbillis7433
@aggelosbillis7433 Жыл бұрын
🤓🤓🤓🤓🤓
@AntiUTTP926
@AntiUTTP926 10 ай бұрын
​​@@aggelosbillis7433 bro shut up you're just jealous.
@TheBJCummings
@TheBJCummings 10 ай бұрын
Thanks for sharing! These are just the commands I was needing as well
@chrisfilippidis
@chrisfilippidis 10 ай бұрын
Glad i was able to help!
@Discipline-sj4fn
@Discipline-sj4fn 9 ай бұрын
Thanks
@sirdrzamich
@sirdrzamich 2 жыл бұрын
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.
@primumNocere
@primumNocere Жыл бұрын
Hey, it's my favorite shortcut too. :) I like it so much that I customized keybindings of them to: Ctrl + D Expand (Add Selection To Next Find Match by default) Alt + D Shrink (unbound by default) Ctrl + Alt + D Add Selection To Next Find Match (unbound by default) These 3 work so good with each other, highly recommend giving it a try if those keys are available to you.
@mohsinmahmoodmdl
@mohsinmahmoodmdl Жыл бұрын
I was searching for this since long. thanks for sharing :)
@mwagaha3343
@mwagaha3343 11 ай бұрын
This is awesome, thanks!
@kaotiskhund
@kaotiskhund 10 ай бұрын
The fact that you distinguish ⇧ from Shift... Yes, doctor
@suparthghimire1644
@suparthghimire1644 2 жыл бұрын
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
@0xPanda1
@0xPanda1 2 жыл бұрын
thanks dude
@BioniXdu25
@BioniXdu25 2 жыл бұрын
Ctrl + J isn’t exactly the same, it just brings up the bottom panel iirc (but yeah usually you’re on your terminal so I just use it to toggle it on / off)
@katech6020
@katech6020 2 жыл бұрын
F1 does the same as Ctrl+Shift+P
@TheSaintsVEVO
@TheSaintsVEVO 2 жыл бұрын
Ctrl + B toggles sidebar, not file explorer.. I think 🤔
@BioniXdu25
@BioniXdu25 2 жыл бұрын
@@TheSaintsVEVO You're right, CTRL + SHIFT + E brings out file explorer
@andrewglick6279
@andrewglick6279 2 жыл бұрын
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.
@pasindudilshan4840
@pasindudilshan4840 2 жыл бұрын
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.
@calitts4708
@calitts4708 2 жыл бұрын
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.
@SXsoft99
@SXsoft99 2 жыл бұрын
Like any editor worth it work
@nikhil6204
@nikhil6204 Жыл бұрын
Auto save is actually too much for big projects. Its restarts the server everytime you type anything
@mwelpa
@mwelpa Жыл бұрын
@@nikhil6204 That's why you should build your main app with modules :P
@tjblackman08
@tjblackman08 2 жыл бұрын
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.
@everyhandletaken
@everyhandletaken 2 жыл бұрын
Nice! Didn’t know this one existed, Ty.
@KentaroxKondo
@KentaroxKondo 2 жыл бұрын
Thank you!
@ioticos3594
@ioticos3594 2 жыл бұрын
Yes! I put it in F1 key the fold root level only
@bobmicswarly8333
@bobmicswarly8333 Жыл бұрын
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.
@maneshipocrates2264
@maneshipocrates2264 Жыл бұрын
U said it all. MS will end Jetbrains if they do not improve.
@feynmaz
@feynmaz Жыл бұрын
Those shortcuts literally changed my life, providing for 10X productivity. Thank you for this awesome content
@MindlessTurtle
@MindlessTurtle 2 жыл бұрын
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!
@Aedaeum
@Aedaeum 2 жыл бұрын
I was going to comment this exact thing...I love how casually he just drops that in... I wonder how many people noticed...
@CrashPreinsertion
@CrashPreinsertion 2 жыл бұрын
@@Aedaeum Telemetry
@ggGrey
@ggGrey 2 жыл бұрын
It's not necessarily a dig. It's just stating a fact. So far, most devs seem to have no problem with it because it makes for a smooth working env. Nobody feels comfortable with a monopoly, yet for devs it might very well mean a non-sarcastic "thanks to" in this case.
@matangubkin6422
@matangubkin6422 2 жыл бұрын
"Error lens" extension highlights errors and warnings. Works really nice with typescript and very useful overall
@Human_Evolution-
@Human_Evolution- 2 жыл бұрын
I like it so far. Thx
@user-lg7td1he3s
@user-lg7td1he3s Жыл бұрын
error lens might be my faverat extension
@airo.pi_
@airo.pi_ 8 ай бұрын
thx.
@shaunpx1
@shaunpx1 2 жыл бұрын
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!
@davemeech
@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.
@kalokal5812
@kalokal5812 2 жыл бұрын
Honestly, the best thing is instead of doing CRTL + P and then typing an > you can just do CRTL + SHIFT + P. Flows much better
@kalokal5812
@kalokal5812 2 жыл бұрын
@Xavier James true, although I like the Crtl shift P better even though it is longer, I guess it's because the keys are where fingers are anyways which makes it more comfortable for me than reaching for the F1 key
@charlesm.2604
@charlesm.2604 2 жыл бұрын
@@kalokal5812 You either need a smaller keyboard or bigger hands haha Personally I use a custom 60% layout and I have an additionnal Razer Tartarus to runs maccros and numpad (its kinda like a streamdeck on steroïd with a built-in joystick). Looks ugly tho.
@sacha6757
@sacha6757 2 жыл бұрын
And CTRL + SHIFT + O to open symbols search bar directly
@musabsayyed8609
@musabsayyed8609 2 жыл бұрын
Use VS Code without downloading : kzbin.info/www/bejne/Z5fMpadujaujrdU
@adebayoomolumo1938
@adebayoomolumo1938 2 жыл бұрын
One of the sweetest things about vscode is the fluidity, I am big fan of Atom editor and sometimes I prefer using it(it's an attachment thing). In vscode, you can easily import your settings by comparing settings.json files and changing values. eg. I use ctrl+⬆ instead of alt+⬆ to move lines of code up and down. So there, as requested @Fireship
@jixiangli4752
@jixiangli4752 2 жыл бұрын
Thanks so much for this video. I was recently reviewing my own productivity at work, it could be a nice solution to 1. Reduce the mouse use but learn quick hotkey from keyboard intentionally 2. Ctrl + shift + . is really a nice shortcut to review a Typescript Class 3. And so much more... and be thankful for the developer who has such incredible creativity that created these extensions
@davidgutmann2083
@davidgutmann2083 2 жыл бұрын
This video was mind blowing for me. I really didn't know how powerful VSCode is. Thank you really much for this video, you really saved hours of mindless working time for me. Give this guy a medal!
@anti1337speak
@anti1337speak 2 жыл бұрын
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.
@naimreza2581
@naimreza2581 2 жыл бұрын
Pro tip: instead of pressing crtl+p then ">", you can only press F1 to execute commands.
@demidevil666
@demidevil666 2 жыл бұрын
For Mac users, the corresponding shortcut is [cmd+shift+P]. :)
@Lucas-gt8en
@Lucas-gt8en 2 жыл бұрын
@@demidevil666 for my fellow Ballmer-heads out there: ctrl shift p also works on windows
@thedathoudarya
@thedathoudarya 2 жыл бұрын
Super usefull, thanks a lot 🙏
@naimreza2581
@naimreza2581 2 жыл бұрын
@@thedathoudarya 😊🥰
@freshprince633
@freshprince633 2 жыл бұрын
Cntrl shift p if the F1 is not easy to reach all the time. Works on Linux
@neonsilver1936
@neonsilver1936 Жыл бұрын
I keep watching this and adding pieces of it to my coding practices in VSCode. It's a game changer, for real, thank you!!
@codefrite
@codefrite Жыл бұрын
I watched it many times along the year and I still learn new things ... Thx bro !
@sashikanawarathne8465
@sashikanawarathne8465 2 жыл бұрын
One of my personal preferences is overriding the default ctrl+- and ctrl+= bindings which will change editor size to code folding and unfolding. You can do this by setting the shortcuts in preferences -> keyboard shortcuts. This is very handy in maintaining lengthy files
@jawadsrour8490
@jawadsrour8490 2 жыл бұрын
Number 1 Developer! You’re an inspiration to many of us! Keep it up!
@musabsayyed8609
@musabsayyed8609 2 жыл бұрын
Use VS Code without downloading : kzbin.info/www/bejne/Z5fMpadujaujrdU
@AkshayKumar-kz6zh
@AkshayKumar-kz6zh 2 жыл бұрын
Currently using Remote containers in project. My teammates 💙 it. Btw your content quality is 💯. Never have I enjoyed a Dev channel so much!!
@codeforweb7602
@codeforweb7602 2 жыл бұрын
Awesome rundown of VS Code features in less than 12 minutes. Thank you.
@user-cb6rp1ed8k
@user-cb6rp1ed8k 2 жыл бұрын
alt + left key : goes backwards to the last file or line you visited crtl + shift + f : finds all in your whole project/directory F12 : goes to defenition crtl + alt + up/down keys : sets cursor on multiple subsequent lines
@adnanamin3666
@adnanamin3666 2 жыл бұрын
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
@internetexplorer7880
@internetexplorer7880 2 жыл бұрын
4. Duplicating lines using Alt+shift + ⬆️/⬇️
@Shubhampalzy
@Shubhampalzy 2 жыл бұрын
Is vs code recommended for a newbie?
@internetexplorer7880
@internetexplorer7880 2 жыл бұрын
@@Shubhampalzy yep definitely 👍, unless you wanna use notepad
@zecuse
@zecuse 2 жыл бұрын
@@Shubhampalzy Having used Notepad++ for about a decade, I've switched to VS Code because my work switched us to laptops last year and revoked our admin privileges. This meant I couldn't install extensions anymore and I finally bit the bullet and installed Code, which doesn't require admin for almost all extensions. I can say that if all you want is a text editor, Code will do everything Notepad++ will do, sometimes simpler as well, and give you access to more extensions.
@Kynatosh
@Kynatosh 2 жыл бұрын
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
@Endelean
@Endelean Жыл бұрын
Linked editing... Nice.
@HypnosisBear
@HypnosisBear 8 ай бұрын
The last tip was very cool! Thank you!!
@narex45635
@narex45635 Жыл бұрын
A couple efficient ways of returning from multiple cursors to one: 'esc' will remove all but one cursor and 'ctrl + u' will undo the last cursor action one at a time. Both are good muscle memories to develop as you begin using tricks like the 'ctrl + d' spam demonstrated in the video.
@cakemnstr42
@cakemnstr42 2 жыл бұрын
Highly recommend Bracket Pair Colorizer 2 and Indented Block Highlighting. Helps me a great deal when dealing with code nesting. Especially useful in Flutter. I also like Code Spell Checker, can handle camel case etc. Just prevents typos which can lead to headbanging bugs later if something is named slightly differently then you thought it was. Also supports a user dictionary and can fix it for you so you can add all your domain specific stuff and never mistype it again
@silver7297
@silver7297 2 жыл бұрын
This is hands down the best VS Code video in existence. 👏
@MiSt3300
@MiSt3300 2 жыл бұрын
Absolutely brilliant. I already used some of those like alt+arrow key or ctrl x or ctrl P but ctrl g is great and ctrl shift . is also perfect! Thanks!
@Hydhen
@Hydhen 2 жыл бұрын
To rename symbol you can simply use the F2 button from the keyboard on the symbol you want to rename in the entire project F2 is used in the whole Windows ecosystem so that's a nice thing they kept it :) Awesome video, learn tons of things I'll add to my setup thanks for sharing !
@sameersyed1821
@sameersyed1821 2 жыл бұрын
Love every video, a simple but useful feature is on .md(markdown) files you can hit cmd+shift+v to preview the formatted file
@Centomila
@Centomila 2 жыл бұрын
It's the first time i already know everything on a Fireship video. For once i don't suffer impostor syndrome :D
@SomeFreakingCactus
@SomeFreakingCactus 2 жыл бұрын
The sign of a knowledgeable person is the fact they’re still learning things.
@omarabdulla9628
@omarabdulla9628 2 жыл бұрын
I’ve been using VS code for close to 4 years now and I didn’t know about half of these. Thanks for the great video!
@aneeshkadake9784
@aneeshkadake9784 2 жыл бұрын
Awesome content as always 🤩 I knew some of these, but never heard of the rest, thnx alot!
@omegaomar29
@omegaomar29 2 жыл бұрын
Amazing, you are helping so much a lot of developers around the globe
@CryptoMar
@CryptoMar 2 жыл бұрын
Amazing tips, that @ symbol to break down files is awesome
@salmankabirshouvo
@salmankabirshouvo 2 жыл бұрын
There is also a key shortcut " Ctl + shift + F " and search whatever you want through your entire project. I like that shortcut so much. Because it helps me to search functions I forgot where I saved it.
@RobertMcGovernTarasis
@RobertMcGovernTarasis 2 жыл бұрын
For once a VSCode video that genuinely helpful. Cheers! Wasn’t aware of a bunch of the bits you showed (like the @ symbol trick)
@thehibbi
@thehibbi 2 жыл бұрын
Best tip: Combine the greatness of vscode with vim. Takes some time to get used to but is super efficient and fun. I also liked how you sneaked the "i use arch btw" meme into the tweet ^^
@rice8864
@rice8864 2 жыл бұрын
i cant even wrap my head around how to paste so no thx
@TheEroticDonkey
@TheEroticDonkey 2 жыл бұрын
@@rice8864 that's not the spirit
@rice8864
@rice8864 2 жыл бұрын
@@TheEroticDonkey lol
@rice8864
@rice8864 2 жыл бұрын
@@TheEroticDonkey i have no spirit im dead
@kevinbatdorf
@kevinbatdorf 2 жыл бұрын
Pro tip 2, remove the tabs and icon sidebar and navigate files and panels with keyboard shortcuts. Give yourself more visual space. Also, increase line heights and get a pretty font.
@hemantvetal
@hemantvetal 2 жыл бұрын
yes, just find right font size, theme, font,font style and clear the clutter
@TheSaintsVEVO
@TheSaintsVEVO 2 жыл бұрын
@@hemantvetal any recommendations?
@__redacted__
@__redacted__ 2 жыл бұрын
Material theme and go borderless. Why have a border and padding when enough padding can accomplish both.
@rahulsriram6295
@rahulsriram6295 2 жыл бұрын
Ctrl+K, Z....this is the Zen Mode. It's beautiful
@nobodydoe
@nobodydoe 2 жыл бұрын
What do you mean by "remove tabs"? Typing a filename every time you want to switch to a tab? It seems to me not efficient at all.
@actuallyasriel
@actuallyasriel 2 жыл бұрын
A little detail I appreciate is using the phonetic alphabet when saying shortcuts -- eliminates obscurity from mic pop, speaker issues, just hearing wrong, etc. I worked AppleCare for a time and it was one of the most transformative thing I did for customers -- while collecting names or email addresses, they'd struggle to enunciate a letter because phone call quality, and then I'd confirm in phonetic alphabet, and they'd go "oh, oh yeah" and then start doing it for the rest of the call, which would then go much smoother. Underrated tech support tactic.
@krapalicious
@krapalicious 10 ай бұрын
My favorite keyboard combo is CTRL+SHIFT+L, which is the select all instances of the current selection. It's super helpful for creating a long SQL insert statement, for example.
@santoshthedeveloper
@santoshthedeveloper 2 жыл бұрын
If you cannot find a closing div tag in vs code you can use the "balance outward" command in the command palette that will select all the content inside the opening and closing tag including tags. Note that your cursor and opening tag should be on the same line. You can create a seperate keyboard binding for this command for ease of use.
@doandadrestarahma5290
@doandadrestarahma5290 2 жыл бұрын
You just helped me prevent my future self from going back in time and disrupting the time-space continuum to use these features.
@hungtruongngoc1297
@hungtruongngoc1297 2 жыл бұрын
Absolutely blown my mind! Thanks for the good work 👍
@brindch8372
@brindch8372 2 жыл бұрын
Some useful extensions: Auto close Tag - Automatically add HTML close tag, even JSX. Might be annoying when declaring types with TS Bracket Pair Colorizer - for colorizing match brackets Peacock - Change the color of VS code workspace
@Fovaxus
@Fovaxus 2 жыл бұрын
vscode now natively has brackets pair colorization feature
@waiitwhaat
@waiitwhaat Жыл бұрын
@@Fovaxus was gonna say the same. about time
@AttilaButurla
@AttilaButurla 2 жыл бұрын
Great stuff, I'm going to rewatch this several times!
@thatsalot3577
@thatsalot3577 2 жыл бұрын
Haha same.
@sourandbitter3062
@sourandbitter3062 Жыл бұрын
Other shortcuts I use everyday as a front-end developer: Shift + Alt + f12 to quickly search references to a selected type (if using Typescript), variable or function throughout the whole project. Ctrl + Shift + f to search selected text globally. Also learn when to search for whole words and/or with captions. Ctrl + Shift + t to reopen last closed files/tabs, just like in a browser. Ctrl + w to close the current file/tab. Alt + horizontal arrows to go back or forward to the last cursor positions.
@rezkiy95
@rezkiy95 Жыл бұрын
My dude you opened a whole new world to me, danke sehr schön
@napapt
@napapt 2 жыл бұрын
One good way to keep your files organized is by pinning tabs by "right click" -> "pin" (Ctrl+K Shift+Enter), pinned tabs have a number of useful features to help mark files that are important to you.
@mustafavurkac1650
@mustafavurkac1650 Жыл бұрын
One thing to add. Close all editors command won't close pinned editors. So thats also good if you are searching many files and when you finish you close all unnecessary editors and keep your main.
@Gregorius421
@Gregorius421 2 жыл бұрын
"There are only two hard things in CS: cache invalidation, naming things and off-by-one errors." missed opportunity...
@nourgaser6838
@nourgaser6838 2 жыл бұрын
Not off-by-one if you're counting from 0. ;)
@EagerEggplant
@EagerEggplant 2 жыл бұрын
@@nourgaser6838 still 3 things, doesn't matter at what number you start.
@dontbetoxic4387
@dontbetoxic4387 2 жыл бұрын
@@nourgaser6838 what do you mean
@SomeFreakingCactus
@SomeFreakingCactus 2 жыл бұрын
@@dontbetoxic4387 He’s making a joke about how computers count starting at 0, but 3 things are still 3 things.
@dontbetoxic4387
@dontbetoxic4387 2 жыл бұрын
@@SomeFreakingCactus no you are wrong. It doesnt matter where you Start to count, the amount is always the same
@carloskirui1400
@carloskirui1400 Жыл бұрын
Damn, brother. This video bussin. Love the great content. Looking forward to more of this stuff.
@favna
@favna 2 жыл бұрын
What makes me feel most powerful in VSCode is 1. Search your file (using regex if you need a pattern) 2. Focus the file itself 3. Press Control + Shift + L to select all occurrences of your search with multi-cursor 4. Make edits This way you can bulk edit things in a file super quickly.
@bob_bobsen
@bob_bobsen Жыл бұрын
Commenting to bookmark
@khangnguyen469
@khangnguyen469 2 жыл бұрын
My favorite feature I found out lately is Emmet Abbreviation. Type div.container#App and then press Tab will expand the expression to with the cursor goes in between the opening and closing tag. It work correctly with JSX too (className vs class).
@maxijonson
@maxijonson 2 жыл бұрын
The CTRL+D is probably my favorite "pro user" shortcut, it saves me sooo much time
@meir231
@meir231 2 жыл бұрын
Those are great, thanks. Part 2 would be awesome
@alexf3946
@alexf3946 2 жыл бұрын
The thing that I love the most is the colorized parenthesis, its an add on, and there are many, but for knowing what is what and where things start and end are amazing. It works for css, js, c, c++, etc. It also works with []{} and anything that makes you start and end things like that.
@abhishek.rathore
@abhishek.rathore 2 жыл бұрын
Vscode now has that feature builtin.
@josephgutierrez8430
@josephgutierrez8430 2 жыл бұрын
When working with poorly formatted or indented code, one of my favorites is ctrl +k, ctrl+f . This command formats and indents all the code selected. Its a life saver for HTML with many nested tags
@virus2028
@virus2028 2 жыл бұрын
You could just turn on auto format on save in your vs code settings
@parkersmule
@parkersmule Жыл бұрын
commenting for later
@Isra-p1
@Isra-p1 2 жыл бұрын
🤯 Great watch, I just learnt new things to be more productive using vs code 🙌🏽
@FirstLast-gk6lg
@FirstLast-gk6lg 2 жыл бұрын
This was good stuff thank you. Also if you are working within a very large file there is a command to collapse all areas of code, and this will save huge time on those 5-10k line files(yes I know they should never get that big but hey, we all inherit tech debt)
@dango_3016
@dango_3016 2 жыл бұрын
I've been waiting for this video, despite neither of us knowing I did
@GarthHumphreys
@GarthHumphreys 2 жыл бұрын
Awesome, I’ve been looking for something like this.
@DiaryOfMuhib
@DiaryOfMuhib 2 жыл бұрын
This is one of the most useful videos for I've ever seen. Thank you
@davidfarquharson8207
@davidfarquharson8207 Жыл бұрын
Man visual studio code is the best and definitely a code/programming app it’s like you can design your own business
@maacpiash
@maacpiash 2 жыл бұрын
Selectively add changes to the Git staging, or revert them: If you want to add some particular changes made in a file to make a commit and keep the rest of the changes made in the same file for a later commit, - Click on the green spot between the changed line and the line number - Click on the '+' button to add the change to the staging, or the "undo" button to revert that change. This helps me keep my Git commits clean: each commit represents one unit of change.
@AkinBelieve
@AkinBelieve 3 ай бұрын
I do this also and atomic commit everything - it’s great. I gave it a custom shortcut of ‘ctrl + S + T’ I.e. stage. You can then just place your cursor or highlight blocks of code and stage only that. I wouldn’t recommend ‘command + s + t’ because it affects the conventional save command in an unexpected way.
@SzaboB33
@SzaboB33 2 жыл бұрын
I hit like 3 times! This video is so useful! :)
@nielfollero5
@nielfollero5 2 жыл бұрын
You should have hit it 1001 times
@ashadedblobfish
@ashadedblobfish 2 ай бұрын
Alt+Click and Ctrl+Shift+Up/Down are probably my favourite vscode shortcuts. So useful for efficiently semicolonising multiple lines at once
@sanskaarpatni9137
@sanskaarpatni9137 2 жыл бұрын
This is the best video for VSCode on KZbin
@iamunhoz
@iamunhoz 2 жыл бұрын
If you have multiple windows with a different project in each one, things can get confusing during alt-tabs. It's possible to set different themes to each project, so the different colors will help not getting confused. To set themes to a specific project, create a .vscode folder in your root e set configurations there in json format.
@mustafavurkac1650
@mustafavurkac1650 Жыл бұрын
I'm on Windows OS. I use 7+ Taskbar Tweaker which lets me change order of vs code instances (or any program). I put vs code on taskbard and press Win + $taskbarIndex multiple times to switch between instances. At the end I just memorize the index of each project and switch between them quickly.
@user-dd8ps6gh1s
@user-dd8ps6gh1s 5 ай бұрын
Really nice tips in here. The tasks one is going to change my life for sure.
@workflowinmind
@workflowinmind 2 жыл бұрын
Did not learn much as I'm using VSCode for years, but this video highlights some of its best feature in a very efficient way 👏
@nicolasdamours6817
@nicolasdamours6817 2 жыл бұрын
My favorite extension, by far, is the CodeTogether extension. It allows multiple developers to work together on the same code, Google doc style. It's a lifesaver when we want to share and/or explain code, since everyone have it's own editor.
@whoman7930
@whoman7930 2 жыл бұрын
how is it different than live share?
@nicolasdamours6817
@nicolasdamours6817 2 жыл бұрын
@@whoman7930 Having the actual code, rather than a live stream, allows you to naviguate between files, edit, highlight, follow reference and all that good stuff. It make pair programming way easier.
@tomasdrozdik7856
@tomasdrozdik7856 2 жыл бұрын
tip: you can redirect the output of any terminal command to the vscode: `date | code -` it's really useful for commands with long output
@kubo-svk790
@kubo-svk790 2 жыл бұрын
I would suggest error lens. It wrote errors/warning next to line which belongs to them. Saves tons of time. From not mentioned I use Git Graph, Bracket Pair Colorizer and Conventional commits
@jaiminparmar7996
@jaiminparmar7996 Жыл бұрын
Remote SSH is a lifesaver! I can drag and drop files and have them uploaded instantly and edit files with full vscode support. This is awesome :D
@antio1753
@antio1753 2 жыл бұрын
VERY IMPORTANT COMMAND THAT SAVED ME YEARS OF MY LIFE "lol" Place your cursor on a then press ctrl+p, and then type balance(outward) THIS command will drive you where the div close! (Make this keybord shortcut) THEN make also a keybord shortcut the command -> balance(inward) NOW you can select blocks of code(If you want press again balance outward or inward to mark the parent or the child block)
@michaelanthony4750
@michaelanthony4750 2 жыл бұрын
That's funny he made a whole video on it and you had 8 likes.
@mb59621
@mb59621 Жыл бұрын
I like how you can press alt and prepare multiple cursors .
@goclbert
@goclbert Жыл бұрын
I feel like I'm loading a revolver
@eltonalmeida8748
@eltonalmeida8748 2 жыл бұрын
Awesome homie! 🤯 Thanks so much 👊
@suryavamshi4737
@suryavamshi4737 Жыл бұрын
Thank you for explaining this thoroughly!
@DanteDeRuwe
@DanteDeRuwe 2 жыл бұрын
If you select something, that you want to select multiple times ( for example, you typed variable "x" when you meant "y" somewhere, you cannot simply rename the variable because then it would change everywhere and you would have duplicates etc) you can tap ctrl+D multiple times and each time it will add one occurrence to the selection. This is also very handy when writing markdown for example, as you can quickly select all occurrences of a word in a certain paragraph etc etc. The possibilities are really endless with Ctrl+D Edit: damn, Fireship knew about this already. No Tshirt for me :(
@figloalds
@figloalds Жыл бұрын
With multiple carrets, you can press home/end to go to the start/end of all lines, very useful for writing around multiple different things with different lengths
@gutoguto0873
@gutoguto0873 Жыл бұрын
caret*
@CalvinJKu
@CalvinJKu 3 ай бұрын
5 things I find EXTREMELY useful outta this video: 1. alt ↑ / ↓ - move line around 2. shift + alt ↑ / ↓ - move line around + copy 3. ctrl ← / → - jump to next symbol 4. Name your terminal sessions 5. Paste JSON as Code I used to use Sublime for many years and started using VS Code because I just realized it was the right thing to do. LOL Some of my own tips that I used to think it was common sense but then realized not so many developers are using. Use emacs key combinations for navigation in VS Code. Saves me so much time!
@garfieldnate
@garfieldnate Жыл бұрын
Paste JSON as Code is a lifesaver! Thank you!
@oumardicko5593
@oumardicko5593 2 жыл бұрын
I use vscode with vim (got addicted by the combination of the two)..ctrl+p to open files, hjkl for navigation, dd to delete line, dw to delete a variable and rewrite the new name. It helps a lot
@611morisita
@611morisita 2 жыл бұрын
You're right
@KetanLambat
@KetanLambat 2 жыл бұрын
My fav vs code items. Code Auto formatters -> helps to write clean code. Bracket Pair Colorizer -> JS was never so easy Everything has a UI and a JSON file (settings, shortcuts, etc)
@martinlortie
@martinlortie 2 жыл бұрын
I wish they had one for snippets, I hate modifying all those lines in these arrays...
@userbeans
@userbeans 2 жыл бұрын
Love you guys .. this video made my life so much easier 💖
@albertcamus5970
@albertcamus5970 2 жыл бұрын
Great video. With time so valuable still might have to watch it more then once..
@AdisDurakovic
@AdisDurakovic 2 жыл бұрын
My prefered shortcuts: Ctrl+Shift+C: Toggle line comments Ctrl+D: Duplicate line / selected lines Ctrl+Shift+D: Delete line / selected lines
@mormatus
@mormatus 2 жыл бұрын
These aren't standard, are they?
@AdisDurakovic
@AdisDurakovic 2 жыл бұрын
@@mormatus nope, but I got used to them a decade ago and whenever I switch IDEs, I set them up like that
@georgehelyar
@georgehelyar 2 жыл бұрын
The main issue I've had with VS Code is that the default shortcuts are different on different operating systems. For example alt+shift+f to format the document on Windows but ctrl+shift+i to format the document on Linux. These can be changed, it's just annoying if you use multiple operating systems. Also it's just too slow to open for use as a git editor (e.g. for interactive rebases). Other than that, I like it in general.
@fateriddle14
@fateriddle14 2 жыл бұрын
Thank you! this is exactly what I need!
@Robin_Goodfellow
@Robin_Goodfellow 2 жыл бұрын
VSCode's remote SSH feature has saved my butt so hard in the past. There was a project I was working on that only ran on our server (because I designed it all wrong, I'll admit), which only had command line access. With VS Code, I had my full text editor and VCS manager on a GUI-less server. So much pain avoided.
@varunagarwal1756
@varunagarwal1756 2 жыл бұрын
4:40 Use F2 instead of installing an extra extension. Even works for all the languages like React,JS and TS
@do0nv
@do0nv Жыл бұрын
You can even use it on regular variables too!
@ganeshdeshmukh8020
@ganeshdeshmukh8020 2 жыл бұрын
oh man, this is gem, vs-code really gives me adrenaline in my brain, so nice to have this Editor
@CorryTerblanche
@CorryTerblanche 2 жыл бұрын
Am I the only one that presses the like button 2 seconds into any of the videos this man releases? Good job your videos never fail to impress!
10 weird algorithms
9:06
Fireship
Рет қаралды 1 МЛН
God-Tier Developer Roadmap
16:42
Fireship
Рет қаралды 6 МЛН
Ох уж этот Дымок!!! 😠 #тигра #симба #дымок
00:55
Симбочка Пимпочка
Рет қаралды 8 МЛН
Иран ударил по израильскому аэропорту
00:14
TRT на русском
Рет қаралды 3,5 МЛН
I'm smart🧠most likely this is simply impossible😭
00:19
Nintendo just killed open-source emulator Yuzu
4:26
Fireship
Рет қаралды 654 М.
Coding Adventure: Rendering Text
1:10:54
Sebastian Lague
Рет қаралды 399 М.
You probably won’t survive 2024... Top 10 Tech Trends
8:56
Fireship
Рет қаралды 1,6 МЛН
The Best Software Engineering Advice | Prime Reacts
55:05
ThePrimeTime
Рет қаралды 210 М.
10 Math Concepts for Programmers
9:32
Fireship
Рет қаралды 1,7 МЛН
Linux got wrecked by backdoor attack
4:32
Fireship
Рет қаралды 1,1 МЛН
There’s a fast new code editor in town
3:58
Fireship
Рет қаралды 945 М.
Set up a Mac in 2024 for Power Users and Developers
1:00:34
Syntax
Рет қаралды 172 М.
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,2 МЛН
SSH into Remote VM with VS Code | Tunneling into any cloud | GCP Demo
10:26
Начали делать пол в пристройке// WD-40 своими руками
29:17
Деревенское счастье
Рет қаралды 78 М.
How to get a message from a developer? #standoff #system #scam
0:53
Standoff 2 Live
Рет қаралды 169 М.