25 VS Code Productivity Tips and Speed Hacks 

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!

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

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

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.

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.

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

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

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.

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

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.

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.

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

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

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.

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!

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.

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

Pro tip: instead of pressing crtl+p then ">", you can only press F1 to execute commands.

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!

I keep watching this and adding pieces of it to my coding practices in VSCode. It's a game changer, for real, thank you!!

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!

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

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.

I've switched from Visual Studio to VS Code for most my .NET Core projects. VS Code is the most scalable editor Microsoft has ever built

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

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

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

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.

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.

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.

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!

The CTRL+D is probably my favorite "pro user" shortcut, it saves me sooo much time

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

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.

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!

Awesome rundown of VS Code features in less than 12 minutes. Thank you.

"There are only two hard things in CS: cache invalidation, naming things and off-by-one errors." missed opportunity...

I watched it many times along the year and I still learn new things ... Thx bro !

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.

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)

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

For once a VSCode video that genuinely helpful. Cheers! Wasn’t aware of a bunch of the bits you showed (like the @ symbol trick)

Some I use : 1. Ctrl + \ to create the copy of a code file -> helpful when we're working on a big code file and don't want to scroll too much. 2. Shift + alt + rightArrrow to mark the whole code inside the brackets -> now never use the mouse to select the code or text inside the bracket.😎 3.Ctrl + Shift + \ to move fast between start and end of the brackets .

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

It's the first time i already know everything on a Fireship video. For once i don't suffer impostor syndrome :D

Currently using Remote containers in project. My teammates 💙 it. Btw your content quality is 💯. Never have I enjoyed a Dev channel so much!!

You just helped me prevent my future self from going back in time and disrupting the time-space continuum to use these features.

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.

1. tip for renaming anything in all of our code there's an shortcut just press F2 key. and just type new name of your thing. 2. to delete a whole line without selecting just press SHIFT + DELETE 3. to delete a word in forward direction press Ctrl + Delete.This will delete the word after the cursor. 4. to delete words in backward direction then just press Ctrl + Backspace to delete it. 5. press F1 or fn + F1 to access command palllete enjoy.

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)

This video is lifechanging. I use VSCode but didn't know these tips (example, alt up and down to move lines, ctrl x to cut a line like dd in vim and then paste it somewhere else). As a test, I clocked how long it takes me to simply either stay on my keyboard and type 1-20 without even rushing it (I typed the characters one at a time with a short pause, I didn't just run my finger across the top row), and it took 9 seconds while being slow and deliberate. Then I tried it again but after each one I lifted my finger, reached for the mouse, clicked another part of the screen, clicked back to where I was writing, moved my hand back to the keyboard from the mouse (just touching my right hand anywhere on the keyboard, with my left hand already ready to type the next number) and going back and forth to the mouse like this for a count 1-20 took this long: 71 seconds. That means staying on the keyboard is literally 8x faster even while staying slow and deliberate. 8x speed improvement!! that section of the video along with the other tips is literally lifechanging as a developer and helps explain how come Fireship is a God tier developer (for example for another video built an application in ten different frameworks quickly, which involves debugging JavaScript ten diffferent times, for ten different frameworks each with their own quirks). I will study and practice the tips in this video carefully. If anyone else has such God tier productivity tips for VS Code feel free to reply to this comment (even once it is a couple of years old), as I expect to stay on VS Code for my IDE for a very long time! Thank you Fireship for sharing these amazing tips.

My prefered shortcuts: Ctrl+Shift+C: Toggle line comments Ctrl+D: Duplicate line / selected lines Ctrl+Shift+D: Delete line / selected lines

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 ^^

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.

Awesome content as always 🤩 I knew some of these, but never heard of the rest, thnx alot!

Number 1 Developer! You’re an inspiration to many of us! Keep it up!

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.

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.

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 !

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

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

Alt+Click and Ctrl+Shift+Up/Down are probably my favourite vscode shortcuts. So useful for efficiently semicolonising multiple lines at once

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!

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.

Love every video, a simple but useful feature is on .md(markdown) files you can hit cmd+shift+v to preview the formatted file

tip: about siderbar - Ctrl + Shift + B to open/collapse vscode siderbar - Ctrl + Shift + X: open extension - Ctrl + Shift + E: open Explorer - in some different input method: Ctrl + ` may fail. Instead, can use Ctrl + J to open the terminal section!

Amazing, you are helping so much a lot of developers around the globe

Amazing tips, that @ symbol to break down files is awesome

The thing with vscode it that, without any extensions it's praticly useless, but with them it's a masterpiece, it's flexible and has a lot of extensions that mean if you want something to code, you have a high chance that someone else wanted it and so he made an extensions for that.

Absolutely blown my mind! Thanks for the good work 👍

This is hands down the best VS Code video in existence. 👏

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.

My dude you opened a whole new world to me, danke sehr schön

The best design extension for VSCode is Vibrancy. In my opinion it's the cleanest and best transparent theme you can find for VSCode. I can only recommend it to everyone.

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).

I've been waiting for this video, despite neither of us knowing I did

few more that i use: 1. ctrl + page up/down to switch between tabs 2. ctrl + shift + page up/down to move tabs 3. Ctrl + shift + e to switch to file explorer, ctrl + n to make a new file, ctrl + shift +n to make a new folder

This is one of the most useful videos for I've ever seen. Thank you

Great stuff, I'm going to rewatch this several times!

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.

🤯 Great watch, I just learnt new things to be more productive using vs code 🙌🏽

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 👏

Awesome, I’ve been looking for something like this.

tip: you can redirect the output of any terminal command to the vscode: `date | code -` it's really useful for commands with long output

This video asks users to use EMACS culture. I used EMACS on Linux, and moved to VS code, when I used Windows. But never realized the value of EMACS until this video. Thank you.

You can be like me and hate Micro$oft for what they are, but their devs really hit the nail on the head with VS Code. My go-to daily use IDE and I am not ashamed to say it. They put a lot of work and dedication into this thing, and nothing else even compares. VS Code is the best IDE for most languages outright.

I hit like 3 times! This video is so useful! :)

I like how you can press alt and prepare multiple cursors .

Really nice tips in here. The tasks one is going to change my life for sure.

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.

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)

The Todo Tree extension lets you see all of your todos in a gui. When ever you write TODO or @todo somewhere in the project it keeps track of it and lets you keep track of what you have to do

Thank you for explaining this thoroughly!

Those are great, thanks. Part 2 would be awesome

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.

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

ITS so great to learn these, just like bash, after you get used to it, you feel so natural and your coding is much faster

Paste JSON as Code is a lifesaver! Thank you!

4:40 Use F2 instead of installing an extra extension. Even works for all the languages like React,JS and TS

I found this video pretty mind blowing as a new VScode user. Cheers